标签：fatline layer maptalks const material GIS line lineString size
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。