最近有个项目要跟高德地图结合,2D功能和3D功能都要有，于是就用到AMap.GLCustomLayer，能让我用Three,那就可以放飞自我了，然而我头秃了！
官方示例：https://developer.amap.com/demo/jsapi-v2/example/selflayer/glcustom-layer
注意事项
1.three.js版本问题
我之前习惯124的，官方给出的是142，现在这两个版本没问题，不清楚其他版本行不行。
2.中心点设置
这会作为参考的原点，所有坐标相对于这个坐标的
map.customCoords.setCenter(mapConfig.center);
3.不要在render里面搞事情
直接按照官方照搬，render就是个帧渲染，在里面搞东西会导致你不停的重复操作，卡死你，把你的requestAnimationFrame动画提到外面
var gllayer = new AMap.GLCustomLayer({
// 图层的层级
zIndex: 10,
// 初始化的操作，创建图层过程中执行一次。
init: async (gl) => {
},
render: () => {
//直接按照官方照搬
}
});
map.add(gllayer);
// 动画
function animate() {
if (window.threeApp?.isStats) {
window.threeApp.stats.update();
}
if (window.TWEEN) {
window.TWEEN.update();
}
if (window.controls) {
window.controls.update();
}
map.render();
requestAnimationFrame(animate);
}
animate();
4. 高德地图的视角控制
你能采用center,zoom,pitch,rotation进行调控视角了，通过getView来获取当前视角，然后对应赋值。地图的视角切换已经自带动画了，TWEEN可以省了，优秀！
cameraTo(c) {
this.map.setCenter(c.pos);
this.map.setZoom(c.zoom);
this.map.setPitch(c.pitch, true, 1000);
this.map.setRotation(c.rotate, true, 1000);
this.camera.position.x = c.camera.x;
this.camera.position.y = c.camera.y;
this.camera.position.z = c.camera.z;
}
getView() {
console.log('center', this.map.getCenter());
console.log('zoom', this.map.getZoom());
console.log('pitch', this.map.getPitch());
console.log('rotate', this.map.getRotation());
console.log('camera', this.camera.position);
}
5.添加模型后发现模型不见了
emmm~，打印scene，明明在的，咋就没踪没影了。
1.除了要用customCoords.lngLatToCoord转换坐标位置，还要注意高德地图的xyz跟常用THREE的xyz有点不同
- THREE里面，z对应前后，x对应左右，y对应上下
- 而AMAP里面，xy是对应经纬度，z对应的上下的位置,模型有可能需要转个角度
Math.PI*0.5.
2.老生常谈的注意模型大小，模型大小跟地图放缩是同步的，有可能因为这样而看不清。
6.跟高德地图模型混合，但又不想清空附近的建筑模型
这个问题我也不知道，求大神来解答。目前我要不只能用人家的建筑模型，要不就把建筑给关了showBuildingBlock: false。
7.包围盒计算区别
function getObjBox(object) {
if (object.updateMatrixWorld) {
object.updateMatrixWorld();
}
// 获得包围盒得min和max
const box = new THREE.Box3().setFromObject(object);
let objSize = box.getSize(new THREE.Vector3());
// 返回包围盒的中心点
const center = box.getCenter(new THREE.Vector3());
return {
size: objSize,
center,
box
};
}
因为THREE与AMAP的y和z是不同的，然后就会THREE依旧遵循原来的规则，box的min,max，center,size的y和z记得要对调一下才是正确的
