数据可视化【原创】vue+arcgis+threejs 实现立体光圈闪烁效果

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

效果图：

 素材：

 

主要思路：

先用arcgis externalRenderers封装了一个ExternalRendererLayer，在里面把arcgis和threejs的context关联，然后再写个子类继承它，这部分类容在上一个帖子里面有讲过。

子类FlashLayer继承它，并在里面封装了一个excute方法用来执行闪烁，参数包括point和height。先构建一个管道CatmullRomCurve3，在构建环RingGeometry，然后在updateModels里面去更新管道的scale.z，更新环的半径和透明度。

excute方法：

excute(point, height) {
        // let pointList = [
        //     [114.31456780904838, 30.55355011036358, 0],
        //     [114.31456780904838, 30.55355011036358, 2000]
        // ];
        let pointList = [
            [
                point.longitude,
                point.latitude,
                0
            ],
            [
                point.longitude,
                point.latitude,
                height
            ]
        ]

        let linePoints = [];
        //确定几何体位置
        pointList.forEach((item) => {
            var renderLinePoints = this.lngLatToXY(this.view, [item[0], item[1], item[2]]);
            linePoints.push(new THREE.Vector3(renderLinePoints.vector3List.x, renderLinePoints
                .vector3List.y, renderLinePoints.vector3List.z));
        })

        const lineImg = require('../../../../public/static/img/line.png')
        let lineTexture = new THREE.TextureLoader().load(lineImg)
        lineTexture.wrapS = lineTexture.wrapT = THREE.RepeatWrapping; //每个都重复
        lineTexture.repeat.set(1, 1)
        lineTexture.needsUpdate = true

        let lineMaterial = new THREE.MeshBasicMaterial({
            map: lineTexture,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: 1
        })

        // CatmullRomCurve3创建一条平滑的三维样条曲线
        let curve = new THREE.CatmullRomCurve3(linePoints) // 曲线路径

        // 创建管道
        let tubeGeometry = new THREE.TubeGeometry(curve, 1, 16)

        let mesh = new THREE.Mesh(tubeGeometry, lineMaterial);
        mesh.name = 'FlashLayer_Line';
        mesh.scale.z = 0;
        mesh.layers.set(0);
        this.group.add(mesh);

        //光圈
        const ringUserData = {
            width: 300,
            innerRadius: 0,
            opacity: 1,
            opacityFlag: false,
            per: 10,
            innerMax: 800,
            times: 0,
            line: mesh
        };
        const ringGeometry = new THREE.RingGeometry(ringUserData.innerRadius, ringUserData.innerRadius +
            ringUserData.width, 32);
        const ringMaterial = new THREE.MeshPhongMaterial({
            color: COLOR_RING,
            emissive: COLOR_RING,
            side: THREE.DoubleSide,
            flatShading: true,
            wireframe: false,
            transparent: true,
            opacity: ringUserData.opacity
        });
        const ringMesh = new THREE.Mesh(ringGeometry, ringMaterial);
        const ringPoint = linePoints[1];
        console.log(ringPoint);
        ringMesh.position.set(ringPoint.x, ringPoint.y, ringPoint.z / 2 + (Math.random() * ringPoint.z / 4 | 0) );
        ringMesh.name = 'FlashLayer_Ring';
        ringMesh.userData = ringUserData;
        ringMesh.layers.set(0);

        this.group.add(ringMesh);
    }

 

updateModels方法（记得一定要销毁哦）：

 

updateModels(context) {
        super.updateModels(context)

        if (this.group.children.length) {
            let rubbish = [];
            for (let i = this.group.children.length - 1; i >= 0; i--) {
                const mesh = this.group.children[i];
                if (mesh.name === 'FlashLayer_Line') {
                    mesh.material.map.offset.x -= 0.02;
                    mesh.scale.z += 0.03;
                    if(mesh.scale.z >= 1) {
                        mesh.scale.z = 1;
                    }
                    continue;
                }
                if (mesh.name === 'FlashLayer_Ring') {
                    const ringUserData = mesh.userData;
                    const per = ringUserData.per;
                    ringUserData.innerRadius += per;
                    ringUserData.opacity -= 1 / (ringUserData.innerMax / per);

                    if (ringUserData.innerRadius > ringUserData.innerMax) {
                        ringUserData.innerRadius = 0;
                        ringUserData.opacity = 1;
                        ringUserData.times++;
                        
                        if(ringUserData.times === FLASH_TIMES) {
                            rubbish.push(mesh)
                            continue;
                        }
                    }

                    // if(ringUserData.opacityFlag) {
                    //     ringUserData.opacity += 1 / 800 / 5;
                    // } else {
                    //     ringUserData.opacity -= 1 / 800 / 5;
                    // }

                    // if(ringUserData.opacity >= 1) {
                    //     ringUserData.opacity = 1;
                    //     ringUserData.opacityFlag = false;
                    // }
                    // if(ringUserData.opacity <= 0) {
                    //     ringUserData.opacity = 0;
                    //     ringUserData.opacityFlag = true;
                    // }

                    const ringGeometry = new THREE.RingGeometry(ringUserData.innerRadius, ringUserData.innerRadius +
                        ringUserData.width, 32);
                    const ringMaterial = new THREE.MeshPhongMaterial({
                        color: COLOR_RING,
                        emissive: COLOR_RING,
                        side: THREE.DoubleSide,
                        flatShading: true,
                        wireframe: false,
                        transparent: true,
                        opacity: ringUserData.opacity
                    });
                    mesh.geometry.dispose();
                    mesh.material.dispose();
                    mesh.geometry = ringGeometry;
                    mesh.material = ringMaterial;
                    mesh.rotation.z += 1;

                    continue;
                }
            }
            
            if(rubbish.length) {
                for(let i = 0; i < rubbish.length; i++) {
                    let rubbishMesh = rubbish[i];
                    let line = rubbishMesh.userData.line;
                    this.group.remove(line);
                    line.material.dispose();
                    line.geometry.dispose();
                    // line.dispose();
                    line = null;
                    this.group.remove(rubbishMesh);
                    rubbishMesh.material.dispose();
                    rubbishMesh.geometry.dispose();
                    // rubbishMesh.dispose();
                    rubbishMesh = null;
                }
                rubbish = null;
            }

            // if (mesh.scale.z <=0 ){
            //     this.animateFlag = true;
            // }

            // if(mesh.scale.z >=1 ) {
            //     this.animateFlag = false;
            // } 

            // if(this.animateFlag) {
            //     mesh.scale.z += 0.01;
            // } else {
            //     mesh.scale.z -= 0.01;
            // }
        }
    }

 

 

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
            // logarithmicDepthBuffer: true 
        });
        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')
    }
    
}

FlashLayer：

import mapx from '@/utils/mapUtils.js';
import Polygon from "@arcgis/core/geometry/Polygon";
import Point from "@arcgis/core/geometry/Point";
import * as THREE from 'three'
import ExternalRendererLayer from './ExternalRendererLayer.js'
import Graphic from "@arcgis/core/Graphic";
import SpatialReference from '@arcgis/core/geometry/SpatialReference'
import * as externalRenderers from "@arcgis/core/views/3d/externalRenderers"

const COLOR_RING = 0xff0000;
const FLASH_TIMES = 2;

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

    setup() {
        this.group = new THREE.Group();
        // this.animateFlag = false;
    }

    addModels(context) {
        super.addModels(context);
        
        this.scene.add(this.group);
        this.objects.push(this.group);
    }

    excute(point, height) {
        // let pointList = [
        //     [114.31456780904838, 30.55355011036358, 0],
        //     [114.31456780904838, 30.55355011036358, 2000]
        // ];
        let pointList = [
            [
                point.longitude,
                point.latitude,
                0
            ],
            [
                point.longitude,
                point.latitude,
                height
            ]
        ]

        let linePoints = [];
        //确定几何体位置
        pointList.forEach((item) => {
            var renderLinePoints = this.lngLatToXY(this.view, [item[0], item[1], item[2]]);
            linePoints.push(new THREE.Vector3(renderLinePoints.vector3List.x, renderLinePoints
                .vector3List.y, renderLinePoints.vector3List.z));
        })

        const lineImg = require('../../../../public/static/img/line.png')
        let lineTexture = new THREE.TextureLoader().load(lineImg)
        lineTexture.wrapS = lineTexture.wrapT = THREE.RepeatWrapping; //每个都重复
        lineTexture.repeat.set(1, 1)
        lineTexture.needsUpdate = true

        let lineMaterial = new THREE.MeshBasicMaterial({
            map: lineTexture,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: 1
        })

        // CatmullRomCurve3创建一条平滑的三维样条曲线
        let curve = new THREE.CatmullRomCurve3(linePoints) // 曲线路径

        // 创建管道
        let tubeGeometry = new THREE.TubeGeometry(curve, 1, 16)

        let mesh = new THREE.Mesh(tubeGeometry, lineMaterial);
        mesh.name = 'FlashLayer_Line';
        mesh.scale.z = 0;
        mesh.layers.set(0);
        this.group.add(mesh);

        //光圈
        const ringUserData = {
            width: 300,
            innerRadius: 0,
            opacity: 1,
            opacityFlag: false,
            per: 10,
            innerMax: 800,
            times: 0,
            line: mesh
        };
        const ringGeometry = new THREE.RingGeometry(ringUserData.innerRadius, ringUserData.innerRadius +
            ringUserData.width, 32);
        const ringMaterial = new THREE.MeshPhongMaterial({
            color: COLOR_RING,
            emissive: COLOR_RING,
            side: THREE.DoubleSide,
            flatShading: true,
            wireframe: false,
            transparent: true,
            opacity: ringUserData.opacity
        });
        const ringMesh = new THREE.Mesh(ringGeometry, ringMaterial);
        const ringPoint = linePoints[1];
        console.log(ringPoint);
        ringMesh.position.set(ringPoint.x, ringPoint.y, ringPoint.z / 2 + (Math.random() * ringPoint.z / 4 | 0) );
        ringMesh.name = 'FlashLayer_Ring';
        ringMesh.userData = ringUserData;
        ringMesh.layers.set(0);

        this.group.add(ringMesh);
    }

    updateModels(context) {
        super.updateModels(context)

        if (this.group.children.length) {
            let rubbish = [];
            for (let i = this.group.children.length - 1; i >= 0; i--) {
                const mesh = this.group.children[i];
                if (mesh.name === 'FlashLayer_Line') {
                    mesh.material.map.offset.x -= 0.02;
                    mesh.scale.z += 0.03;
                    if(mesh.scale.z >= 1) {
                        mesh.scale.z = 1;
                    }
                    continue;
                }
                if (mesh.name === 'FlashLayer_Ring') {
                    const ringUserData = mesh.userData;
                    const per = ringUserData.per;
                    ringUserData.innerRadius += per;
                    ringUserData.opacity -= 1 / (ringUserData.innerMax / per);

                    if (ringUserData.innerRadius > ringUserData.innerMax) {
                        ringUserData.innerRadius = 0;
                        ringUserData.opacity = 1;
                        ringUserData.times++;
                        
                        if(ringUserData.times === FLASH_TIMES) {
                            rubbish.push(mesh)
                            continue;
                        }
                    }

                    // if(ringUserData.opacityFlag) {
                    //     ringUserData.opacity += 1 / 800 / 5;
                    // } else {
                    //     ringUserData.opacity -= 1 / 800 / 5;
                    // }

                    // if(ringUserData.opacity >= 1) {
                    //     ringUserData.opacity = 1;
                    //     ringUserData.opacityFlag = false;
                    // }
                    // if(ringUserData.opacity <= 0) {
                    //     ringUserData.opacity = 0;
                    //     ringUserData.opacityFlag = true;
                    // }

                    const ringGeometry = new THREE.RingGeometry(ringUserData.innerRadius, ringUserData.innerRadius +
                        ringUserData.width, 32);
                    const ringMaterial = new THREE.MeshPhongMaterial({
                        color: COLOR_RING,
                        emissive: COLOR_RING,
                        side: THREE.DoubleSide,
                        flatShading: true,
                        wireframe: false,
                        transparent: true,
                        opacity: ringUserData.opacity
                    });
                    mesh.geometry.dispose();
                    mesh.material.dispose();
                    mesh.geometry = ringGeometry;
                    mesh.material = ringMaterial;
                    mesh.rotation.z += 1;

                    continue;
                }
            }
            
            if(rubbish.length) {
                for(let i = 0; i < rubbish.length; i++) {
                    let rubbishMesh = rubbish[i];
                    let line = rubbishMesh.userData.line;
                    this.group.remove(line);
                    line.material.dispose();
                    line.geometry.dispose();
                    // line.dispose();
                    line = null;
                    this.group.remove(rubbishMesh);
                    rubbishMesh.material.dispose();
                    rubbishMesh.geometry.dispose();
                    // rubbishMesh.dispose();
                    rubbishMesh = null;
                }
                rubbish = null;
            }

            // if (mesh.scale.z <=0 ){
            //     this.animateFlag = true;
            // }

            // if(mesh.scale.z >=1 ) {
            //     this.animateFlag = false;
            // } 

            // if(this.animateFlag) {
            //     mesh.scale.z += 0.01;
            // } else {
            //     mesh.scale.z -= 0.01;
            // }
        }
    }

    transparentObject(geometry, material) {
        var obj = new THREE.Object3D();
        var mesh = new THREE.Mesh(geometry, material);
        mesh.material.side = THREE.BackSide; // back faces
        mesh.renderOrder = 0;
        obj.add(mesh);

        var mesh = new THREE.Mesh(geometry, material.clone());
        mesh.material.side = THREE.FrontSide; // front faces
        mesh.renderOrder = 1;
        obj.add(mesh);
        return obj
    }

}

调用案例：点击地图显示光圈闪烁，MapBuilder是我封装的加载底图的类，各位大佬自己换掉，随便加个底图图层

<template>
    <div class="root"><div id="map" ref="rootmap"></div></div>
</template>

<script>
import MapBuilder from './core/MapBuilder.js';
import FlashLayer from './core/FlashLayer.js';

export default {
    name: 'base-map',
    data() {
        return {
            map: null
        };
    },
    computed: {},
    created() {
        this.inited = false;
        this.view = null;
    },
    mounted() {
        this.setup();
    },
    methods: {
        setup() {
            let mb = new MapBuilder({
                id: 'map',
                complete: (m, v, b) => {
                    this.map = m;
                    this.inited = true;
                    this.view = v;
                    
                    v.on('click', event => {
                        console.log(event);
                        this.flashLayer.excute(event.mapPoint, 2000);
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.root {
    position: absolute;
    width: 100%;
    height: 100%;
    #map {
        width: 100%;
        height: 100%;
        outline: none;
        // background-color: $color-grey;
        // background-color: black;
    }
}

::v-deep {
    .esri-ui-top-left {
        left: 410px;
        top: 40px;
    }
    h2.esri-widget__heading {
        font-size: 12px;
    }
    .esri-view-width-xlarge .esri-popup__main-container {
        width: 300px;
    }
    .esri-view .esri-view-surface--inset-outline:focus::after {
        outline: auto 0px Highlight !important;
        outline: auto 0px -webkit-focus-ring-color !important;
    }
}
</style>