--- theme: fancy highlight: vs --- 地图经常使用标牌来标注地点位置，是时候来点炫酷的效果了！用高德地+Three.js，带你实现飞线、运动边界和炫酷标牌。 ![20240828\_221726.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dd46294b41444cf58c6085d68718dd14~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=jHpFTU2okXlWUuFxRbJ5PrUYlWA%3D) # 1.高德地图+Three.js 可以参考官方示例[高德地图-自定义图层-GLCustomLayer 结合 THREE](https://lbs.amap.com/demo/javascript-api-v2/example/selflayer/glcustom-layer) * 初始化高德3D地图 ```js this.map = new AMap.Map(this.container, { //缩放范围 zooms: [2, 20], zoom: 4.5, //倾斜角度 pitch: 0, //隐藏标签 showLabel: false, //3D地图模式 viewMode: '3D', //初始化地图中心点 center: this.center, //暗色风格 mapStyle: 'amap://styles/dark' }); ``` * 自定义高德地图经纬度转px工具，即墨卡托投影坐标转换。 ```js // 数据转换工具 this.customCoords = this.map.customCoords; //设置坐标转换中心 this.customCoords.setCenter(this.center); ``` * 高德地图添加WebGL自定义图层，初始化Three.js配置 ```js // 创建 GL 图层 var gllayer = new AMap.GLCustomLayer({ //zIndex: 10, // 初始化的操作，创建图层过程中执行一次。 init: (gl) => { //初始化Three相机 this.camera = new THREE.PerspectiveCamera( 60, this.container.offsetWidth / this.container.offsetHeight, 1, 1 << 30 ); //初始化Three渲染器 this.renderer = new THREE.WebGLRenderer({ context: gl // 地图的 gl 上下文 }); this.renderer.setPixelRatio(window.devicePixelRatio); // 自动清空画布这里必须设置为 false，否则地图底图将无法显示 this.renderer.autoClear = false; //初始化场景 this.scene = new THREE.Scene(); this.createChart(); }, render: () => { // 这里必须执行！！重新设置 three 的 gl 上下文状态。 this.renderer.resetState(); //设置坐标转换中心 this.customCoords.setCenter(this.center); var { near, far, fov, up, lookAt, position } = this.customCoords.getCameraParams(); // 这里的顺序不能颠倒，否则可能会出现绘制卡顿的效果。 this.camera.near = near; this.camera.far = far; this.camera.fov = fov; this.camera.position.set(...position); this.camera.up.set(...up); this.camera.lookAt(...lookAt); this.camera.updateProjectionMatrix(); //渲染器渲染场景 this.renderer.render(this.scene, this.camera); // 这里必须执行！！重新设置 three 的 gl 上下文状态。 this.renderer.resetState(); } }); this.map.add(gllayer); ``` # 2.绘制运动边界行政区边界可以通过[地理小工具](https://datav.aliyun.com/portal/school/atlas/area_selector)获取。高德地图折线[polyline](https://lbs.amap.com/api/javascript-api-v2/documentation#polyline)经常使用，但是让折线运动起来，你可能很少其实只需要添加几行代码就能实现。实现逻辑：添加边界折线，然后截取折线的一段，让它跟着时间往后移动，即开始索引递增，截取相同折线，即可让折线运动起来。 ```js //绘制中国大陆运动边界 createChinaLine() { return new Promise((resolve) => { fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000.json') .then((res) => res.json()) .then((res) => { let path = res.features[0].geometry.coordinates[0][0]; //截取10%的线段 let len = Math.floor(path.length * 0.1); //边界折线 let polyline = new AMap.Polyline({ path: path, strokeWeight: 4, strokeColor: 'white', lineJoin: 'round', strokeOpacity: 1 }); this.map.add(polyline); //利用Tween创建动画 new TWEEN.Tween({ start: 0 }) .to({ start: path.length }, 3000) //无限循环动画 .repeat(Infinity) .onUpdate((obj) => { if (obj.start + len < path.length) { polyline.setPath(path.slice(obj.start, obj.start + len)); } else { const c = path.length - obj.start; //头尾相接时截取尾部+头部各一段 polyline.setPath( [].concat(path.slice(obj.start, path.length), path.slice(0, len - c)) ); } }) .start(); resolve(); }); }); } //Tween动画 animateAction() { if (TWEEN.getAll().length) { TWEEN.update(); } } ``` ![20240828\_222210.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5a9c6bb45cf54b808af839c6670c1667~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=q%2FPEMQe9mEAk0xtIoyh0mBRGJhU%3D) 运动边界实现简单，但效果一级棒！并且2D和3D地图都能用，优秀！ # 3.绘制升起山峰在对应的坐标点上升起一座尖尖的山峰，这里使用Plane平面实现 * 顶点着色器 ```c++ precision mediump float; uniform float uTime; uniform float uHeight; varying float vD; float PI = acos(-1.0); vec2 center = vec2(0.5); void main(void) { //离中线的距离 float d = length(uv - center) * 2.0; //沿中心点往外减少 vD = pow(1.0 - d, 3.0); //山峰高度，随着uTime变化 float h = vD * uHeight * uTime; vec3 pos = vec3(position.x * 0.5, position.y * 0.5, h); gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } ``` * 片元着色器 ```c++ precision mediump float; uniform vec3 uColor; varying float vD; void main(void) { if(vD < 0.01)//透明度太小则不渲染颜色 discard; else//透明度随着距离中心点的变化 gl_FragColor = vec4(uColor, vD * 2.0); } ``` * 添加shaderMaterial的平面 ```js const material = new THREE.ShaderMaterial({ uniforms: { //随时间变化 uTime: { value: 0 }, //高度 uHeight: { value: this.size }, //颜色 uColor: { value: new THREE.Color(data.color) } }, //开启透明度 transparent: true, vertexShader: ``, fragmentShader: `` }); this.material = material; //平面形状，方便复用 if (!this.ageometry) { //平面的面数一定要足够才能形成山峰 const geometry = new THREE.PlaneGeometry(this.size, this.size, 500, 500); this.ageometry = geometry; } const plane = new THREE.Mesh(this.ageometry, material); //转换经纬度作为px const d = this.customCoords.lngLatToCoord(data.pos); plane.position.set(d[0], d[1], 0); this.scene.add(plane); ``` **注意：** 1. 平面的面数一定要足够才能形成山峰 2. 平面的大小和高度要足够大，在中国地图上才能看到，这里的`this.size=500000`，500k。在小的地图范围内，大小也要对应缩小。 3. 高德地图坐标与three.js的坐标有些许不同，经纬度`lng,lat`对应`xy`，而高度对应z坐标。 * 添加山峰升起动画 ```js addAnimate(start, end, time, update) { return new Promise((resolve) => { const tween = new TWEEN.Tween(start) .to(end, time) .onUpdate(update) .easing(TWEEN.Easing.Quadratic.In) .onComplete(() => { resolve(tween); }) .start(); }); } const tw = await this.addAnimate({ time: 0 }, { time: 1 }, 1000, (obj) => { this.material.uniforms.uTime.value = obj.time; }); //播放完删除动画 TWEEN.remove(tw); ``` ![20240828\_222847.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dd02b9888b744fd78a197e67bd775c1f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=lJUtg3yBioHFH51iwXeVrTp4UIo%3D) # 4.绘制浮动四棱锥 ```js //转换经纬度坐标 const d = this.customCoords.lngLatToCoord(data.pos); const r = this.size * 0.1; //四棱锥图形，方便复用 if (!this.cgeometry) { const geometry = new THREE.ConeGeometry(r, r * 2, 4, 1); this.cgeometry = geometry; } const material = new THREE.MeshLambertMaterial({ color: new THREE.Color(data.color) }); //创建四棱锥网格 const cone = new THREE.Mesh(this.cgeometry, material); //旋转90度，让四棱锥倒立 cone.rotateX(-Math.PI * 0.5); //设置位置 cone.position.set(d[0], d[1], this.size * 1.1); this.scene.add(cone); //收集四棱锥 this.cones.push({ obj: cone, step: this.speed }); ``` * 设置垂直高度坐标，让四棱锥上下浮动：遇到最大或最小高度时改变速度speed方向 ```js animateAction() { if (this.cones.length) { this.cones.forEach((c) => { //高低浮动 if (c.obj.position.z >= this.maxHeight) {//最大高度 c.step = -this.speed; } else if (c.obj.position.z <= this.minHeight) {//最小高度 c.step = this.speed; } c.obj.position.z += c.step; }); } } ``` ![20240828\_223155.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0d787f1085e646f6b135df7b152a1eab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=D5ntNM1UJptp98usxYVIrcMxwdg%3D) # 5.绘制文本标牌原本尝试用[Marker](https://lbs.amap.com/api/javascript-api-v2/documentation#marker)的自定义内容content来实现html标签的，但文档上说Marker高度属性height只有在2.1版本生效，但目前只有2.0版本，暂时无法使用高度属性 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c8a0ff13591d4e508476d9e0bf656e78~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=tXss8kb04MUqJzJQerbFV1EjFT0%3D) 通过咨询高德地图官方，官方推荐用Loca数据可视化里面的[ZMarkerLayer](https://lbs.amap.com/api/loca-v2/api#zmarkerlayer) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1295169d8ea24bd58cb4e8ab9c7e86a2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=IuJlM1W0GGYnLwXii6nH%2FhoqXuo%3D) [以下代码来源于高德地图-Loca API标牌点-某片区房价信息](https://lbs.amap.com/demo/loca-v2/demos/zmarker/house-price) ```js var triangleZMarker = new Loca.ZMarkerLayer({ loca: loca, zIndex: 119, depth: false, }); triangleZMarker.setSource(geo);//设置数据集 triangleZMarker.setStyle({ content: (i, feat) => {//html自定义内容 return ( '

' ); }, unit: 'meter', rotation: 0, alwaysFront: true, size: [60, 60], altitude: 15,//高度 }); triangleZMarker.addAnimate({//动画 key: 'altitude', value: [0, 1], random: true, transform: 1000, delay: 2000, yoyo: true, repeat: 999999, }); ``` ZMarker添加整一个图层Layer生成一批Marker，官方的示例很漂亮。因为我想控制一个个的Marker，故改用Three.js的CSS2DRender来实现。 * 在GLCustomLayer的init中添加初始化CSS2DRender ```js let labelRenderer = new CSS2DRenderer(); labelRenderer.setSize(container.offsetWidth, container.offsetHeight); labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.top = '0px'; //不妨碍界面上点击冲突 labelRenderer.domElement.style.pointerEvents = 'none'; this.container.appendChild(labelRenderer.domElement); this.labelRenderer = labelRenderer; ``` * 在在GLCustomLayer的init中添加CSS2DRender渲染 ```js this.labelRenderer.render(this.scene, this.camera); ``` * 添加Label标牌 ```js addLabel(dom, pos) { //label的dom可以触发事件 dom.style.pointerEvents = 'auto'; const label = new CSS2DObject(dom); label.position.set(...pos); this.scene.add(label); return label; } addALabel(data) { const div = document.createElement('div'); div.innerHTML = `

${data.name}

`; //坐标转换 const d = this.customCoords.lngLatToCoord(data.pos); const label = this.addLabel(div, [d[0], d[1], this.size * 1.5]); } ``` * 标牌动画和样式直接用css ```css //变大弹出 @keyframes big { 0% { transform: scale(0); } 100% { transform: scale(1); } } //闪烁 @keyframes flash { 0% { opacity: 0.3; } 100% { opacity: 1; } } .tip-box { --base-color: dodgerblue; border: solid 1px var(--base-color); background-color: rgba(30, 144, 255, 0.3); color: white; white-space: nowrap; padding-left: 8px; padding-right: 16px; height: 32px; animation: big 1s ease-in; border-radius: 16px; display: flex; align-items: center; box-shadow: 0 0 8px var(--base-color); } .tip-box .circle { background-color: var(--base-color); height: 16px; width: 16px; border-radius: 50%; animation: flash 0.5s ease-in alternate infinite; } .tip-box .text { margin: 0 8px; } ``` **注意**：DOM对象上如果有动画css请在外部包裹一层，避免css样式冲突，导致动画失效。 ![20240828\_224011.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d0d5a004a08149aa86ffcc69a80f75d9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=2rPZvceUbCeySqmpYh682SJGKqs%3D) # 6.绘制飞线飞线由管道形状绘制，通过着色器来改成头大尾小的形状。 * 顶点着色器 ```c++ float PI = acos(-1.0); varying float vT; varying float vS; uniform float uTime; uniform float uSize; uniform float uLen; void main(void) { //取模循环 float d = mod(uv.x - uTime, 1.0); //截取uLen长度 vS = smoothstep(0.0, uLen, d); //不在范围内不渲染 if(vS < 0.01 || d > uLen) return; //头大尾小的飞线坐标点 vec3 pos = position + normal * sin(PI * 0.5 * (vS - 0.6)) * uSize; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } ``` * 片元着色器 ```c++ varying float vS; uniform vec3 uColor; void main(void) { //透明度随着飞线头尾变小 gl_FragColor = vec4(uColor, vS); } ``` * 添加管道飞线，用贝塞尔曲线形成弯曲 ```js addLine(posList, color) { //经纬度坐标点统一转换 const d = this.customCoords.lngLatsToCoords(posList); //贝塞尔曲线形成弯曲 const curve = new THREE.QuadraticBezierCurve3( new THREE.Vector3(d[0][0], d[0][1], 0), //取中间点 new THREE.Vector3((d[0][0] + d[1][0]) * 0.5, (d[0][1] + d[1][1]) * 0.5, this.size), new THREE.Vector3(d[1][0], d[1][1], 0) ); const geometry = new THREE.TubeGeometry(curve, 32, 10000, 8, false); const material = new THREE.ShaderMaterial({ uniforms: { //随时间变化 uTime: { value: 0.0 }, //飞线长度 uLen: { value: 0.6 }, //飞线宽度 uSize: { value: 10000 }, //飞线颜色 uColor: { value: new THREE.Color(color) } }, //开启透明度 transparent: true, vertexShader: ``, fragmentShader: `` }); const line = new THREE.Mesh(geometry, material); this.scene.add(line); } ``` * 添加飞线动画，让飞线动起来 ```js new TWEEN.Tween({ time: 0 }) .to({ time: 1.0 }, 1000) //重复动画 .repeat(Infinity) .onUpdate((obj) => { material.uniforms.uTime.value = obj.time; }) .start(); ``` ![20240828\_224332.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ee26ff3e7902477a9fc5cf38bb6770d2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=ePViXZG1MulRKsAOSBG19MXocN4%3D) # 7.动画连续起来最终效果：地图绘制运动边界，镜头放大倾斜，对应地点长出尖尖的山峰，然后弹出一个上下浮动四棱锥和文本标牌，随即生出一条飞线，镜头跟随，跳到下一个景点，再次弹出四棱锥和文本标牌，重复，走过所有地点后，定格到最终视角。 ```js //运动边界线 await this.createChinaLine(); //绘制山峰 await this.createA(this.tags[0]); //视角变化 this.map.setPitch(68, false, 3000); this.map.setRotation(24, false, 3000); await this.sleep(2000); { //升起山峰 const tw = await this.addAnimate({ time: 0 }, { time: 1 }, 1000, (obj) => { this.material.uniforms.uTime.value = obj.time; }); TWEEN.remove(tw); //添加标牌 this.addALabel(this.tags[0]); } await this.sleep(2000); //绘制飞线 this.addLine([this.tags[0].pos, this.tags[1].pos], this.tags[0].color); for (let i = 1; i < this.tags.length; i++) { const data = this.tags[i]; //视角跟随到新地点 this.map.setCenter(data.pos, false, 1000); this.map.setZoom(6, false, 1000); await this.sleep(1000); //绘制山峰 await this.createA(data); //升起山峰 const tw = await this.addAnimate({ time: 0 }, { time: 1 }, 1000, (obj) => { this.material.uniforms.uTime.value = obj.time; }); TWEEN.remove(tw); this.addALabel(data); await this.sleep(1000); //添加飞线 if (i < this.tags.length - 1) { this.addLine([data.pos, this.tags[i + 1].pos], data.color); } else { //最终视角 this.map.setPitch(73.2, false, 3000); this.map.setZoom(5, false, 1000); this.map.setRotation(58.7, false, 3000); this.map.setCenter([101.6, 35.6], false, 1000); } } ``` ![20240828\_224717.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f30d1617e79a440c8950b1aa9f03797c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pWy5pWy5pWy5pWy5pq05L2g6ISR6KKL:q75.awebp?rk3s=f64ab15b&x-expires=1774337866&x-signature=Q4vY4atXq34qYmtBh8Dgsgxx968%3D) 高德地图3D地图视角设置真的很方便，还自带动画功能，效果真的很棒！ * `setZoom`设置缩放大小 * `setPitch`设置倾斜角度 * `setCenter`设置地图中心经纬度 * `setRotation`设置旋转角度 # 8.GitHub地址 `https://github.com/xiaolidan00/my-earth`