本文适合对vue，arcgis4.x，threejs，ES6较熟悉的人群食用。

先报备一下版本号

"vue": "^2.6.11"

"@arcgis/core": "^4.21.2"

"three": "^0.149.0"

语法：vue，ES6

其实现在主流很多海量建筑渲染的方案是加载3DTiles服务图层，可是奈何我们这里没有这个配套。只能全部依靠前端来渲染，目前数据量在6万级别的不规则建筑物房屋。

试过很多方案，当然，还有一个很重要的因素，就是你的机器显卡厉不厉害，反正我的很垃圾，GTX1050，笔记本，我把chrome的强制使用显卡渲染开启了，避免集成显卡出来搞笑。以下方案中的代码是基于项目接口的，不能直接跑起来，但是关键的策略逻辑已经完全体现。

先说结论，我选的方案3。

1：首先根据视口内切圆的范围来查询，把构建了的要素缓存，在地图漫游的时候在缓存中查找，避免重复构建，移出视口内切圆范围的要素移除（缓存不清除），其实就和瓦片加载机制（行列号级别缓存）类似。还要限制级别，如果当级别很小的时候，视口内切圆中的数据量太多，会卡顿，所以这种方案最好是做达到一定级别，房屋图层渐变显示，反之渐变消失，代码中有。再用arcgis的graphicslayer，计算faces，构建Mesh对象，这个构建Mesh的过程需要根据3D知识自己写（getFaces，getTopFaces，getSideFaces），代码中有。这个方案性能很一般，大概只能大几千的数据量，顶多1万，并且在数据量支持不了的时候我开启了延迟队列加载的策略。样式控制相对于featurelayer灵活一点，效果也可控制，比如使用gsap动画库做伸展效果。

1 import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
2 import Graphic from "@arcgis/core/Graphic";
3 import Mesh from "@arcgis/core/geometry/Mesh";
4 import Polygon from "@arcgis/core/geometry/Polygon";
5 import Polyline from "@arcgis/core/geometry/Polyline";
6 import Circle from "@arcgis/core/geometry/Circle";
7 import * as watchUtils from "@arcgis/core/core/watchUtils";
8 import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
9 import mapx from '@/utils/mapUtils.js';
10
11 export default class BMLayer {
12 constructor(ops) {
13 this.$url = ops.url;
14 this.$view = ops.view;
15 // this.$zoom = ops.zoom;
16 this.$ofomatter = ops.ofomatter;
17 this.$idkey = ops.idkey;
18 this.$click = ops.click;
19 this.$zfomatter = ops.zfomatter;
20 this.$wfomatter = ops.wfomatter;
21 this.$sfomatter = ops.sfomatter;
22
23 this.setup()
24 }
25
26 setup() {
27 this.layer = null;
28 this.highlightSelect = null;
29 this.preModels = {};
30 this.ef = 1.2;
31 this.currentCircle = null;
32 this.autoLoad = false;
33
34 this.rendering = false;
35
36 this.layer = new GraphicsLayer();
37 this.$view.map.add(this.layer);
38
39 this.extentChanged();
40 }
41
42 addModel(fs) {
43 for (let key in this.preModels) {
44 var m = this.preModels[key];
45 if (!this.$view.extent.intersects(m.geometry)) {
46 this.layer.remove(m);
47 delete this.preModels[key];
48 }
49 }
50 var per = 100;
51 if (fs.length < per) { 52 per = fs.length; 53 } 54 var sid = setInterval(() => {
55 var i = 0;
56 for (; i < per; i++) { 57 var f = fs.pop(); 58 if (f) { 59 var att = f.attributes; 60 var uid = att[this.$idkey]; 61 62 if (this.preModels.hasOwnProperty(uid)) { 63 64 } else { 65 var z = this.$zfomatter(att); 66 var model = this.createModel(f, z, this.getBaseSymbol()); 67 this.layer.add(model); 68 69 this.preModels[uid] = model; 70 } 71 } else { 72 this.rendering = false; 73 clearInterval(sid); 74 break; 75 } 76 } 77 }, 25); 78 } 79 80 click(results, mapPoint) { 81 if (results && results.length > 0) {
82 var grah = results[0].graphic;
83 if (grah.layer === this.layer) {
84 if (this.highlightSelect) {
85 this.highlightSelect.remove();
86 }
87
88 this.$view.whenLayerView(grah.layer).then(
89 layerView => {
90 this.highlightSelect = layerView.highlight(grah);
91 });
92 this.$click(grah, mapPoint, this.$view);
93 } else {
94 if (this.highlightSelect) {
95 this.highlightSelect.remove();
96 }
97 // this.$view.popup.close()
98 }
99 } else {
100 if (this.highlightSelect) {
101 this.highlightSelect.remove();
102 }
103 // this.$view.popup.close()
104 }
105 }
106
107 clearHighlight() {
108 if (this.highlightSelect) {
109 this.highlightSelect.remove();
110 }
111 }
112
113 setAutoLoad(v) {
114 this.autoLoad = v
115 }
116
117 extentChanged() {
118 return watchUtils.whenTrue(this.$view, "stationary", () => {
119 // console.log(this.$view.zoom)
120 const flag = this.$ofomatter(this.$view);
121 if (flag) {
122 if (!this.rendering) {
123 this.rendering = true;
124 if (this.autoLoad) {
125 this.loadData();
126 }
127 }
128 // this.layer.visible = true;
129 if (this.layer.opacity === 0) {
130 this.fadeVisibilityOn(this.$view, this.layer, true)
131 }
132 } else {
133 // this.clearLayer();
134 this.rendering = false;
135 // this.layer.visible = false;
136 if (this.layer.opacity === 1) {
137 this.fadeVisibilityOn(this.$view, this.layer, false)
138 }
139 }
140 });
141 }
142
143 loadData() {
144 // var r = this.getRadius(1.5);
145 // var p = this.$view.center.clone();
146 // p.z = 1;
147 // this.currentCircle = new Circle(p, {
148 // radius: r
149 // });
150 let where = ''
151 if (this.$wfomatter) {
152 where = this.$wfomatter();
153 // console.log(where)
154 }
155 mapx.queryTask(this.$url, {
156 where: where,
157 outSpatialReference: '4326',
158 geometry: this.$view.extent,
159 returnGeometry: true
160 }).then(featureSet => {
161 this.addModel(featureSet);
162 }).catch(error => {})
163 }
164
165 clearLayer() {
166 this.layer.removeAll();
167 this.preModels = {};
168 }
169
170 createModel(f, h, sym) {
171 var geo = f.geometry;
172 var ris = geo.rings[0];
173 ris.pop();
174 var len = ris.length;
175 var pos = new Array((len - 1) * 2 * 3);
176 var ii = 0;
177 for (; ii < len; ii++) { 178 var ary = ris[ii]; 179 pos[ii * 3] = ary[0]; 180 pos[ii * 3 + 1] = ary[1]; 181 pos[ii * 3 + 2] = 0; 182 pos[ii * 3 + len * 3] = ary[0]; 183 pos[ii * 3 + len * 3 + 1] = ary[1]; 184 pos[ii * 3 + len * 3 + 2] = h; 185 } 186 187 var polygon = new Polygon({ 188 type: "polygon", 189 rings: [ris] 190 }); 191 192 var ll = pos.length / 2 / 3; 193 var faces = this.getFaces(polygon, ll); 194 var mesh = new Mesh({ 195 vertexAttributes: { 196 position: pos 197 }, 198 components: [{ 199 faces: faces 200 }], 201 }); 202 203 let symbol 204 if (this.$sfomatter) { 205 symbol = this.getBaseSymbol(this.$sfomatter(f)) 206 } else { 207 symbol = sym 208 } 209 var graphic = new Graphic({ 210 attributes: f.attributes, 211 geometry: mesh, 212 symbol: symbol 213 }); 214 215 return graphic; 216 } 217 218 getFaces(polygon, len) { 219 var topfaces = this.getTopFaces(polygon); 220 var sidefaces = this.getSideFaces(len); 221 // var i = 0; 222 // for(; i < topfaces.length; i++) { 223 // var t = topfaces[i]; 224 // sidefaces.push(t); 225 // } 226 var i = 0; 227 for (; i < topfaces.length; i++) { 228 var t = topfaces[i]; 229 sidefaces.push(t + len); 230 } 231 return sidefaces; 232 } 233 234 getTopFaces(polygon) { 235 var temp = Mesh.createFromPolygon(polygon, {}); 236 var faces = temp.components[0].faces; 237 return faces; 238 } 239 240 getSideFaces(l) { 241 var fas = []; 242 var a = []; 243 var i = 0; 244 for (; i < l; i++) { 245 var n0 = 0; 246 var n1 = 0; 247 var n2 = 0; 248 var n3 = 0; 249 if (i + 1 == l) { 250 n0 = i; 251 n1 = 0; 252 n2 = i + l; 253 n3 = i + 1; 254 } else { 255 n0 = i; 256 n1 = i + 1; 257 n2 = i + l; 258 n3 = i + l + 1; 259 } 260 fas.push(n0, n1, n2, n1, n2, n3); 261 } //console.log(fas); 262 return fas; 263 } 264 265 getRadius() { 266 var extent = this.$view.extent; 267 var paths = [ 268 [ 269 [extent.xmin, extent.ymin], 270 [extent.xmax, extent.ymax] 271 ] 272 ]; 273 var line = new Polyline({ 274 paths: paths, 275 spatialReference: this.$view.spatialReference 276 }); 277 var d = geometryEngine.geodesicLength(line, 9001); 278 return d * 0.5 * this.ef; 279 } 280 281 getBaseSymbol(color = [224, 224, 224, 0.8]) { 282 return { 283 type: "mesh-3d", 284 symbolLayers: [{ 285 type: "fill", 286 material: { 287 color: color, 288 colorMixMode: "tint" 289 } 290 }] 291 } 292 } 293 294 fadeVisibilityOn(view, layer, flag) { 295 let animating = true; 296 let opacity = flag ? 0 : 1; 297 // fade layer's opacity from 0 to 298 // whichever value the user has configured 299 const finalOpacity = flag ? 1 : 0; 300 layer.opacity = opacity; 301 302 view.whenLayerView(layer).then((layerView) => {
303 function incrementOpacityByFrame() {
304 if (opacity >= finalOpacity && animating) {
305 layer.opacity = finalOpacity;
306 animating = false;
307 return;
308 }
309
310 layer.opacity = opacity;
311 opacity += 0.07;
312
313 requestAnimationFrame(incrementOpacityByFrame);
314 }
315
316 function decrementOpacityByFrame() {
317 if (opacity <= finalOpacity && animating) {
318 layer.opacity = finalOpacity;
319 animating = false;
320 return;
321 }
322
323 layer.opacity = opacity;
324 opacity -= 0.07;
325
326 requestAnimationFrame(decrementOpacityByFrame);
327 }
328
329 // Wait for tiles to finish loading before beginning the fade
330 watchUtils.whenFalseOnce(
331 layerView,
332 "updating",
333 function(updating) {
334 if (flag) {
335 requestAnimationFrame(incrementOpacityByFrame);
336 } else {
337 requestAnimationFrame(decrementOpacityByFrame);
338 }
339 }
340 );
341 });
342 }
343
344 }

2：首先根据视口内切圆的范围来查询，把构建了的要素缓存，在地图漫游的时候在缓存中查找，避免重复构建，移出视口内切圆范围的要素移除（缓存不清除），其实就和瓦片加载机制（行列号级别缓存）类似。还要限制级别，如果当级别很小的时候，视口内切圆中的数据量太多，会卡顿，所以这种方案最好是做达到一定级别，房屋图层渐变显示，反之渐变消失，代码中有。再用arcgis的featurelayer，symbol的polygon-3d、extrude来构建加载，其实featurelayer应该是开了work异步加载的，但是数据量也就能保证在2万左右，并且初始化的时候加载策略和3dTiles是类似的，看不全！是在用户漫游地图，放大平移的时候分批加载的。性能一般，样式控制不灵活，效果也不行。

1 import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
2 import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
3 import Graphic from "@arcgis/core/Graphic";
4 import Mesh from "@arcgis/core/geometry/Mesh";
5 import Polygon from "@arcgis/core/geometry/Polygon";
6 import Polyline from "@arcgis/core/geometry/Polyline";
7 import Circle from "@arcgis/core/geometry/Circle";
8 import * as watchUtils from "@arcgis/core/core/watchUtils";
9 import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
10 import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils";
11 import mapx from '@/utils/mapUtils.js';
12
13 export default class BMLayer {
14 constructor(ops) {
15 this.$url = ops.url;
16 this.$view = ops.view;
17 // this.$zoom = ops.zoom;
18 this.$ofomatter = ops.ofomatter;
19 this.$idkey = ops.idkey;
20 this.$click = ops.click;
21 this.$zfomatter = ops.zfomatter;
22 this.$wfomatter = ops.wfomatter;
23 this.$sfomatter = ops.sfomatter;
24
25 this.setup()
26 }
27
28 setup() {
29 this.layer = null;
30 this.highlightSelect = null;
31 this.preModels = {};
32 this.ef = 1.2;
33 this.autoLoad = false;
34 this.circle = null;
35 this.circleGraphic = null;
36 this.rendering = false;
37 this.maxZoom = 20;
38 this.baseRadius = 700;
39 this.factor = 0.66;
40
41 this.layer = new GraphicsLayer();
42 this.$view.map.add(this.layer);
43
44 this.baselayer = new FeatureLayer({
45 source: [],
46 objectIdField: "ObjectID",
47 geometryType: 'polygon',
48 render: {
49 type: "simple",
50 symbol: this.getBaseSymbol()
51 }
52 });
53 this.$view.map.add(this.baselayer);
54
55 this.addEvents();
56 }
57
58 addModel(fs) {
59 for (let key in this.preModels) {
60 const m = this.preModels[key];
61 // if (!this.$view.extent.intersects(m.geometry)) {
62 const flag = geometryEngine.intersects(this.circle, m.geometry)
63 if (!flag) {
64 this.layer.remove(m);
65 delete this.preModels[key]
66 }
67 }
68 const per = 300;
69 // console.log(fs.length)
70 if (fs.length > per) {
71 fs.length = per
72 }
73 let sid = setInterval(() => {
74 if (fs.length === 0) {
75 this.rendering = false;
76 clearInterval(sid);
77 }
78 let i = 0;
79 for (; i < fs.length; i++) { 80 const f = fs.pop() 81 if (f) { 82 const att = f.attributes; 83 const uid = att[this.$idkey]; 84 85 if (this.preModels.hasOwnProperty(uid)) { 86 87 } else { 88 const z = this.$zfomatter(att) 89 let symbol; 90 if (this.$sfomatter) { 91 symbol = this.getBaseSymbol(z, this.$sfomatter(f)); 92 } else { 93 symbol = this.getBaseSymbol(z); 94 } 95 const model = f; 96 model.symbol = symbol; 97 // this.layer.add(model); 98 this.baselayer.applyEdits({addFeatures: [model]}) 99 100 this.preModels[uid] = model; 101 } 102 } 103 } 104 }, 25); 105 } 106 107 click(results, mapPoint) { 108 if (results && results.length > 0) {
109 var grah = results[0].graphic;
110 if (grah.layer === this.layer) {
111 if (this.highlightSelect) {
112 this.highlightSelect.remove();
113 }
114
115 this.$view.whenLayerView(grah.layer).then(
116 layerView => {
117 this.highlightSelect = layerView.highlight(grah);
118 });
119 this.$click(grah, mapPoint, this.$view);
120 } else {
121 if (this.highlightSelect) {
122 this.highlightSelect.remove();
123 }
124 // this.$view.popup.close()
125 }
126 } else {
127 if (this.highlightSelect) {
128 this.highlightSelect.remove();
129 }
130 // this.$view.popup.close()
131 }
132 }
133
134 clearHighlight() {
135 if (this.highlightSelect) {
136 this.highlightSelect.remove();
137 }
138 }
139
140 setAutoLoad(v) {
141 this.autoLoad = v
142 }
143
144 addEvents() {
145 watchUtils.watch(this.$view, 'zoom', () => {
146 if (this.$view.zoom > this.maxZoom) {
147 this.$view.zoom = this.maxZoom;
148 }
149 });
150
151 watchUtils.whenTrue(this.$view, "stationary", () => {
152 // console.log(this.$view.zoom)
153 const flag = this.$ofomatter(this.$view);
154 if (flag) {
155 if (!this.rendering) {
156 this.rendering = true;
157 if (this.autoLoad) {
158 this.loadData();
159 }
160 }
161 // this.layer.visible = true;
162 if (this.layer.opacity === 0) {
163 this.fadeVisibilityOn(this.$view, this.layer, true)
164 }
165 } else {
166 // this.clearLayer();
167 this.rendering = false;
168 // this.layer.visible = false;
169 if (this.layer.opacity === 1) {
170 this.fadeVisibilityOn(this.$view, this.layer, false)
171 }
172 }
173 });
174 }
175
176 loadData() {
177 var r = this.getRadius();
178 var center = this.$view.center;
179 const p = webMercatorUtils.xyToLngLat(center.x, center.y);
180 p.z = 10;
181 this.circle = new Circle({
182 center: p,
183 geodesic: true,
184 numberOfPoints: 10,
185 radius: r,
186 radiusUnit: "meters"
187 })
188 // if(this.circleGraphic) {
189 // this.layer.remove(this.circleGraphic);
190 // }
191 // this.circleGraphic = new Graphic({
192 // geometry: this.circle,
193 // symbol: {
194 // type: "simple-fill",
195 // color: [51, 51, 204, 0.7],
196 // style: "solid",
197 // outline: {
198 // color: "white",
199 // width: 1
200 // }
201 // }
202 // })
203 // this.layer.add(this.circleGraphic);
204
205 let where = ''
206 if (this.$wfomatter) {
207 where = this.$wfomatter();
208 }
209 mapx.queryTask(this.$url, {
210 where: where,
211 outSpatialReference: '4326',
212 // geometry: this.$view.extent,
213 geometry: this.circle,
214 returnGeometry: true
215 }).then(featureSet => {
216 this.addModel(featureSet);
217 }).catch(error => {})
218 }
219
220 clearLayer() {
221 this.layer.removeAll();
222 this.preModels = {};
223 }
224
225 getRadius() {
226 const zoomMap = {
227 '15': this.baseRadius / this.factor / this.factor,
228 '16': this.baseRadius / this.factor,
229 '17': this.baseRadius,
230 '18': this.baseRadius * this.factor,
231 '19': this.baseRadius * this.factor * this.factor,
232 '20': this.baseRadius * this.factor * this.factor * this.factor,
233 '21': this.baseRadius * this.factor * this.factor * this.factor * this.factor
234 }
235 const zoom = Math.round(this.$view.zoom)
236 return zoomMap[zoom + '']
237 // var extent = this.$view.extent;
238 // var paths = [
239 // [
240 // [extent.xmin, extent.ymin],
241 // [extent.xmax, extent.ymax]
242 // ]
243 // ];
244 // var line = new Polyline({
245 // paths: paths,
246 // spatialReference: this.$view.spatialReference
247 // });
248 // var d = geometryEngine.geodesicLength(line, 'meters');
249 // // var d = geometryEngine.planarLength(line, 'meters');
250 // return d * 0.5 * this.ef;
251 }
252
253 getBaseSymbol(z, color = [224, 224, 224, 0.8]) {
254 return {
255 type: "polygon-3d",
256 symbolLayers: [{
257 type: "extrude",
258 size: z,
259 material: {
260 color: color
261 },
262 edges: {
263 type: "solid",
264 size: 1.5,
265 color: [50, 50, 50, 0.5]
266 // type: "sketch",
267 // color: [50, 50, 50, 0.5],
268 // size: 1.5,
269 // extensionLength: 2
270 }
271 }]
272 }
273 }
274
275 fadeVisibilityOn(view, layer, flag) {
276 let animating = true;
277 let opacity = flag ? 0 : 1;
278 // fade layer's opacity from 0 to
279 // whichever value the user has configured
280 const finalOpacity = flag ? 1 : 0;
281 layer.opacity = opacity;
282
283 view.whenLayerView(layer).then((layerView) => {
284 function incrementOpacityByFrame() {
285 if (opacity >= finalOpacity && animating) {
286 layer.opacity = finalOpacity;
287 animating = false;
288 return;
289 }
290
291 layer.opacity = opacity;
292 opacity += 0.07;
293
294 requestAnimationFrame(incrementOpacityByFrame);
295 }
296
297 function decrementOpacityByFrame() {
298 if (opacity <= finalOpacity && animating) {
299 layer.opacity = finalOpacity;
300 animating = false;
301 return;
302 }
303
304 layer.opacity = opacity;
305 opacity -= 0.07;
306
307 requestAnimationFrame(decrementOpacityByFrame);
308 }
309
310 // Wait for tiles to finish loading before beginning the fade
311 watchUtils.whenFalseOnce(
312 layerView,
313 "updating",
314 function(updating) {
315 if (flag) {
316 requestAnimationFrame(incrementOpacityByFrame);
317 } else {
318 requestAnimationFrame(decrementOpacityByFrame);
319 }
320 }
321 );
322 });
323 }
324
325 }

3：首先把漫游策略改了，方案1、2是漫游中加载并缓存，现在直接在初始化的时候给出进度条，加载所有数据（6万+），肯定是不能一口气去查询加载的，我还是启动一个延迟加载的策略，在地图上分区域分布队列加载，尽量在每一帧里面分摊开销。然后完全舍弃arcgis的要素渲染，改用threejs来绘制，arcgis给出了一个接口externalRenderers，这个很重要，可以集成第三方3D引擎。threejs这边使用Shape，ExtrudeGeometry，Mesh来构建要素，但是如果仅仅是这样去渲染，当6万+个建筑物在地图上是会卡顿的，因为对象太多了，那么我们是否可以做一个合并操作呢，把6万+个要素按区域合并，也就是合并geometry咯，一开始在网上找了一个mergeBufferGeometries算法，后来发现threejs API里面有BufferGeometryUtils.mergeBufferGeometries，感觉threejs计算速度快一点。合并之后在加载到图层上，那么事实上，比如全市是15个区，那就只有15个Mesh，当然不卡了，满帧跑。不过相比大家也会发现一个问题，就是当要和建筑物交互的时候，就获取不到点击的Mesh了，这个问题我会继续区研究一下怎么改进。最后，效果和样式就不用担心了，threejs自带的Material就很丰富，不行还有Shader着色器，动效也方便，在updateModels里面随便操作（threejs的render事件，我封装了），归根结底，剩下的就是threejs的能力展现了。

ExternalRendererLayer：

1 import * as THREE from 'three'
2 import Stats from 'three/examples/jsm/libs/stats.module.js'
3 import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils"
4 import * as externalRenderers from "@arcgis/core/views/3d/externalRenderers"
5
6 export default class ExternalRendererLayer {
7 constructor({
8 view,
9 options
10 }) {
11 this.view = view
12 this.options = options
13
14 this.objects = []
15 this.scene = null
16 this.camera = null
17 this.renderer = null
18
19 this.setup();
20 }
21
22 setup() {
23 if (process.env.NODE_ENV !== "production") {
24 const sid = setTimeout(() => {
25 clearTimeout(sid)
26 //构建帧率查看器
27 let stats = new Stats()
28 stats.setMode(0)
29 stats.domElement.style.position = 'absolute'
30 stats.domElement.style.left = '0px'
31 stats.domElement.style.top = '0px'
32 document.body.appendChild(stats.domElement)
33 function render() {
34 stats.update()
35 requestAnimationFrame(render)
36 }
37 render()
38 }, 5000)
39 }
40 }
41
42 apply() {
43 let myExternalRenderer = {
44 setup: context => {
45 this.createSetup(context)
46 },
47 render: context => {
48 this.createRender(context)
49 }
50 }
51
52 externalRenderers.add(this.view, myExternalRenderer);
53 }
54
55 createSetup(context) {
56 this.scene = new THREE.Scene(); // 场景
57 this.camera = new THREE.PerspectiveCamera(); // 相机
58
59 this.setLight();
60
61 // 添加坐标轴辅助工具
62 const axesHelper = new THREE.AxesHelper(10000000);
63 this.scene.Helpers = axesHelper;
64 this.scene.add(axesHelper);
65
66 this.renderer = new THREE.WebGLRenderer({
67 context: context.gl, // 可用于将渲染器附加到已有的渲染环境(RenderingContext)中
68 premultipliedAlpha: false, // renderer是否假设颜色有 premultiplied alpha. 默认为true
69 // antialias: true
70 // logarithmicDepthBuffer: false
71 });
72 this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
73 this.renderer.setViewport(0, 0, this.view.width, this.view.height); // 视口大小设置
74
75 // 防止Three.js清除ArcGIS JS API提供的缓冲区。
76 this.renderer.autoClearDepth = false; // 定义renderer是否清除深度缓存
77 this.renderer.autoClearStencil = false; // 定义renderer是否清除模板缓存
78 this.renderer.autoClearColor = false; // 定义renderer是否清除颜色缓存
79 // this.renderer.autoClear = false;
80
81 // ArcGIS JS API渲染自定义离屏缓冲区，而不是默认的帧缓冲区。
82 // 我们必须将这段代码注入到three.js运行时中，以便绑定这些缓冲区而不是默认的缓冲区。
83 const originalSetRenderTarget = this.renderer.setRenderTarget.bind(
84 this.renderer
85 );
86 this.renderer.setRenderTarget = target => {
87 originalSetRenderTarget(target);
88 if (target == null) {
89 // 绑定外部渲染器应该渲染到的颜色和深度缓冲区
90 context.bindRenderTarget();
91 }
92 };
93
94 this.addModels(context);
95
96 context.resetWebGLState();
97 }
98
99 createRender(context) {
100 const cam = context.camera;
101 this.camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);
102 this.camera.up.set(cam.up[0], cam.up[1], cam.up[2]);
103 this.camera.lookAt(
104 new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2])
105 );
106 this.camera.near = 1;
107 this.camera.far = 100;
108
109 // 投影矩阵可以直接复制
110 this.camera.projectionMatrix.fromArray(cam.projectionMatrix);
111
112 this.updateModels(context);
113
114 this.renderer.state.reset();
115
116 context.bindRenderTarget();
117
118 this.renderer.render(this.scene, this.camera);
119
120 // 请求重绘视图。
121 externalRenderers.requestRender(this.view);
122
123 // cleanup
124 context.resetWebGLState();
125 }
126
127 //经纬度坐标转成三维空间坐标
128 lngLatToXY(view, points) {
129
130 let vector3List; // 顶点数组
131
132 let pointXYs;
133
134
135 // 计算顶点
136 let transform = new THREE.Matrix4(); // 变换矩阵
137 let transformation = new Array(16);
138
139 // 将经纬度坐标转换为xy值\
140 let pointXY = webMercatorUtils.lngLatToXY(points[0], points[1]);
141
142 // 先转换高度为0的点
143 transform.fromArray(
144 externalRenderers.renderCoordinateTransformAt(
145 view,
146 [pointXY[0], pointXY[1], points[
147 2]], // 坐标在地面上的点[x值, y值, 高度值]
148 view.spatialReference,
149 transformation
150 )
151 );
152
153 pointXYs = pointXY;
154
155 vector3List =
156 new THREE.Vector3(
157 transform.elements[12],
158 transform.elements[13],
159 transform.elements[14]
160 )
161
162 return {
163 vector3List: vector3List,
164 pointXYs: pointXYs
165 };
166 }
167
168 setLight() {
169 console.log('setLight')
170 let ambient = new THREE.AmbientLight(0xffffff, 0.7);
171 this.scene.add(ambient);
172 let directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
173 directionalLight.position.set(100, 300, 200);
174 this.scene.add(directionalLight);
175 }
176
177 addModels(context) {
178 console.log('addModels')
179 }
180
181 updateModels(context) {
182 // console.log('updateModels')
183 }
184
185 }

BuildingLayerExt：

1 import mapx from '@/utils/mapUtils.js';
2
3 import * as THREE from 'three'
4 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
5 import ExternalRendererLayer from './ExternalRendererLayer.js'
6
7 import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
8 import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
9 import Graphic from "@arcgis/core/Graphic";
10 import SpatialReference from '@arcgis/core/geometry/SpatialReference'
11 import * as externalRenderers from "@arcgis/core/views/3d/externalRenderers"
12 import Polygon from "@arcgis/core/geometry/Polygon";
13 import Polyline from "@arcgis/core/geometry/Polyline";
14 import Circle from "@arcgis/core/geometry/Circle";
15 import * as watchUtils from "@arcgis/core/core/watchUtils";
16 import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
17 import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils";
18
19 import { getBuildings } from '@/api';
20
21 const EF = 1;
22 const UID = 'FID'; //OBJECTID
23 const R = 0.8;
24 const LEVEL = 16;
25 const HEIGHT = 40;
26 const INCREASE = 30;
27
28 const JBMS = [
29 420106001,
30 420106002,
31 420106003,
32 420106005,
33 420106006,
34 420106007,
35 420106008,
36 420106009,
37 420106010,
38 420106011,
39 420106012,
40 420106013,
41 420106014,
42 420106015
43 ];
44
45 export default class BuildingLayerExt extends ExternalRendererLayer {
46 constructor({
47 view,
48 options
49 }) {
50 super({
51 view,
52 options
53 })
54 }
55
56 setup() {
57 // this.circleGraphic = null;
58 // this.layer = new GraphicsLayer();
59
60 this.cacheObjects = {};
61
62 this.group = new THREE.Group();
63
64 // this.material = new THREE.MeshLambertMaterial({
65 // transparent: true,
66 // opacity: 0.9,
67 // color: 0xFFFFFF
68 // }); //材质对象Material
69
70 // 顶点着色器
71 const vertexShader = `
72 // 向片元着色器传递顶点位置数据
73 varying vec3 v_position;
74 void main () {
75 v_position = position;
76 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
77 }
78 `;
79 // 片元着色器
80 const fragmentShader = `
81 // 接收顶点着色器传递的顶点位置数据
82 varying vec3 v_position;
83
84 // 接收js传入的值
85 uniform float u_time;
86 uniform vec3 u_size;
87 uniform vec3 u_flow;
88 uniform vec3 u_color;
89 uniform vec3 u_flowColor;
90 uniform vec3 u_topColor;
91
92 void main () {
93 // 给建筑设置从上到下的渐变颜色
94 float indexPct = v_position.z / u_size.z;
95 vec3 color = mix(u_color, u_topColor,indexPct);
96 // // 根据时间和速度计算出当前扫描点的位置， 以上顶点为准
97 // float flowTop = mod(u_flow.z * u_time, u_size.z);
98 // // 判断当前点是否在扫描范围内
99 // if (flowTop > v_position.z && flowTop - u_flow.z < v_position.z) { 100 // // 扫描范围内的位置设置从上到下的渐变颜色 101 // float flowPct = (u_flow.z - ( flowTop - v_position.z)) / u_flow.z; 102 // color = mix(color ,u_flowColor, flowPct); 103 // } 104 gl_FragColor = vec4(color, 0.8); 105 } 106 `; 107 108 const ratio = { 109 value: 0 110 } 111 112 // 楼宇扫描相关配置数据 113 const flowData = { 114 boxSize: { // 建筑群包围盒的尺寸 115 x: 0, 116 y: 0, 117 z: HEIGHT 118 }, 119 flowConf: { 120 x: 1, // 开关 1 表示开始 121 y: 20, // 范围 122 z: 100 // 速度 123 }, 124 color: "#000000", // 建筑颜色 125 flowColor: "#ffffff", // 扫描颜色 126 topColor: '#409eff' // 顶部颜色 127 } 128 129 this.material = new THREE.ShaderMaterial({ 130 transparent: true, 131 uniforms: { 132 u_time: ratio, 133 u_size: { 134 value: flowData.boxSize 135 }, 136 u_flow: { 137 value: flowData.flowConf 138 }, 139 u_color: { 140 value: new THREE.Color(flowData.color) 141 }, 142 u_flowColor: { 143 value: new THREE.Color(flowData.flowColor) 144 }, 145 u_topColor: { 146 value: new THREE.Color(flowData.topColor) 147 } 148 }, 149 vertexShader, 150 fragmentShader 151 }); 152 153 watchUtils.whenTrue(this.view, "stationary", () => {
154 if (this.options.zoomChange) {
155 this.options.zoomChange(this.view.zoom);
156 }
157 // if (this.view.zoom >= LEVEL) {
158 // this.group.visible = true;
159 // this.loadData();
160 // } else {
161 // this.group.visible = false;
162 // }
163 });
164 }
165
166 addModels(context) {
167 super.addModels(context);
168
169 this.loadData();
170 }
171
172 updateModels(context) {
173 super.updateModels(context);
174
175 // this.objects.forEach(obj => {
176 // obj.material.uniforms.time.value += 0.01;
177 // })
178
179 // this.group.children.forEach(mesh => {
180 // if (mesh.scale.z >= 1) {
181 // mesh.scale.z = 1;
182 // } else {
183 // mesh.scale.z += 0.02;
184 // }
185 // })
186 }
187
188 loadData() {
189 let count = 0;
190 // let index = 0;
191 this._loadData(featureSet => {
192 // console.log(index);
193 // index++;
194 // console.log('fz:' + featureSet.length)
195 // console.log(count += featureSet.length)
196
197 let _objects = []
198 featureSet.forEach(feature => {
199 // this._validateModel(feature);
200 const obj = this._addModel(feature);
201 _objects.push(obj.geometry);
202 })
203
204 console.log(_objects.length)
205
206 console.time("render building");
207 const mergeGeometry = BufferGeometryUtils.mergeBufferGeometries(_objects);
208 // const mergeGeometry = this.mergeBufferGeometry(_objects);
209 console.timeEnd("render building");
210 const mergeMesh = new THREE.Mesh(mergeGeometry, this.material);
211 // mergeMesh.scale.z = 0;
212
213 this.group.add(mergeMesh);
214 console.log('this.group.children.length2:' + this.group.children.length);
215
216 this.scene.add(this.group); //网格模型添加到场景中
217 })
218 // http://10.102.109.88:9530/?type=qzx
219
220 // const url = config.mapservice[1].base_url + config.mapservice[1].house_url;
221 // // const url = 'http://10.34.4.103:8010/ServiceAdapter/Map/%E6%88%BF%E5%B1%8B/15d4b9815cf7420da111307850d2049f/0';
222 // // const url = 'http://10.100.0.132:6080/arcgis/rest/services/wuchang_gim/gim_region/MapServer/0';
223 // JBMS.forEach(jbm => {
224 // mapx.queryTask(url, {
225 // where: `JBM='${jbm}'`,
226 // outSpatialReference: '4326',
227 // // geometry: this.view.extent,
228 // // geometry: this.circle,
229 // returnGeometry: true
230 // }).then(featureSet => {
231 // console.log('fz:' + featureSet.length)
232
233 // console.time("render building");
234
235 // let _objects = []
236 // featureSet.forEach(feature => {
237 // // this._validateModel(feature);
238 // const obj = this._addModel(feature);
239 // _objects.push(obj.geometry);
240 // })
241 // const mergeGeometry = BufferGeometryUtils.mergeBufferGeometries(_objects);
242 // // const mergeGeometry = this.mergeBufferGeometry(_objects);
243 // const mergeMesh = new THREE.Mesh(mergeGeometry, this.material);
244 // this.group.add(mergeMesh);
245
246 // console.timeEnd("render building");
247 // console.log('this.group.children.length2:' + this.group.children.length);
248
249 // this.scene.add(this.group); //网格模型添加到场景中
250
251 // }).catch(error => {})
252 // })
253 }
254
255 _loadData(callback) {
256 //循环并联本地查询
257 JBMS.forEach(jbm => {
258 getBuildings(jbm).then(res => {
259 callback(res.data.features)
260 console.log(res.data.features)
261 })
262 })
263
264 return
265
266 const url = config.mapservice[1].base_url + config.mapservice[1].house_url;
267 // const url = 'http://10.34.4.103:8010/ServiceAdapter/Map/%E6%88%BF%E5%B1%8B/15d4b9815cf7420da111307850d2049f/0';
268 // const url = 'http://10.100.0.132:6080/arcgis/rest/services/wuchang_gim/gim_region/MapServer/0';
269
270 //循环并联分发查询
271 JBMS.forEach(jbm => {
272 mapx.queryTask(url, {
273 where: `JBM='${jbm}'`,
274 outSpatialReference: '4326',
275 // geometry: this.view.extent,
276 // geometry: this.circle,
277 returnGeometry: true
278 }).then(featureSet => {
279 callback(featureSet)
280 }).catch(error => {})
281 })
282
283 return
284
285 //递归串联分发查询
286 let index= 0;
287 function query() {
288 mapx.queryTask(url, {
289 where: `JBM='${JBMS[index]}'`,
290 outSpatialReference: '4326',
291 // geometry: this.view.extent,
292 // geometry: this.circle,
293 returnGeometry: true
294 }).then(featureSet => {
295 callback(featureSet)
296 index++;
297 if(index < JBMS.length) { 298 // const sid = setTimeout(() => {
299 // clearTimeout(sid);
300 query();
301 // }, 2000)
302 }
303 }).catch(error => {})
304 }
305 query();
306 }
307
308 // _validateModel(feature) {
309 // for (let key in this.cacheObjects) {
310 // const m = this.cacheObjects[key];
311 // const flag = this.view.extent.intersects(m.geometry)
312 // // const flag = geometryEngine.intersects(this.circle, m.geometry)
313 // if (!flag) {
314 // this.group.remove(m);
315 // delete this.cacheObjects[key]
316 // }
317 // }
318 // }
319
320 _addModel(feature) {
321 //处理缓存
322 const uid = feature.attributes[UID];
323 if (this.cacheObjects.hasOwnProperty(uid)) {
324 // this.cacheObjects[uid].visible = true;
325 } else {
326 this.cacheObjects[uid] = feature;
327
328 let height = HEIGHT;
329 const points = feature.geometry.rings[0];
330 const htemp = feature.attributes['高度'];
331 if (htemp) {
332 height = htemp + INCREASE;
333 }
334
335 let vertices = [];
336 for (let i = 0; i < points.length; i++) {
337 let p = points[i];
338 let pointXYZ = this.lngLatToXY(this.view, [p[0], p[1], 0]);
339 vertices.push(pointXYZ);
340 }
341
342 const shape = new THREE.Shape();
343 for (let i = 0; i < vertices.length; i++) {
344 let v = vertices[i].vector3List;
345 if (i === 0) {
346 shape.moveTo(v.x, v.y);
347 }
348 shape.lineTo(v.x, v.y);
349 }
350
351 const extrudeSettings = {
352 steps: 2,
353 depth: height,
354 bevelEnabled: true,
355 bevelThickness: 1,
356 bevelSize: 1,
357 bevelOffset: 0,
358 bevelSegments: 1
359 };
360
361 const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
362 const mesh = new THREE.Mesh(geometry, this.material); //网格模型对象Mesh
363
364 // const edges = new THREE.EdgesGeometry(geometry);
365 // const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
366 // color: 0x000000,
367 // linewidth: 1
368 // }));
369
370 // this.group.add(mesh);
371 // this.group.add(line);
372 this.objects.push(mesh);
373
374 // mesh.scale.z = 0;
375
376 return mesh;
377 }
378 }
379
380 getRadius() {
381 var extent = this.view.extent;
382 var lt = webMercatorUtils.xyToLngLat(extent.xmin, extent.ymin);
383 var rb = webMercatorUtils.xyToLngLat(extent.xmax, extent.ymax);
384 var paths = [
385 [
386 lt,
387 rb
388 ]
389 ];
390 var line = new Polyline({
391 paths: paths,
392 spatialReference: {
393 wkid: '4326'
394 }
395 });
396 var d = geometryEngine.geodesicLength(line, 'meters');
397 // var d = geometryEngine.planarLength(line, 'meters');
398 return d * 0.5 * EF;
399 }
400
401 mergeBufferGeometry(objects) {
402 const sumPosArr = new Array();
403 const sumNormArr = new Array();
404 const sumUvArr = new Array();
405
406 const modelGeometry = new THREE.BufferGeometry();
407
408 let sumPosCursor = 0;
409 let sumNormCursor = 0;
410 let sumUvCursor = 0;
411
412 let startGroupCount = 0;
413 let lastGroupCount = 0;
414
415 for (let a = 0; a < objects.length; a++) {
416 const posAttArr = objects[a].geometry.getAttribute('position').array;
417
418 for (let b = 0; b < posAttArr.length; b++) {
419 sumPosArr[b + sumPosCursor] = posAttArr[b];
420 }
421
422 sumPosCursor += posAttArr.length;
423
424
425 const numAttArr = objects[a].geometry.getAttribute('normal').array;
426
427 for (let b = 0; b < numAttArr.length; b++) {
428 sumNormArr[b + sumNormCursor] = numAttArr[b];
429 }
430
431 sumNormCursor += numAttArr.length;
432
433
434 const uvAttArr = objects[a].geometry.getAttribute('uv').array;
435
436 for (let b = 0; b < uvAttArr.length; b++) {
437 sumUvArr[b + sumUvCursor] = uvAttArr[b];
438 }
439
440 sumUvCursor += uvAttArr.length;
441
442 const groupArr = objects[a].geometry.groups;
443
444 for (let b = 0; b < groupArr.length; b++) {
445 startGroupCount = lastGroupCount
446 modelGeometry.addGroup(startGroupCount, groupArr[b].count, groupArr[b].materialIndex)
447 lastGroupCount = startGroupCount + groupArr[b].count
448 }
449 }
450
451 modelGeometry.setAttribute('position', new THREE.Float32BufferAttribute(sumPosArr, 3));
452 sumNormArr.length && modelGeometry.setAttribute('normal', new THREE.Float32BufferAttribute(sumNormArr, 3));
453 sumUvArr.length && modelGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(sumUvArr, 2));
454
455 return modelGeometry
456 }
457 }

效果图：