arcgis 与gl-matrix 做电缆可视化

2022-01-20 19:31:57 阅读：181 来源： 互联网

标签：function layers matrix create requestUpdate arcgis gl esri

在arcgis中线的样式实在太难修改了，要是想做特效的线必须要借助webgl效果来弄
在官网gl-matrix 的线效果有特例
https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-animated-lines/

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>电缆可视化</title>

<script src="https://cdn.bootcdn.net/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>
<style type="text/css" media="screen">
html,
body,
#viewDiv {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>

<script>
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

标签：function,layers,matrix,create,requestUpdate,arcgis,gl,esri
来源： https://blog.csdn.net/haibalai2009/article/details/122608443

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

arcgis 与gl-matrix 做电缆可视化