maptalks 开发GIS地图（19）maptalks.three.12

1. 建筑物轮廓为建筑的边缘线，内部不进行填充颜色，只有边缘线进行勾勒，效果也不错。

2. 将建筑物填充为黑色方块，获取建筑物的边线

 1         //default values
 2         var OPTIONS = {
 3             altitude: 0
 4         };
 5 
 6         //https://zhuanlan.zhihu.com/p/199353080
 7         class OutLine extends maptalks.BaseObject {
 8             constructor(mesh, options, material, layer) {
 9                 options = maptalks.Util.extend({}, OPTIONS, options, { layer });
10                 super();
11                 //Initialize internal configuration
12                 // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135
13                 this._initOptions(options);
14 
15                 const edges = new THREE.EdgesGeometry(mesh.getObject3d().geometry, 1);
16                 const lineS = new THREE.LineSegments(edges, material);
17                 this._createGroup();
18                 this.getObject3d().add(lineS);
19                 //Initialize internal object3d
20                 // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140
21 
22                 //set object3d position
23                 this.getObject3d().position.copy(mesh.getObject3d().position);
24             }
25         }

3. 页面显示

4. 源码地址

https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo