首页 > 其他 > 详细

maptalks 开发GIS地图(19)maptalks.three.12 - buildings-outline

时间:2021-05-06 14:57:01      阅读:31      评论:0      收藏:0      [点我收藏+]

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

 

maptalks 开发GIS地图(19)maptalks.three.12 - buildings-outline

原文:https://www.cnblogs.com/googlegis/p/14734218.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!