需求背景

有一个二维数组，里面包含几万个表示高度的值，现在要把这些高度值在地图上展示出来。可以通过小立方体的方式展现，长宽固定，高用实际值代替。

需求分析

数据量较大，需要考虑性能问题；
在三维场景中对点数据(二维数组中的单个值)进行三维符号化

开发过程

最开始的思路是创建类型为Point的Graphic,通过PointSymbol3D进行符号化，在ObjectSymbol3DLayer中设置固定的长宽，高度根据数组里面的具体值对应，主要代码大概如下：

                    var elevArr = [];//模拟二维数组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);}}

经过测试发现1000个点的时候页面响应就有点慢了，增加到10000个点之后，页面崩溃，估计是和创建过多的Graphic , ObjectSymbol3DLayer等对象有关系。该方法在较大数据量的情况下不适用。
ArcGIS JS API里面有大数据集要素可视化的例子，通过FeatureLayer和Renderer的方式进行可视化渲染，FeatureLayer可通过3种方式创建：

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.

这里采用第三种，直接在代码里面通过数组的方式，具体代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>实现FeatureLayer大数据集的多变量渲染</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 = [];//模拟二维数组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()，注意数组长度限制，尽量低于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内部有优化，如分块渲染、量化操作等(可参考链接1)

效果图

注意事项

geometry里面属性type和spatialReference不可忽略，否则图形加不到地图上；
创建FeatureLayer时source有数组长度限制，经测试60000个点时正常，70000报错栈溢出，推测限制长度可能为65535，可以通过创建多个featurelayer的方式避免长度限制；
当geometry中包含z属性值时，符号化后高度是在z值之上叠加,如果不包含z属性，符号化后高度从该点所对应地形高程值之上累加；

参考链接

Visualize large feature datasets in 3D with ArcGIS API for JavaScript: https://www.esri.com/arcgis-blog/products/js-api-arcgis/3d-gis/visualize-large-feature-datasets-in-3d-with-arcgis-api-for-javascript/?tdsourcetag=s_pcqq_aiomsg

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html

在线示例

示例地址

基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染相关推荐

基于ArcGIS JS API实现垂直滑动缩放条
文章目录需求背景需求分析效果图完整代码注意事项严格来说并不是基于ArcGIS JS API,应该是基于Dojo的dijit里面的VerticalSlider和VerticalRule,但是 ...
基于ArcGIS JS API实现的两种距离和面积测量方式
文章目录前言开发思路主要代码效果测试效果图测试页面开发总结参考链接前言在一些地图地图应用中,距离.面积测量属于基础功能.ArcGIS API for JavaScript有单独提供 ...
基于ArcGIS JS API封装dojo微件(以工具条为例)
1.应用场景: 我们知道ArcGIS JS API自带了一些微件(或者说是控件),比如缩放按钮.定位按钮等等.但是有的时候这些微件的样式不太符合项目实际要求,或者是项目上想要把这些组合起来,这时候我们 ...
基于ArcGIS JS API 的点击查询功能
应用场景: 点击地图要素,弹出信息窗,左边显示点击要素的图层树(因为是查询的多个图层),右边显示当前所选要素的所有属性数据,可通过树插件实现动态控制要显示的要素.如果不想把属性表里面的所有属性全部显示 ...
基于three.js 和ArcGIS JS API 建筑物立面动态特效渲染
基于three.js 和ArcGIS JS API 建筑物立面波纹墙动态渲染简介基于ArcGIS JS API 和 three.js 波纹墙扩展类ripplewallRenderer 波纹墙扩展类 ...
使用ArcGIS JS API加载WMTS图层的两种方式
文章目录前言方式一方式二前言某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...
03 【ArcGIS JS API + eCharts系列】实现二、三维散点图的绘制
概述上一篇文章中我们介绍了如何使用ArcGIS JS API和eCharts结合,在二维和三维场景下绘制迁徙图.这篇文章我们来介绍下如何在二维和三维场景下绘制散点图,其实散点图跟迁徙图一样,它的绘制 ...
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制,因为这些图表绘制其实是跟地理坐标无关的,只需要设置图表的位置即可,所以仅仅用了纯前端的方式去实现.这 ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...

基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染

文章目录