1. 和尾线效果类似的 轨迹追踪功能。线路逐渐显示,更适合做轨迹显示。
2. 使用了 lineTrip 对象,直接处理已有数据。
1 var offset = 500; 2 lineTrips = list.slice(0, offset).map(d => { 3 var line = new LineTrip(d.linestring, { 4 chunkLength: d.len / 100, 5 speed: 1, 6 altitude: 2, 7 }, material, threeLayer) 8 return line; 9 }); 10 threeLayer.addMesh(lineTrips);
3. 自定义 lineTrip 扩展类,
1 class LineTrip extends maptalks.BaSEObject { 2 constructor(linestring, options, material, layer) { 3 options = maptalks.Util.extend({}, OPTIONS, options, { layer, linestring }); 4 super(); 5 //Initialize internal configuration 6 // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaSEObject.js#L135 7 this._initOptions(options); 8 9 const { altitude, chunkLength, speed } = options; 10 const chunkLines = lineslice(linestring, chunkLength); 11 12 const centerPt = layer.coordinatetoVector3(linestring.getCenter()); 13 //cache position for faster computing,reduce double counting 14 const positionMap = {}; 15 for (let i = 0, len = chunkLines.length; i < len; i++) { 16 const chunkLine = chunkLines[i]; 17 for (let j = 0, len1 = chunkLine.length; j < len1; j++) { 18 const lnglat = chunkLine[j]; 19 const key = lnglat.join(',').toString(); 20 if (!positionMap[key]) { 21 positionMap[key] = layer.coordinatetoVector3(lnglat).sub(centerPt); 22 } 23 } 24 } 25 26 let len = 0; 27 chunkLines.forEach(element => { 28 len += element.length; 29 }); 30 len *= 3; 31 //generate geometry 32 const result = getChunkLinesPosition(chunkLines.slice(0, 1), layer, positionMap, centerPt); 33 const positions = result.positions; 34 const geometry = new THREE.BufferGeometry(); 35 const ps = new Float32Array(len); // 3 vertices per point 36 geometry.addAttribute('position', new THREE.BufferAttribute(ps, 3).setDynamic(true)); 37 setLineGeometryAttribute(geometry, positions.slice(0, 6)); 38 39 this._createLine(geometry, material); 40 41 //set object3d position 42 const z = layer.distancetoVector3(altitude, altitude).x; 43 const center = linestring.getCenter(); 44 const v = layer.coordinatetoVector3(center, z); 45 this.getobject3d().position.copy(v); 46 47 this._params = { 48 index: 0, 49 len: chunkLines.length, 50 chunkLines, 51 layer, 52 speed: Math.min(1, speed), 53 idx: 0, 54 positions: [], 55 positionMap, 56 centerPt 57 }; 58 this._init(); 59 } 60 61 _init() { 62 const { len, chunkLines, layer, positionMap, centerPt } = this._params; 63 for (let i = 0; i < len; i++) { 64 let ps = []; 65 if (i > 0) { 66 const prePs = this._params.positions[i - 1]; 67 for (let j = 0, len1 = prePs.length; j < len1; j++) { 68 ps.push(prePs[j]); 69 } 70 const nextPs = getChunkLinesPosition([chunkLines[i]], layer, positionMap, centerPt).positions; 71 for (let j = 0, len1 = nextPs.length; j < len1; j++) { 72 ps.push(nextPs[j]); 73 } 74 } else { 75 const result = chunkLines.slice(0, i); 76 ps = getChunkLinesPosition(result, layer, positionMap, centerPt).positions; 77 } 78 this._params.positions[i] = ps; 79 } 80 } 81 82 83 _animation() { 84 const { index, positions, idx, speed, len, chunkLines, layer, positionMap, centerPt } = this._params; 85 const i = Math.round(index); 86 if (i > idx) { 87 this._params.idx++; 88 let ps = positions[i]; 89 if (!ps) { 90 const result = chunkLines.slice(0, i); 91 ps = getChunkLinesPosition(result, layer, positionMap, centerPt).positions; 92 this._params.positions[i] = ps; 93 } 94 setLineGeometryAttribute(this.getobject3d().geometry, ps); 95 this.getobject3d().geometry.attributes.position.needsUpdate = true; 96 } 97 if (index >= len) { 98 this._params.index = -1; 99 this._params.idx = -1; 100 } 101 this._params.index += speed; 102 } 103 }
5. 源码地址
https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。