arcgis 与gl-matrix 做电缆可视化

在arcgis中线的样式实在太难修改了，要是想做特效的线必须要借助webgl效果来弄

在官网gl-matrix 的线效果有特例

https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-animated-lines/

今天和大家分享下电缆线的可视化

```html

电缆可视化

html,

body,

#viewDiv {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

}

require([

"esri/WebMap",

"esri/Map",

"esri/core/watchUtils",

"esri/core/promiseUtils",

"esri/layers/GraphicsLayer",

"esri/layers/FeatureLayer",

"esri/views/MapView",

"esri/views/2d/layers/BaseLayerViewGL2D"

], function(

WebMap,

Map,

watchUtils,

promiseUtils,

GraphicsLayer,

FeatureLayer,

MapView,

BaseLayerViewGL2D

) {

var CustomLayerView2D = BaseLayerViewGL2D.createSubclass({

aPosition: 0,

aOffset: 1,

aTexcoord: 2,

aDistance: 3,

aSeeds: 4,

aLength: 5,

constructor: function() {

this.transform = mat3.create();

this.rotation = mat3.create();

this.display = mat3.create();

this.screenTranslation = vec2.create();

this.translationToCenter = vec2.create();

this.needsUpdate = false;

var requestUpdate = function() {

this.promises = [];

this.layer.graphics.forEach(this.processGraphic.bind(this));

promiseUtils.all(this.promises).then(

function(meshes) {

this.meshes = meshes;

this.needsUpdate = true;

this.requestRender();

}.bind(this)

);

}.bind(this);

this.watcher = watchUtils.on(

this,

"layer.graphics",

"change",

requestUpdate,

requestUpdate,

requestUpdate

);

},

更多信息参考小专栏https://xiaozhuanlan.com/topic/0845263791