写一个高德地图巡航功能的小DEMO

---

theme: nico

相关源码和模型的下载链接地址 点击链接进行跳转

风格设置

加载地图

使用AMapLoader.load加载地图，从 控制台  申请一个属于自己的key

```typescript import AMapLoader from '@amap/amap-jsapi-loader'; ...

const AMap = await AMapLoader.load({ "key": "您自己申请的KEY", // 申请好的Web端开发者Key，首次调用 load 时必填 "version": "2.0", "plugins": ["AMap.Walking", "AMap.Driving"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 "Loca": { version: '2.0.0' } })

```

使用new AMap.Map实例化地图，并设置mapStyle为"amap://styles/grey"，也可以在官网上自己设计属于自己的风格，主要讲的不是这部分所以大概交代一下就过去了，实例化Map后返回一个map实例，后续的操作都需要用到。

添加GLCustomLayer图层

typescript new AMap.GLCustomLayer({ zIndex: 100, init:()=>{}, render: ()=>{} })

threejs的加载和创建需要在init属性的方法里操作，render主要是用来渲染一些镜头信息和 WebGLRenderer的重绘。

在init方法中创建一个THREEJS的透视相机

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

镜头信息的获取

前文实例化Map后获取一个map的实例，其中提供了customCoords数据转换的工具，可以从这里获取到镜头信息，后续转化经纬度到3D世界坐标时候也会用到，转换工具需要提前获取到，方便后续的工作。

typescript var { near, far, fov, up, lookAt, position } = customCoords.getCameraParams();

转换工具提供一个getCameraParams方法，其中包含相机位置等其他属性

---

fov — 摄像机视锥体垂直视野角度\ near — 摄像机视锥体近端面\ far — 摄像机视锥体远端面