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