AMap+Three.js踩坑日记-灵析社区

Ned

最近有个项目要跟高德地图结合,2D功能和3D功能都要有，于是就用到AMap.GLCustomLayer，能让我用Three,那就可以放飞自我了，然而我头秃了！

官方示例：developer.amap.com/demo/jsapi-…

注意事项

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记得要对调一下才是正确的

后续开发中遇到问题，会继续更新~

阅读量：514

点赞量：0

收藏量:0