基于three.js 和ArcGIS JS API 道路流动线

简介

   ArcGIS API for JavaScript  是ESRI 推出面向 WEB 端 GIS   API，可构建引人注目的web 地图应用程序，通过交互式用户体验和令人惊叹的2D和3D可视化来释放地理时空大数据的潜力。同时提供了一个轻量级接口来访问SceneView的WebGL上下文，因此可以创建与内置层相同的方式与场景交互的自定义可视化。开发人员可以直接编写WebGL代码，也可以与第三方WebGL库集成

基于three.js 和ArcGIS JS API 道路流动线扩展类SpriteLineRenderer

define([
    'dojo/_base/declare',
    "esri/views/3d/externalRenderers"
], function (
    declare,
    externalRenderers
) {
   
    var THREE = window.THREE;
    var SpriteLineRenderer = declare([], {
   
        constructor: function (view, multiLineStrings, options) {
   
            this.view = view;
            this.object3ds = [];
            const OPTIONS = {
   
                altitude: 0,
                speed: 0.1
            }
            this.options = this.extend({
   }, OPTIONS, options, {
   
                multiLineStrings: multiLineStrings
            });
        },

        setup: function (context) {
   
            this.renderer = new THREE.WebGLRenderer({
   
                context: context.gl, // 可用于将渲染器附加到已有的渲染环境(RenderingContext)中
                premultipliedAlpha: false, // renderer是否假设颜色有 premultiplied alpha. 默认为true
            });
            this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
            this.renderer.setViewport(0, 0, this.view.width, this.view.height); // 视口大小设置

            // Make sure it does not clear anything before rendering
            this.renderer.autoClear = false;
            this.renderer.autoClearDepth = false;
            this.renderer.autoClearColor = false;
            this.renderer.autoClearStencil = false;

            // The ArcGIS JS API renders to custom offscreen buffers, and not to the default framebuffers.
            // We have to inject this bit of code into the three.js runtime in order for it to bind those
            // buffers instead of the default ones.
            var originalSetRenderTarget = this.renderer.setRenderTarget.bind(this.renderer);
            this.renderer.setRenderTarget = function (target) {
   
                originalSetRenderTarget(target);
                if (target == null) {
   
                    context.bindRenderTarget();
                }
            };
            this.scene = new THREE.Scene();
            this.camera = new THREE.PerspectiveCamera();

            const axesHelper = new THREE.AxesHelper(1);
            axesHelper.position.copy(1000000, 100000, 100000);
            this