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

简介

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

基于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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87