maptalks 开发GIS地图（31）maptalks.three.24- custom-fatline
1. fatline ，这个名字也很有讲究，可是我还是不知道它的含义。
2. 创建 fatline 扩展类
1 var OPTIONS = { 2 altitude: 0 3 }; 4 5 class FatLine extends maptalks.BaseObject { 6 constructor(lineString, options, material, layer) { 7 super(); 8 //geoutil.js getLinePosition 9 const { positions } = getLinePosition(lineString, layer); 10 const positions1 = _getLinePosition(lineString, layer).positions; 11 12 options = maptalks.Util.extend({}, OPTIONS, options, { layer, lineString, positions: positions1 }); 13 this._initOptions(options); 14 15 const geometry = new THREE.LineGeometry(); 16 geometry.setPositions(positions); 17 const map = layer.getMap(); 18 const size = map.getSize(); 19 const width = size.width, 20 height = size.height; 21 material.resolution.set(width, height); 22 const line = new THREE.Line2(geometry, material); 23 line.computeLineDistances(); 24 this._createGroup(); 25 this.getObject3d().add(line); 26 const { altitude } = options; 27 const z = layer.distanceToVector3(altitude, altitude).x; 28 const center = lineString.getCenter(); 29 const v = layer.coordinateToVector3(center, z); 30 this.getObject3d().position.copy(v); 31 } 32 33 34 setSymbol(material) { 35 if (material && material instanceof THREE.Material) { 36 material.needsUpdate = true; 37 const size = this.getMap().getSize(); 38 const width = size.width, 39 height = size.height; 40 material.resolution.set(width, height); 41 this.getObject3d().children[0].material = material; 42 } 43 return this; 44 } 45 46 //test Baseobject customize its identity 47 identify(coordinate) { 48 const layer = this.getLayer(), size = this.getMap().getSize(), 49 camera = this.getLayer().getCamera(), positions = this.getOptions().positions, altitude = this.getOptions().altitude; 50 let canvas = layer._testCanvas; 51 if (!canvas) { 52 canvas = layer._testCanvas = document.createElement('canvas'); 53 } 54 canvas.width = size.width; 55 canvas.height = size.height; 56 const context = canvas.getContext('2d'); 57 58 const pixels = simplepath.vectors2Pixel(positions, size, camera, altitude, layer); 59 const lineWidth = this.getObject3d().children[0].material.linewidth + 3; 60 simplepath.draw(context, pixels, 'LineString', { lineWidth: lineWidth }); 61 const pixel = this.getMap().coordToContainerPoint(coordinate); 62 if (context.isPointInStroke(pixel.x, pixel.y)) { 63 return true; 64 } 65 } 66 }
3. 将 ./data/berlin-roads.txt 数据进行解密并进行处理，获取路径经纬度。
1 fetch('./data/berlin-roads.txt').then(function (res) { 2 return res.text(); 3 }).then(function (geojson) { 4 geojson = LZString.decompressFromBase64(geojson); 5 geojson = JSON.parse(geojson); 6 7 var lineStrings = maptalks.GeoJSON.toGeometry(geojson); 8 var timer = 'generate line time'; 9 console.time(timer); 10 var list = []; 11 lineStrings.forEach(function (lineString) { 12 list.push({ 13 lineString, 14 //geoutil.js lineLength 15 len: lineLength(lineString) 16 }); 17 }); 18 list = list.sort(function (a, b) { 19 return b.len - a.len 20 }); 21 lines = list.slice(0, 200).map(function (d) { 22 var line = new FatLine(d.lineString, { altitude: 100 }, material, threeLayer); 23 24 //tooltip test 25 line.setToolTip(line.getId(), { 26 showTimeout: 0, 27 eventsPropagation: true, 28 dx: 10 29 }); 30 31 32 //infowindow test 33 line.setInfoWindow({ 34 content: 'hello world,id:' + line.getId(), 35 title: 'message', 36 animationDuration: 0, 37 autoOpenOn: false 38 }); 39 40 41 //event test 42 ['click', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) { 43 line.on(eventType, function (e) { 44 console.log(e.type, e); 45 // console.log(this); 46 if (e.type === 'mouseout') { 47 this.setSymbol(material); 48 } 49 if (e.type === 'mouseover') { 50 this.setSymbol(highlightmaterial); 51 } 52 }); 53 }); 54 return line; 55 }); 56 console.log('lines.length:', lines.length); 57 console.timeEnd(timer); 58 threeLayer.addMesh(lines); 59 threeLayer.config('animation', true); 60 })
4. 页面显示
5. 源码地址
https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo
