當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
生活随笔
收集整理的這篇文章主要介紹了
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 需求背景
- 需求分析
- 開發(fā)過程
- 效果圖
- 注意事項
- 參考鏈接
- 在線示例
需求背景
有一個二維數(shù)組，里面包含幾萬個表示高度的值，現(xiàn)在要把這些高度值在地圖上展示出來。可以通過小立方體的方式展現(xiàn)，長寬固定，高用實際值代替。
需求分析
開發(fā)過程
最開始的思路是創(chuàng)建類型為Point的Graphic,通過PointSymbol3D進行符號化，在ObjectSymbol3DLayer中設置固定的長寬，高度根據(jù)數(shù)組里面的具體值對應，主要代碼大概如下：
var elevArr = [];//模擬二維數(shù)組for (let i=0;i<10;i++) {let rowArr = [];for (let j=0;j<10;j++) {rowArr.push(Math.random() * 1000);}elevArr.push(rowArr);}for (let row=0;row<elevArr.length;row++) {for (let col=0;col<elevArr[row].length;col++) {let locX = 17004630.030532643 + 500 + col*500;let locY = 3875195.620791356 - 500 - row*500;const objectSymbol = {type: "point-3d", // autocasts as new PointSymbol3D()symbolLayers: [{type: "object", // autocasts as new ObjectSymbol3DLayer()width: 1000, // diameter of the object from east to west in metersheight: elevArr[row][col], // height of the object in metersdepth: 1000, // diameter of the object from north to south in metersresource: { primitive: "cube" },material: { color: "blue" }}]};var point = {type: "point", // autocasts as new Point()x: locX,y: locY,z: 100, spatialReference: { wkid: 3857 }};const graphic = new Graphic({geometry: point,symbol: objectSymbol});graphicsLayer.add(graphic);}}經過測試發(fā)現(xiàn)1000個點的時候頁面響應就有點慢了，增加到10000個點之后，頁面崩潰，估計是和創(chuàng)建過多的Graphic , ObjectSymbol3DLayer等對象有關系。該方法在較大數(shù)據(jù)量的情況下不適用。
ArcGIS JS API里面有大數(shù)據(jù)集要素可視化的例子，通過FeatureLayer和Renderer的方式進行可視化渲染，FeatureLayer可通過3種方式創(chuàng)建：
FeatureLayers may be created in one of three ways: from a service URL, an ArcGIS portal item ID, or from an array of client-side features.
這里采用第三種，直接在代碼里面通過數(shù)組的方式，具體代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>實現(xiàn)FeatureLayer大數(shù)據(jù)集的多變量渲染</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.11/"></script><script>require(["esri/Map", "esri/views/SceneView", "esri/layers/FeatureLayer"], function (Map, SceneView, FeatureLayer) {var map = new Map({basemap: "streets",ground: "world-elevation"});var view = new SceneView({container: "viewDiv", // Reference to the scene div created in step 5map: map, // Reference to the map object created before the scenescale: 5000000, // Sets the initial scale to 1:50,000,000center: [-101.17, 21.78], // Sets the center point of view with lon/lat// viewingMode: "local"});view.on('click', (evt) => {console.log(evt.mapPoint);})var features = [];//模擬二維數(shù)組var elevArr = [];var fid = 0;for (let i = 0; i < 100; i++) {let rowArr = [];for (let j = 0; j < 600; j++) {rowArr.push(Math.random() * 1000);}elevArr.push(rowArr);}let leftCoorX, upCoorY, resolution;for (let row = 0; row < elevArr.length; row++) {for (let col = 0; col < elevArr[row].length; col++ , fid++) {let locX = -11807396.534464896 + 500 + col * 500;let locY = 2727548.99928753 - 500 - row * 500;let feature = {geometry: {type: "point", //不可省略x: locX,y: locY,spatialReference: { wkid: 3857 }, //不可省略},attributes: {ObjectID: fid,elevation: elevArr[row][col],width: "100",depth: "100"}};features.push(feature);}}var uvRenderer = {type: "simple", // autocasts as new SimpleRenderer()symbol: {type: "point-3d", // autocasts as new PointSymbol3D()symbolLayers: [{type: "object", // autocasts as new ObjectSymbol3DLayer()// width: 1000, // diameter of the object from east to west in meters// height: 5000, // height of the object in meters// depth: 1000, // diameter of the object from north to south in metersresource: { primitive: "cube" },material: { color: "blue" }}]},visualVariables: [{type: "size",axis: "height", //在symbolLayers設置width、height、depth無效field: "elevation",valueUnit: "meters"},{type: "size",axis: "width",field: "width",valueUnit: "meters"},{type: "size",axis: "depth",field: "depth",valueUnit: "meters"}]};var layer = new FeatureLayer({fields: [{name: "ObjectID",alias: "ObjectID",type: "oid"}, {name: "elevation",alias: "elevation",type: "double"}, {name: "width",alias: "width",type: "string"}, {name: "depth",alias: "depth",type: "string"}],objectIdField: "ObjectID",source: features, // autocast as a Collection of new Graphic()，注意數(shù)組長度限制，盡量低于60000geometryType: "point",spatialReference: { wkid: 3857 },renderer: uvRenderer,// type: "feature",outFields: ["*"]});map.add(layer);});</script> </head><body><div id="viewDiv"></div> </body></html>通過60000個點進行測試，無卡頓情況，推測ArcGIS JS API內部有優(yōu)化，如分塊渲染、量化操作等(可參考鏈接1)
效果圖
注意事項
參考鏈接
在線示例
示例地址
總結
以上是生活随笔為你收集整理的基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 版本控制集中式与分布式的区别
- 下一篇： ArcGIS Pro发布三维场景服务