数据可视化【原创】vue+arcgis+threejs 实现海量建筑物房屋渲染，性能优化

本文适合对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动画库做伸展效果。

import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Graphic from "@arcgis/core/Graphic";
import Mesh from "@arcgis/core/geometry/Mesh";
import Polygon from "@arcgis/core/geometry/Polygon";
import Polyline from "@arcgis/core/geometry/Polyline";
import Circle from "@arcgis/core/geometry/Circle";
import * as watchUtils from "@arcgis/core/core/watchUtils";
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
import mapx from '@/utils/mapUtils.js';

export default class BMLayer {
    constructor(ops) {
        this.$url = ops.url;
        this.$view = ops.view;
        // this.$zoom = ops.zoom;
        this.$ofomatter = ops.ofomatter;
        this.$idkey = ops.idkey;
        this.$click = ops.click;
        this.$zfomatter = ops.zfomatter;
        this.$wfomatter = ops.wfomatter;
        this.$sfomatter = ops.sfomatter;

        this.setup()
    }

    setup() {
        this.layer = null;
        this.highlightSelect = null;
        this.preModels = {};
        this.ef = 1.2;
        this.currentCircle = null;
        this.autoLoad = false;

        this.rendering = false;

        this.layer = new GraphicsLayer();
        this.$view.map.add(this.layer);

        this.extentChanged();
    }

    addModel(fs) {
        for (let key in this.preModels) {
            var m = this.preModels[key];
            if (!this.$view.extent.intersects(m.geometry)) {
                this.layer.remove(m);
                delete this.preModels[key];
            }
        }
        var per = 100;
        if (fs.length < per) {
            per = fs.length;
        }
        var sid = setInterval(() => {
            var i = 0;
            for (; i < per; i++) {
                var f = fs.pop();
                if (f) {
                    var att = f.attributes;
                    var uid = att[this.$idkey];

                    if (this.preModels.hasOwnProperty(uid)) {

                    } else {
                        var z = this.$zfomatter(att);
                        var model = this.createModel(f, z, this.getBaseSymbol());
                        this.layer.add(model);

                        this.preModels[uid] = model;
                    }
                } else {
                    this.rendering = false;
                    clearInterval(sid);
                    break;
                }
            }
        }, 25);
    }

    click(results, mapPoint) {
        if (results && results.length > 0) {
            var grah = results[0].graphic;
            if (grah.layer === this.layer) {
                if (this.highlightSelect) {
                    this.highlightSelect.remove();
                }

                this.$view.whenLayerView(grah.layer).then(
                    layerView => {
                        this.highlightSelect = layerView.highlight(grah);
                    });
                this.$click(grah, mapPoint, this.$view);
            } else {
                if (this.highlightSelect) {
                    this.highlightSelect.remove();
                }
                // this.$view.popup.close()
            }
        } else {
            if (this.highlightSelect) {
                this.highlightSelect.remove();
            }
            // this.$view.popup.close()
        }
    }

    clearHighlight() {
        if (this.highlightSelect) {
            this.highlightSelect.remove();
        }
    }

    setAutoLoad(v) {
        this.autoLoad = v
    }

    extentChanged() {
        return watchUtils.whenTrue(this.$view, "stationary", () => {
            // console.log(this.$view.zoom)
            const flag = this.$ofomatter(this.$view);
            if (flag) {
                if (!this.rendering) {
                    this.rendering = true;
                    if (this.autoLoad) {
                        this.loadData();
                    }
                }
                // this.layer.visible = true;
                if (this.layer.opacity === 0) {
                    this.fadeVisibilityOn(this.$view, this.layer, true)
                }
            } else {
                // this.clearLayer();
                this.rendering = false;
                // this.layer.visible = false;
                if (this.layer.opacity === 1) {
                    this.fadeVisibilityOn(this.$view, this.layer, false)
                }
            }
        });
    }

    loadData() {
        // var r = this.getRadius(1.5);
        // var p = this.$view.center.clone();
        // p.z = 1;
        // this.currentCircle = new Circle(p, {
        //     radius: r
        // });
        let where = ''
        if (this.$wfomatter) {
            where = this.$wfomatter();
            // console.log(where)
        }
        mapx.queryTask(this.$url, {
            where: where,
            outSpatialReference: '4326',
            geometry: this.$view.extent,
            returnGeometry: true
        }).then(featureSet => {
            this.addModel(featureSet);
        }).catch(error => {})
    }

    clearLayer() {
        this.layer.removeAll();
        this.preModels = {};
    }

    createModel(f, h, sym) {
        var geo = f.geometry;
        var ris = geo.rings[0];
        ris.pop();
        var len = ris.length;
        var pos = new Array((len - 1) * 2 * 3);
        var ii = 0;
        for (; ii < len; ii++) {
            var ary = ris[ii];
            pos[ii * 3] = ary[0];
            pos[ii * 3 + 1] = ary[1];
            pos[ii * 3 + 2] = 0;
            pos[ii * 3 + len * 3] = ary[0];
            pos[ii * 3 + len * 3 + 1] = ary[1];
            pos[ii * 3 + len * 3 + 2] = h;
        }

        var polygon = new Polygon({
            type: "polygon",
            rings: [ris]
        });

        var ll = pos.length / 2 / 3;
        var faces = this.getFaces(polygon, ll);
        var mesh = new Mesh({
            vertexAttributes: {
                position: pos
            },
            components: [{
                faces: faces
            }],
        });

        let symbol
        if (this.$sfomatter) {
            symbol = this.getBaseSymbol(this.$sfomatter(f))
        } else {
            symbol = sym
        }
        var graphic = new Graphic({
            attributes: f.attributes,
            geometry: mesh,
            symbol: symbol
        });

        return graphic;
    }

    getFaces(polygon, len) {
        var topfaces = this.getTopFaces(polygon);
        var sidefaces = this.getSideFaces(len);
        //                var i = 0;
        //                for(; i < topfaces.length; i++) {
        //                    var t = topfaces[i];
        //                    sidefaces.push(t);
        //                }
        var i = 0;
        for (; i < topfaces.length; i++) {
            var t = topfaces[i];
            sidefaces.push(t + len);
        }
        return sidefaces;
    }

    getTopFaces(polygon) {
        var temp = Mesh.createFromPolygon(polygon, {});
        var faces = temp.components[0].faces;
        return faces;
    }

    getSideFaces(l) {
        var fas = [];
        var a = [];
        var i = 0;
        for (; i < l; i++) {
            var n0 = 0;
            var n1 = 0;
            var n2 = 0;
            var n3 = 0;
            if (i + 1 == l) {
                n0 = i;
                n1 = 0;
                n2 = i + l;
                n3 = i + 1;
            } else {
                n0 = i;
                n1 = i + 1;
                n2 = i + l;
                n3 = i + l + 1;
            }
            fas.push(n0, n1, n2, n1, n2, n3);
        } //console.log(fas);
        return fas;
    }

    getRadius() {
        var extent = this.$view.extent;
        var paths = [
            [
                [extent.xmin, extent.ymin],
                [extent.xmax, extent.ymax]
            ]
        ];
        var line = new Polyline({
            paths: paths,
            spatialReference: this.$view.spatialReference
        });
        var d = geometryEngine.geodesicLength(line, 9001);
        return d * 0.5 * this.ef;
    }

    getBaseSymbol(color = [224, 224, 224, 0.8]) {
        return {
            type: "mesh-3d",
            symbolLayers: [{
                type: "fill",
                material: {
                    color: color,
                    colorMixMode: "tint"
                }
            }]
        }
    }

    fadeVisibilityOn(view, layer, flag) {
        let animating = true;
        let opacity = flag ? 0 : 1;
        // fade layer's opacity from 0 to
        // whichever value the user has configured
        const finalOpacity = flag ? 1 : 0;
        layer.opacity = opacity;

        view.whenLayerView(layer).then((layerView) => {
            function incrementOpacityByFrame() {
                if (opacity >= finalOpacity && animating) {
                    layer.opacity = finalOpacity;
                    animating = false;
                    return;
                }

                layer.opacity = opacity;
                opacity += 0.07;

                requestAnimationFrame(incrementOpacityByFrame);
            }

            function decrementOpacityByFrame() {
                if (opacity <= finalOpacity && animating) {
                    layer.opacity = finalOpacity;
                    animating = false;
                    return;
                }

                layer.opacity = opacity;
                opacity -= 0.07;

                requestAnimationFrame(decrementOpacityByFrame);
            }

            // Wait for tiles to finish loading before beginning the fade
            watchUtils.whenFalseOnce(
                layerView,
                "updating",
                function(updating) {
                    if (flag) {
                        requestAnimationFrame(incrementOpacityByFrame);
                    } else {
                        requestAnimationFrame(decrementOpacityByFrame);
                    }
                }
            );
        });
    }

}

 

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

import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Graphic from "@arcgis/core/Graphic";
import Mesh from "@arcgis/core/geometry/Mesh";
import Polygon from "@arcgis/core/geometry/Polygon";
import Polyline from "@arcgis/core/geometry/Polyline";
import Circle from "@arcgis/core/geometry/Circle";
import * as watchUtils from "@arcgis/core/core/watchUtils";
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils";
import mapx from '@/utils/mapUtils.js';

export default class BMLayer {
    constructor(ops) {
        this.$url = ops.url;
        this.$view = ops.view;
        // this.$zoom = ops.zoom;
        this.$ofomatter = ops.ofomatter;
        this.$idkey = ops.idkey;
        this.$click = ops.click;
        this.$zfomatter = ops.zfomatter;
        this.$wfomatter = ops.wfomatter;
        this.$sfomatter = ops.sfomatter;

        this.setup()
    }

    setup() {
        this.layer = null;
        this.highlightSelect = null;
        this.preModels = {};
        this.ef = 1.2;
        this.autoLoad = false;
        this.circle = null;
        this.circleGraphic = null;
        this.rendering = false;
        this.maxZoom = 20;
        this.baseRadius = 700;
        this.factor = 0.66;

        this.layer = new GraphicsLayer();
        this.$view.map.add(this.layer);

        this.baselayer = new FeatureLayer({
            source: [],
            objectIdField: "ObjectID",
            geometryType: 'polygon',
            render: {
                type: "simple",
                symbol: this.getBaseSymbol()
            }
        });
        this.$view.map.add(this.baselayer);

        this.addEvents();
    }

    addModel(fs) {
        for (let key in this.preModels) {
            const m = this.preModels[key];
            // if (!this.$view.extent.intersects(m.geometry)) {
            const flag = geometryEngine.intersects(this.circle, m.geometry)
            if (!flag) {
                this.layer.remove(m);
                delete this.preModels[key]
            }
        }
        const per = 300;
        // console.log(fs.length)
        if (fs.length > per) {
            fs.length = per
        }
        let sid = setInterval(() => {
            if (fs.length === 0) {
                this.rendering = false;
                clearInterval(sid);
            }
            let i = 0;
            for (; i < fs.length; i++) {
                const f = fs.pop()
                if (f) {
                    const att = f.attributes;
                    const uid = att[this.$idkey];

                    if (this.preModels.hasOwnProperty(uid)) {

                    } else {
                        const z = this.$zfomatter(att)
                        let symbol;
                        if (this.$sfomatter) {
                            symbol = this.getBaseSymbol(z, this.$sfomatter(f));
                        } else {
                            symbol = this.getBaseSymbol(z);
                        }
                        const model = f;
                        model.symbol = symbol;
                        // this.layer.add(model);
                        this.baselayer.applyEdits({addFeatures: [model]})

                        this.preModels[uid] = model;
                    }
                }
            }
        }, 25);
    }

    click(results, mapPoint) {
        if (results && results.length > 0) {
            var grah = results[0].graphic;
            if (grah.layer === this.layer) {
                if (this.highlightSelect) {
                    this.highlightSelect.remove();
                }

                this.$view.whenLayerView(grah.layer).then(
                    layerView => {
                        this.highlightSelect = layerView.highlight(grah);
                    });
                this.$click(grah, mapPoint, this.$view);
            } else {
                if (this.highlightSelect) {
                    this.highlightSelect.remove();
                }
                // this.$view.popup.close()
            }
        } else {
            if (this.highlightSelect) {
                this.highlightSelect.remove();
            }
            // this.$view.popup.close()
        }
    }

    clearHighlight() {
        if (this.highlightSelect) {
            this.highlightSelect.remove();
        }
    }

    setAutoLoad(v) {
        this.autoLoad = v
    }

    addEvents() {
        watchUtils.watch(this.$view, 'zoom', () => {
            if (this.$view.zoom > this.maxZoom) {
                this.$view.zoom = this.maxZoom;
            }
        });

        watchUtils.whenTrue(this.$view, "stationary", () => {
            // console.log(this.$view.zoom)
            const flag = this.$ofomatter(this.$view);
            if (flag) {
                if (!this.rendering) {
                    this.rendering = true;
                    if (this.autoLoad) {
                        this.loadData();
                    }
                }
                // this.layer.visible = true;
                if (this.layer.opacity === 0) {
                    this.fadeVisibilityOn(this.$view, this.layer, true)
                }
            } else {
                // this.clearLayer();
                this.rendering = false;
                // this.layer.visible = false;
                if (this.layer.opacity === 1) {
                    this.fadeVisibilityOn(this.$view, this.layer, false)
                }
            }
        });
    }

    loadData() {
        var r = this.getRadius();
        var center = this.$view.center;
        const p = webMercatorUtils.xyToLngLat(center.x, center.y);
        p.z = 10;
        this.circle = new Circle({
            center: p,
            geodesic: true,
            numberOfPoints: 10,
            radius: r,
            radiusUnit: "meters"
        })
        // if(this.circleGraphic) {
        //     this.layer.remove(this.circleGraphic);
        // }
        // this.circleGraphic = new Graphic({
        //     geometry: this.circle,
        //     symbol: {
        //         type: "simple-fill",
        //         color: [51, 51, 204, 0.7],
        //         style: "solid",
        //         outline: {
        //             color: "white",
        //             width: 1
        //         }
        //     }
        // })
        // this.layer.add(this.circleGraphic);

        let where = ''
        if (this.$wfomatter) {
            where = this.$wfomatter();
        }
        mapx.queryTask(this.$url, {
            where: where,
            outSpatialReference: '4326',
            // geometry: this.$view.extent,
            geometry: this.circle,
            returnGeometry: true
        }).then(featureSet => {
            this.addModel(featureSet);
        }).catch(error => {})
    }

    clearLayer() {
        this.layer.removeAll();
        this.preModels = {};
    }

    getRadius() {
        const zoomMap = {
            '15': this.baseRadius / this.factor / this.factor,
            '16': this.baseRadius / this.factor,
            '17': this.baseRadius,
            '18': this.baseRadius * this.factor,
            '19': this.baseRadius * this.factor * this.factor,
            '20': this.baseRadius * this.factor * this.factor * this.factor,
            '21': this.baseRadius * this.factor * this.factor * this.factor * this.factor
        }
        const zoom = Math.round(this.$view.zoom)
        return zoomMap[zoom + '']
        // var extent = this.$view.extent;
        // var paths = [
        //     [
        //         [extent.xmin, extent.ymin],
        //         [extent.xmax, extent.ymax]
        //     ]
        // ];
        // var line = new Polyline({
        //     paths: paths,
        //     spatialReference: this.$view.spatialReference
        // });
        // var d = geometryEngine.geodesicLength(line, 'meters');
        // // var d = geometryEngine.planarLength(line, 'meters');
        // return d * 0.5 * this.ef;
    }

    getBaseSymbol(z, color = [224, 224, 224, 0.8]) {
        return {
            type: "polygon-3d",
            symbolLayers: [{
                type: "extrude",
                size: z,
                material: {
                    color: color
                },
                edges: {
                    type: "solid",
                    size: 1.5,
                    color: [50, 50, 50, 0.5]
                    // type: "sketch",
                    // color: [50, 50, 50, 0.5],
                    // size: 1.5,
                    // extensionLength: 2
                }
            }]
        }
    }

    fadeVisibilityOn(view, layer, flag) {
        let animating = true;
        let opacity = flag ? 0 : 1;
        // fade layer's opacity from 0 to
        // whichever value the user has configured
        const finalOpacity = flag ? 1 : 0;
        layer.opacity = opacity;

        view.whenLayerView(layer).then((layerView) => {
            function incrementOpacityByFrame() {
                if (opacity >= finalOpacity && animating) {
                    layer.opacity = finalOpacity;
                    animating = false;
                    return;
                }

                layer.opacity = opacity;
                opacity += 0.07;

                requestAnimationFrame(incrementOpacityByFrame);
            }

            function decrementOpacityByFrame() {
                if (opacity <= finalOpacity && animating) {
                    layer.opacity = finalOpacity;
                    animating = false;
                    return;
                }

                layer.opacity = opacity;
                opacity -= 0.07;

                requestAnimationFrame(decrementOpacityByFrame);
            }

            // Wait for tiles to finish loading before beginning the fade
            watchUtils.whenFalseOnce(
                layerView,
                "updating",
                function(updating) {
                    if (flag) {
                        requestAnimationFrame(incrementOpacityByFrame);
                    } else {
                        requestAnimationFrame(decrementOpacityByFrame);
                    }
                }
            );
        });
    }

}

 

3：首先把漫游策略改了，方案1、2是漫游中加载并缓存，现在直接在初始化的时候给出进度条，加载所有数据（6万+），肯定是不能一口气去查询加载的，我还是启动一个延迟加载的策略，在地图上分区域分布队列加载，尽量在每一帧里面分摊开销。然后完全舍弃arcgis的要素渲染，改用threejs来绘制，arcgis给出了一个接口externalRenderers，这个很重要，可以集成第三方3D引擎，还需要注意的是坐标系球面和平面的坐标转换，也就是说arcgis SceneView viewingMode=”local“和”globle“是不一样的，如果是局部展示，不需要展示三维球的话，建议使用local模式，这样会处理简单一些。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：

import * as THREE from 'three'
import Stats from 'three/examples/jsm/libs/stats.module.js'
import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils"
import * as externalRenderers from "@arcgis/core/views/3d/externalRenderers"

export default class ExternalRendererLayer {
    constructor({
        view,
        options
    }) {
        this.view = view
        this.options = options

        this.objects = []
        this.scene = null
        this.camera = null
        this.renderer = null
        
        this.setup();
    }
    
    setup() {
        if (process.env.NODE_ENV !== "production") {
            const sid = setTimeout(() => {
                clearTimeout(sid)
                //构建帧率查看器
                let stats = new Stats()
                stats.setMode(0)
                stats.domElement.style.position = 'absolute'
                stats.domElement.style.left = '0px'
                stats.domElement.style.top = '0px'
                document.body.appendChild(stats.domElement)
                function render() {
                  stats.update()
                  requestAnimationFrame(render)
                }
                render()
            }, 5000)
        }
    }

    apply() {
        let myExternalRenderer = {
            setup: context => {
                this.createSetup(context)
            },
            render: context => {
                this.createRender(context)
            }
        }
        
        externalRenderers.add(this.view, myExternalRenderer);
    }

    createSetup(context) {
        this.scene = new THREE.Scene(); // 场景
        this.camera = new THREE.PerspectiveCamera(); // 相机

        this.setLight();

        // 添加坐标轴辅助工具
        const axesHelper = new THREE.AxesHelper(10000000);
        this.scene.Helpers = axesHelper;
        this.scene.add(axesHelper);

        this.renderer = new THREE.WebGLRenderer({
            context: context.gl, // 可用于将渲染器附加到已有的渲染环境(RenderingContext)中
            premultipliedAlpha: false, // renderer是否假设颜色有 premultiplied alpha. 默认为true
            // antialias: true
            // logarithmicDepthBuffer: false
        });
        this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
        this.renderer.setViewport(0, 0, this.view.width, this.view.height); // 视口大小设置
        
        // 防止Three.js清除ArcGIS JS API提供的缓冲区。
        this.renderer.autoClearDepth = false; // 定义renderer是否清除深度缓存
        this.renderer.autoClearStencil = false; // 定义renderer是否清除模板缓存
        this.renderer.autoClearColor = false; // 定义renderer是否清除颜色缓存
        // this.renderer.autoClear = false;
        
        // ArcGIS JS API渲染自定义离屏缓冲区，而不是默认的帧缓冲区。
        // 我们必须将这段代码注入到three.js运行时中，以便绑定这些缓冲区而不是默认的缓冲区。
        const originalSetRenderTarget = this.renderer.setRenderTarget.bind(
            this.renderer
        );
        this.renderer.setRenderTarget = target => {
            originalSetRenderTarget(target);
            if (target == null) {
                // 绑定外部渲染器应该渲染到的颜色和深度缓冲区
                context.bindRenderTarget();
            }
        };
        
        this.addModels(context);

        context.resetWebGLState();
    }

    createRender(context) {
        const cam = context.camera;
        this.camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);
        this.camera.up.set(cam.up[0], cam.up[1], cam.up[2]);
        this.camera.lookAt(
            new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2])
        );
        this.camera.near = 1;
        this.camera.far = 100;

        // 投影矩阵可以直接复制
        this.camera.projectionMatrix.fromArray(cam.projectionMatrix);
        
        this.updateModels(context);

        this.renderer.state.reset();

        context.bindRenderTarget();

        this.renderer.render(this.scene, this.camera);

        // 请求重绘视图。
        externalRenderers.requestRender(this.view);

        // cleanup
        context.resetWebGLState();
    }
    
    //经纬度坐标转成三维空间坐标
    lngLatToXY(view, points) {
    
        let vector3List; // 顶点数组
    
        let pointXYs;
    
    
        // 计算顶点
        let transform = new THREE.Matrix4(); // 变换矩阵
        let transformation = new Array(16);
    
        // 将经纬度坐标转换为xy值\
        let pointXY = webMercatorUtils.lngLatToXY(points[0], points[1]);
    
        // 先转换高度为0的点
        transform.fromArray(
            externalRenderers.renderCoordinateTransformAt(
                view,
                [pointXY[0], pointXY[1], points[
                    2]], // 坐标在地面上的点[x值, y值, 高度值]
                view.spatialReference,
                transformation
            )
        );
    
        pointXYs = pointXY;
    
        vector3List =
            new THREE.Vector3(
                transform.elements[12],
                transform.elements[13],
                transform.elements[14]
            )
    
        return {
            vector3List: vector3List,
            pointXYs: pointXYs
        };
    }
    
    setLight() {
        console.log('setLight')
        let ambient = new THREE.AmbientLight(0xffffff, 0.7);
        this.scene.add(ambient);
        let directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
        directionalLight.position.set(100, 300, 200);
        this.scene.add(directionalLight);
    }
    
    addModels(context) {
        console.log('addModels')
    }
    
    updateModels(context) {
        // console.log('updateModels')
    }
    
}

BuildingLayerExt：

import mapx from '@/utils/mapUtils.js';

import * as THREE from 'three'
import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
import ExternalRendererLayer from './ExternalRendererLayer.js'

import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Graphic from "@arcgis/core/Graphic";
import SpatialReference from '@arcgis/core/geometry/SpatialReference'
import * as externalRenderers from "@arcgis/core/views/3d/externalRenderers"
import Polygon from "@arcgis/core/geometry/Polygon";
import Polyline from "@arcgis/core/geometry/Polyline";
import Circle from "@arcgis/core/geometry/Circle";
import * as watchUtils from "@arcgis/core/core/watchUtils";
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine";
import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils";

import { getBuildings } from '@/api';

const EF = 1;
const UID = 'FID'; //OBJECTID
const R = 0.8;
const LEVEL = 16;
const HEIGHT = 40;
const INCREASE = 30;

const JBMS = [
    420106001,
    420106002,
    420106003,
    420106005,
    420106006,
    420106007,
    420106008,
    420106009,
    420106010,
    420106011,
    420106012,
    420106013,
    420106014,
    420106015
];

export default class BuildingLayerExt extends ExternalRendererLayer {
    constructor({
        view,
        options
    }) {
        super({
            view,
            options
        })
    }

    setup() {
        // this.circleGraphic = null;
        // this.layer = new GraphicsLayer();

        this.cacheObjects = {};

        this.group = new THREE.Group();

        // this.material = new THREE.MeshLambertMaterial({
        //     transparent: true,
        //     opacity: 0.9,
        //     color: 0xFFFFFF
        // }); //材质对象Material

        // 顶点着色器
        const vertexShader = `
                     // 向片元着色器传递顶点位置数据
                     varying vec3 v_position;
                     void main () {
                         v_position = position;
                         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                     }
                 `;
        // 片元着色器
        const fragmentShader = `
                     // 接收顶点着色器传递的顶点位置数据
                     varying vec3 v_position;
                
                     // 接收js传入的值
                     uniform float u_time;
                     uniform vec3 u_size;
                     uniform vec3 u_flow;
                     uniform vec3 u_color;
                     uniform vec3 u_flowColor;
                     uniform vec3 u_topColor;
                
                     void main () {
                         // 给建筑设置从上到下的渐变颜色
                         float indexPct = v_position.z / u_size.z;
                         vec3 color = mix(u_color, u_topColor,indexPct);
                         // // 根据时间和速度计算出当前扫描点的位置， 以上顶点为准
                         // float flowTop = mod(u_flow.z * u_time, u_size.z);
                         // // 判断当前点是否在扫描范围内
                         // if (flowTop > v_position.z && flowTop - u_flow.z < v_position.z) {
                         //     // 扫描范围内的位置设置从上到下的渐变颜色
                         //     float flowPct = (u_flow.z - ( flowTop -  v_position.z)) / u_flow.z;
                         //     color = mix(color ,u_flowColor, flowPct);
                         // }
                         gl_FragColor = vec4(color, 0.8);
                     }
                 `;

        const ratio = {
            value: 0
        }

        // 楼宇扫描相关配置数据
        const flowData = {
            boxSize: { // 建筑群包围盒的尺寸
                x: 0,
                y: 0,
                z: HEIGHT
            },
            flowConf: {
                x: 1, // 开关 1 表示开始
                y: 20, // 范围
                z: 100 // 速度
            },
            color: "#000000", // 建筑颜色
            flowColor: "#ffffff", // 扫描颜色
            topColor: '#409eff' // 顶部颜色
        }

        this.material = new THREE.ShaderMaterial({
            transparent: true,
            uniforms: {
                u_time: ratio,
                u_size: {
                    value: flowData.boxSize
                },
                u_flow: {
                    value: flowData.flowConf
                },
                u_color: {
                    value: new THREE.Color(flowData.color)
                },
                u_flowColor: {
                    value: new THREE.Color(flowData.flowColor)
                },
                u_topColor: {
                    value: new THREE.Color(flowData.topColor)
                }
            },
            vertexShader,
            fragmentShader
        });

        watchUtils.whenTrue(this.view, "stationary", () => {
            if (this.options.zoomChange) {
                this.options.zoomChange(this.view.zoom);
            }
            // if (this.view.zoom >= LEVEL) {
            //     this.group.visible = true;
            //     this.loadData();
            // } else {
            //     this.group.visible = false;
            // }
        });
    }

    addModels(context) {
        super.addModels(context);

        this.loadData();
    }

    updateModels(context) {
        super.updateModels(context);

        // this.objects.forEach(obj => {
        //     obj.material.uniforms.time.value += 0.01;
        // })

        // this.group.children.forEach(mesh => {
        //     if (mesh.scale.z >= 1) {
        //         mesh.scale.z = 1;
        //     } else {
        //         mesh.scale.z += 0.02;
        //     }
        // })
    }

    loadData() {
        let count = 0;
        // let index = 0;
        this._loadData(featureSet => {
            // console.log(index);
            // index++;
            // console.log('fz:' + featureSet.length)
            // console.log(count += featureSet.length)
            
            let _objects = []
            featureSet.forEach(feature => {
                // this._validateModel(feature);
                const obj = this._addModel(feature);
                _objects.push(obj.geometry);
            })
            
            console.log(_objects.length)
            
            console.time("render building");
            const mergeGeometry = BufferGeometryUtils.mergeBufferGeometries(_objects);
            // const mergeGeometry = this.mergeBufferGeometry(_objects);
            console.timeEnd("render building");
            const mergeMesh = new THREE.Mesh(mergeGeometry, this.material);
            // mergeMesh.scale.z = 0;
            
            this.group.add(mergeMesh);
            console.log('this.group.children.length2:' + this.group.children.length);
            
            this.scene.add(this.group); //网格模型添加到场景中
        })
        // http://10.102.109.88:9530/?type=qzx
        
        // const url = config.mapservice[1].base_url + config.mapservice[1].house_url;
        // // const url = 'http://10.34.4.103:8010/ServiceAdapter/Map/%E6%88%BF%E5%B1%8B/15d4b9815cf7420da111307850d2049f/0';
        // // const url = 'http://10.100.0.132:6080/arcgis/rest/services/wuchang_gim/gim_region/MapServer/0';
        // JBMS.forEach(jbm => {
        //     mapx.queryTask(url, {
        //         where: `JBM='${jbm}'`,
        //         outSpatialReference: '4326',
        //         // geometry: this.view.extent,
        //         // geometry: this.circle,
        //         returnGeometry: true
        //     }).then(featureSet => {
        //         console.log('fz:' + featureSet.length)

        //         console.time("render building");
                
        //         let _objects = []
        //         featureSet.forEach(feature => {
        //             // this._validateModel(feature);
        //             const obj = this._addModel(feature);
        //             _objects.push(obj.geometry);
        //         })
        //         const mergeGeometry = BufferGeometryUtils.mergeBufferGeometries(_objects);
        //         // const mergeGeometry = this.mergeBufferGeometry(_objects);
        //         const mergeMesh = new THREE.Mesh(mergeGeometry, this.material);
        //         this.group.add(mergeMesh);

        //         console.timeEnd("render building");
        //         console.log('this.group.children.length2:' + this.group.children.length);

        //         this.scene.add(this.group); //网格模型添加到场景中

        //     }).catch(error => {})
        // })
    }
    
    _loadData(callback) {
        //循环并联本地查询
        JBMS.forEach(jbm => {
            getBuildings(jbm).then(res => {
                callback(res.data.features)
                console.log(res.data.features)
            })
        })
        
        return
        
        const url = config.mapservice[1].base_url + config.mapservice[1].house_url;
        // const url = 'http://10.34.4.103:8010/ServiceAdapter/Map/%E6%88%BF%E5%B1%8B/15d4b9815cf7420da111307850d2049f/0';
        // const url = 'http://10.100.0.132:6080/arcgis/rest/services/wuchang_gim/gim_region/MapServer/0';
        
        //循环并联分发查询
        JBMS.forEach(jbm => {
            mapx.queryTask(url, {
                where: `JBM='${jbm}'`,
                outSpatialReference: '4326',
                // geometry: this.view.extent,
                // geometry: this.circle,
                returnGeometry: true
            }).then(featureSet => {
                callback(featureSet)
            }).catch(error => {})
        })
        
        return
        
        //递归串联分发查询
        let index= 0;
        function query() {
            mapx.queryTask(url, {
                where: `JBM='${JBMS[index]}'`,
                outSpatialReference: '4326',
                // geometry: this.view.extent,
                // geometry: this.circle,
                returnGeometry: true
            }).then(featureSet => {
                callback(featureSet)
                index++;
                if(index < JBMS.length) {
                    // const sid = setTimeout(() => {
                        // clearTimeout(sid);
                        query();
                    // }, 2000)
                }
            }).catch(error => {})
        }
        query();
    }

    // _validateModel(feature) {
    //     for (let key in this.cacheObjects) {
    //         const m = this.cacheObjects[key];
    //         const flag = this.view.extent.intersects(m.geometry)
    //         // const flag = geometryEngine.intersects(this.circle, m.geometry)
    //         if (!flag) {
    //             this.group.remove(m);
    //             delete this.cacheObjects[key]
    //         }
    //     }
    // }

    _addModel(feature) {
        //处理缓存
        const uid = feature.attributes[UID];
        if (this.cacheObjects.hasOwnProperty(uid)) {
            // this.cacheObjects[uid].visible = true;
        } else {
            this.cacheObjects[uid] = feature;

            let height = HEIGHT;
            const points = feature.geometry.rings[0];
            const htemp = feature.attributes['高度'];
            if (htemp) {
                height = htemp + INCREASE;
            }

            let vertices = [];
            for (let i = 0; i < points.length; i++) {
                let p = points[i];
                let pointXYZ = this.lngLatToXY(this.view, [p[0], p[1], 0]);
                vertices.push(pointXYZ);
            }

            const shape = new THREE.Shape();
            for (let i = 0; i < vertices.length; i++) {
                let v = vertices[i].vector3List;
                if (i === 0) {
                    shape.moveTo(v.x, v.y);
                }
                shape.lineTo(v.x, v.y);
            }

            const extrudeSettings = {
                steps: 2,
                depth: height,
                bevelEnabled: true,
                bevelThickness: 1,
                bevelSize: 1,
                bevelOffset: 0,
                bevelSegments: 1
            };

            const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
            const mesh = new THREE.Mesh(geometry, this.material); //网格模型对象Mesh 

            // const edges = new THREE.EdgesGeometry(geometry);
            // const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
            //     color: 0x000000,
            //     linewidth: 1
            // }));

            // this.group.add(mesh);
            // this.group.add(line);
            this.objects.push(mesh);

            // mesh.scale.z = 0;
            
            return mesh;
        }
    }

    getRadius() {
        var extent = this.view.extent;
        var lt = webMercatorUtils.xyToLngLat(extent.xmin, extent.ymin);
        var rb = webMercatorUtils.xyToLngLat(extent.xmax, extent.ymax);
        var paths = [
            [
                lt,
                rb
            ]
        ];
        var line = new Polyline({
            paths: paths,
            spatialReference: {
                wkid: '4326'
            }
        });
        var d = geometryEngine.geodesicLength(line, 'meters');
        // var d = geometryEngine.planarLength(line, 'meters');
        return d * 0.5 * EF;
    }

    mergeBufferGeometry(objects) {
        const sumPosArr = new Array();
        const sumNormArr = new Array();
        const sumUvArr = new Array();

        const modelGeometry = new THREE.BufferGeometry();

        let sumPosCursor = 0;
        let sumNormCursor = 0;
        let sumUvCursor = 0;

        let startGroupCount = 0;
        let lastGroupCount = 0;

        for (let a = 0; a < objects.length; a++) {
            const posAttArr = objects[a].geometry.getAttribute('position').array;

            for (let b = 0; b < posAttArr.length; b++) {
                sumPosArr[b + sumPosCursor] = posAttArr[b];
            }

            sumPosCursor += posAttArr.length;


            const numAttArr = objects[a].geometry.getAttribute('normal').array;

            for (let b = 0; b < numAttArr.length; b++) {
                sumNormArr[b + sumNormCursor] = numAttArr[b];
            }

            sumNormCursor += numAttArr.length;


            const uvAttArr = objects[a].geometry.getAttribute('uv').array;

            for (let b = 0; b < uvAttArr.length; b++) {
                sumUvArr[b + sumUvCursor] = uvAttArr[b];
            }

            sumUvCursor += uvAttArr.length;

            const groupArr = objects[a].geometry.groups;

            for (let b = 0; b < groupArr.length; b++) {
                startGroupCount = lastGroupCount
                modelGeometry.addGroup(startGroupCount, groupArr[b].count, groupArr[b].materialIndex)
                lastGroupCount = startGroupCount + groupArr[b].count
            }
        }

        modelGeometry.setAttribute('position', new THREE.Float32BufferAttribute(sumPosArr, 3));
        sumNormArr.length && modelGeometry.setAttribute('normal', new THREE.Float32BufferAttribute(sumNormArr, 3));
        sumUvArr.length && modelGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(sumUvArr, 2));

        return modelGeometry
    }
}

 

调用案例：

import BuildingLayer from './core/BuildingLayerExt.js';

this.buildingLayer = new BuildingLayer({
                        view: v,
                        options: {
                            zoomChange: val => {
                                this.setMapZoom(val);
                            }
                        }
                    });
                    this.buildingLayer.apply();