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