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
标签：fatline,layer,maptalks,const,material,GIS,line,lineString,size 来源： https://www.cnblogs.com/googlegis/p/14735819.html