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

最新推荐文章于 2025-12-01 16:32:09 发布

原创

最新推荐文章于 2025-12-01 16:32:09 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#可视化 #arcgis #three.js #webgl #map

该博客介绍了如何使用three.js和ArcGIS JS API创建meshline流动线的扩展类，并提供了调用示例及渲染效果。通过结合这两种技术，可以实现地图上的动态流动视觉效果。

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

简介
基于three.js 和ArcGIS JS API meshline流动线扩展类
meshline流动线扩展类调用示例
meshline流动线渲染效果图
完整代码下载地址
联系方式

简介

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

基于three.js 和ArcGIS JS API meshline流动线扩展类

efine([
  'dojo/_base/declare',
  'esri/geometry/Point',
  'esri/geometry/SpatialReference',
  'esri/views/3d/externalRenderers',
  'esri/geometry/support/webMercatorUtils',
], function(declare, Point, SpatialReference, externalRenderers, webMercatorUtils) {
   
   
  // Enforce strict mode
  'use strict';

  // Constants
  var THREE = window.THREE;
  var RADIUS = 6378137;
  var OFFSET = 5000;
  //   var COLOR = 0xffffff;
  var COLOR = 0xef6c00; //0x00ffff;
  var REST = 75; //ms
  // var REST = 200;
  const RandomColors = [
    // '#1A93D3',
    // '#B5C334',
    // '#C1232B',
    // '#E87C25',
    // '#27727B',
    // '#FE8463',
    // '#9BCA63',
    // '#FAD860',
    // '#F3A43B',
    // '#60C0DD',
    // '#D7504B',
    // '#C6E579',
    // '#F4E001',
    // '#F0805A',
    // '#26C0C0',
    // '#c23531',
    '#00FFFF',
    '#00FF00',
    // '#2f4554',
    // '#61a0a8',
    // '#d48265',
    // '#91c7ae',
    // '#749f83',
    // '#ca8622',
    // '#bda29a',
    // '#6e7074',
    // '#546570',
    // '#c4ccd3',
  ];

  var colorindex = 0;
  function getColor() {
   
   
    if (colorindex === 0) {
   
   
      colorindex = 1;
    } else {
   
   
      colorindex = 0;
    }
    return RandomColors[colorindex].replace('#', '0x');
  }

  function getColornew(color) {
   
   
    return color.replace('#', '0x');
  }
    

  return declare([], {
   
   
    constructor: function (view, tracks, width, color, opacity, dashArray, rest, linesegment, linesegmentfade) {
   
   
      this.view = view;
      this.tracks = tracks;
      this.index = 0;
      this.max = 0;
      this.linesegment = linesegment === undefined ? 60 : linesegment;
      this.linesegmentfade = linesegmentfade === undefined ? 10 : linesegmentfade;
      this.REST = rest === undefined ? 75 : rest;
      this.width = width === undefined ? 15 : width;
      this.color = color === undefined ? '#00FF00' : color;
      this.opacity = opacity === undefined ? 0 : opacity;
      this.dashArray = dashArray === undefined ? 0 : dashArray;
      this.meshLines = [];
      this.refresh = Date.now();
    },
    setup: function(context) {
   
   
      // Create the THREE.js webgl renderer
      this.renderer = new THREE.WebGLRenderer({
   
   
        context: context.gl,
        premultipliedAlpha: false,
      }