init

展示地图

npm i @amap/amap-jsapi-loader --save

import AMapLoader from '@amap/amap-jsapi-loader';

3. 初始化

var AMap, map
window._AMapSecurityConfig = {

  securityJsCode: "d0543d6e1c9f40e8272aa30af54e8ded",

};
AMapLoader.load({

  key: "d0543d6e1c9f40e8272aa30af54e8ded", //申请好的Web端开发者key，调用 load 时必填

  version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15

})

  .then((res) => {
//JS API 加载完成后获取AMap对象
AMap = res
initMap()

  })

  .catch((e) => {
console.error(e); //加载错误提示

  });
function initMap () {

  map = new AMap.Map("map", {

    viewMode: '2D', //默认使用 2D 模式

    zoom: 11, //地图级别

    center: [116.397428, 39.90923], //地图中心点,背景天安门为例

  });

}

此时，一个平平无奇的高德地图跃然纸上

结合THREE

自定义图层-GLCustomLayer 结合 THREE-自有数据图层-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

环境搭建：

npm i three@0.142 # 24/2/1日数据

入门小案例-引入外部模型

照搬官网案例就行

我这里做了些许改动

效果如图

 代码如下：

import AMapLoader from '@amap/amap-jsapi-loader'
import * as THREE from 'three';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import {reactive } from 'vue'

2. 地图准备

// step map 
var AMap, map

window._AMapSecurityConfig = {

  securityJsCode: "d0543d6e1c9f40e8272aa30af54e8ded",

};
AMapLoader.load({

  key: "d0543d6e1c9f40e8272aa30af54e8ded", //申请好的Web端开发者key，调用 load 时必填

  version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15

})

  .then((res) => {
//JS API 加载完成后获取AMap对象
AMap = res
createMap() // 创建地图
createThree() // 创建three

  })

  .catch((e) => {
console.error(e); //加载错误提示

  });
function createMap () {

  map = new AMap.Map("map", {

    center: [116.54, 39.79],

    zooms: [2, 20],

    zoom: 14,

    viewMode: '3D',

    pitch: 50,

  });

}

3. three 准备 核心内容是创建GL图层，里面的 render 基本没什么变化

// step three init
var camera, renderer, scene
var model, monkey, mesh
// 数据转换工具
var customCoords
// 测试用数据
var data
function createThree () {

  customCoords = map.customCoords;

  data = customCoords.lngLatsToCoords([

    [116.52, 39.79],

    [116.54, 39.79],

    [116.56, 39.79],

  ])
// 创建 GL 图层
var gllayer = new AMap.GLCustomLayer({
// 图层的层级

    zIndex: 10,
// 初始化的操作，创建图层过程中执行一次。

    init: (gl) => {
initThree(gl)

    },

    render: () => {
// 这里必须执行！！重新设置 three 的 gl 上下文状态。

      renderer.resetState();
// 重新设置图层的渲染中心点，将模型等物体的渲染中心点重置
// 否则和 LOCA 可视化等多个图层能力使用的时候会出现物体位置偏移的问题

      customCoords.setCenter([116.52, 39.79]);
var { near, far, fov, up, lookAt, position } =

        customCoords.getCameraParams();

// 这里的顺序不能颠倒，否则可能会出现绘制卡顿的效果。

      camera.near = near;

      camera.far = far;

      camera.fov = fov;

      camera.position.set(...position);

      camera.up.set(...up);

      camera.lookAt(...lookAt);

      camera.updateProjectionMatrix();


      renderer.render(scene, camera);

// 这里必须执行！！重新设置 three 的 gl 上下文状态。

      renderer.resetState();

    },

  });

  map.add(gllayer)
window.addEventListener('resize', onWindowResize);

}
function onWindowResize () {

  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

然后我们来看initThree

function initThree (gl) {
// 这里我们的地图模式是 3D，所以创建一个透视相机，相机的参数初始化可以随意设置，因为在 render 函数中，每一帧都需要同步相机参数，因此这里变得不那么重要。
// 如果你需要 2D 地图（viewMode: '2D'），那么你需要创建一个正交相机

  camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
100,
1 << 30

  );


  renderer = new THREE.WebGLRenderer({

    context: gl, // 地图的 gl 上下文
// alpha: true,
// antialias: true,
// canvas: gl.canvas,

  });

// 自动清空画布这里必须设置为 false，否则地图底图将无法显示

  renderer.autoClear = false;

  scene = new THREE.Scene();

// 环境光照和平行光
var aLight = new THREE.AmbientLight(0xffffff, 3);
var dLight = new THREE.DirectionalLight(0xffffff, 10);

  dLight.position.set(1000, -100, 900);

  scene.add(dLight);

  scene.add(aLight);
// 加载模型、mesh
addModel()
addMesh()

}

以上内容也基本不变，但最后加载模型、mesh按照你需要加载的物体变化。

加载外部模型

function addModel () {
const glftLoader = new GLTFLoader()

  glftLoader.load("/public/models/monkeyAndCube.glb", function (gltf) {

    model = gltf.scene

    model.traverse((child) => {

      child.scale.set(500, 500, 500); // 放大模型

      child.rotation.x = 0.5 * Math.PI;

      child.position.z = 0.8;
console.log(child.name)
if (child.name === "monkey") { monkey = child }

    })

    monkey.position.set(data[0][0], data[0][1], 500); // 设置位置

    scene.add(monkey)

  })

}

加载mesh

function addMesh () {
//  这里可以使用 three 的各种材质
var mat = new THREE.MeshLambertMaterial({

    side: THREE.DoubleSide,

    color: 0x1e2f97,

    transparent: true,

    opacity: .4,

    depthWrite: false

  })
var geo = new THREE.BoxBufferGeometry(1200, 1200, 1200);
const d = data[2];

  mesh = new THREE.Mesh(geo, mat);

  mesh.position.set(d[0], d[1], 500);

  scene.add(mesh);
animate()

}
// 动画
function animate () {

  mesh.rotateZ((1 / 180) * Math.PI);

  map.render();
requestAnimationFrame(animate);

}

移动猴头！ 记得自己给这个函数加个按钮

function moveMonkey (checked) {
console.log(checked, 'moveMonkey')
if (checked) {

    monkey.position.set(data[2][0], data[2][1], 500);

  } else {

    monkey.position.set(data[0][0], data[0][1], 500);

  }

}

[!TIP] 这里面地图和three好像是一起渲染的。如果你只加载了猴头，没加载mesh，此时是没有动画效果的，所以移动猴头的话，这个效果有延迟，缩放平移一下地图就好了。但是如果添加了动画，由于一直调用 map.render() 函数，因此不会出现此问题

大功告成！

结合tween.js

是不是觉得猴头的移动还不够顺滑，加个tween的动画试试

import * as TWEEN from '@tweenjs/tween.js'

2. 更改 moveMonkey函数

function moveMonkey (checked) {
console.log(checked, 'moveMonkey')
if (checked) {
// monkey.position.set(data[2][0], data[2][1], 500);
const tween = new TWEEN.Tween(monkey.position)
.to({ x: data[2][0], y: data[2][1], z: 500 }, 2000)
.start()
} else {
// monkey.position.set(data[0][0], data[0][1], 500);
const tween = new TWEEN.Tween(monkey.position)
.to({ x: data[0][0], y: data[0][1], z: 500 }, 2000)
.start()
}
}

3. 在 render 函数中加入 ( 这里指Three 函数中的 创建GL图层的 render 函数)

 TWEEN.update()

大功告成！Tween的其他功能也可以使用