⽤ArcGISAPIforJavaScript 制作三维可视化图
前段时间接了⼀个项⽬，涉及到了空间信息三维可视化的⼯作。之前在⽹上查⽆意中看到ArcGIS API for JavaScript （以下简称“ArcGIS API”或“该API”）可以在⽹页上制作三维可视化图。好在有友⼈在国外帮我把整个⽂档和API 下载下来了，于是就着⼿学习了⼀下这个API 。简介
做GIS 的肯定清楚ArcGIS 是什么，包括⼀系列的ArcMap 、ArcScence 、ArcEngine 等。ArcGIS 推出了这套JavaScript API ，现在有4.2版本，该版本可以创建⼆维、三维的⽹页应⽤程序。下⾯是官⽹给出的⼀些三维可视化的⽰例。 ArcGIS 制作可视化图的⼤体结构为：View 包含 Map 包含 Layer(s) 包含 Graphic(s)。带(s)表⽰是⼀个数组。其中
View （视图）：对应HTML 上的⼀个元素，在该元素中显⽰底图以及底图上的所有图层。 Map （底图）：可以为多种类型：街道图、卫星图、⼤洋图、地表图等。
Layer （图层）：有多种类型，如FeatureLayer 、GraphicLayer 、PointCloudLayer ，甚⾄有CSVLayer 等。对于图层的解释，ArcGIS 官⽅⽂档指出：
图层是 ArcMap 、ArcGlobe 和 ArcScene 中地理数据集的显⽰机制。⼀个图层引⽤⼀个数据集，并指定如何利⽤符号和⽂本标注绘制该数据集。向地图添加图层时，要指定它的引⽤数据集并设定地图符号和标注属性。 Graphic （图形）：图形在官⽅⽂档中的解释是：“图形是⼀个⽮量图，代表了真实世界的地理事物或地理现象。它可以包含geometry （⼏何）、symbol （符号）、attributes （特性）。”
A Graphic is a vector representation of real world geographic phenomena. It can contain , a , and .A Graphic is displayed in the .
当我们拿到带有空间信息的数据，就可以对每个数据设计可视化的图形，将同类的数据显⽰的图形添加到同⼀个图层中，就可以显⽰了。官⽅指出Graphic 是显⽰在GraphicLayer 中的，但是FeatureLayer 中有⼀个source 属性，可以将Grapchic ⾃动转换(autocast)，从⽽在Layer 中显⽰。
制作可视化图
使⽤ArcGIS API ，需要引⽤各个组件（Map, SenceView, FeatureLayer ...），各个组件引⽤的路径在官⽹⽂档上会标注。引⽤时使⽤require()函数（这⾥使⽤TypeScript 语法表⽰变量的类型）
光固化剂require(modules: Array<String>, callback: function) => void
即可将各个组件引⽤到应⽤程序中。其中
modules：是⼀个字符串数组，每⼀项代表了⼀个组件的引⽤路径。例如，组件Map的地址是 “esri/Map” 。
callback：是⼀个回调函数，表⽰各个组件加载完成后执⾏的函数操作。这个函数的的参数⽐较特别，参数个数与modules中引⽤的组件的个数相同，每个参数与modules中的组件路径⼀⼀对应，表⽰引⽤的各个组件的⼀个对象。 于是，脚本整体上类似于：
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) {
// Code to create the map and view will go here
});
气象风向标
当然这些脚本要写在⼀对script标签⾥。
添加底图
在ArcGIS API中，所有地图要素都是以对象的形式存在的。要在地图上添加地理地图，就需要创建地理地图对象。Map类的对象就表⽰⼀个地理地图。当引⽤了MA类组件之后，就可以创建其⼀个Map类的对象了。
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
Map类的属性有这些：
basemap：地理底图的类型。ArcGIS提供了多种类型的地理底图，包括了OpenStreetMap(osm)。
layers：包含了地图上展⽰的要素所在的图层，这个图层是“可操作的”，包括FeatureLayers、WebTileLayers和GraphicsLayers，其中不包含basemaps，也就是⽆法通过访问layers属性访问basemap。
allLayers：与layers属性不同的是，这个属性包含了basemap图层、ground图层以及“可操作图层”。
ground：这个属性只在使⽤三维视⾓的时候有⽤。ground属性是⼀个Ground类的对象，它将真实世界的地形或地势渲染到底图上。它包含了⼀组图层来显⽰地图。在创建地理底图的时候，ground属性可以包含⼀组layer，也可以仅仅赋予⼀个字符串 world-elevation ，通过操作ground中的layer属性来对底图进⾏操作。⽰例见。
通过调节这些属性，就可以实现我们想要的地图。
添加视图
我们需要⼀个视图来对我们所制作的地图进⾏观察，包括对底图的观察以及其他所有要素的观察。在ArcGIS软件中，如果制作⼆维地图或进⾏⼆维分析，就使⽤ArcMap软件；如果制作三维地图或进⾏三维分析，就使⽤ArcScene软件。在ArcGIS API中也是⼀样的。我们如果制作⼆维地图，就使⽤MapView类的对象创建视图；如果制作三维地图，就使⽤SceneView类的对象创建视图。
创建⼀个视图可以的⽅法与创建底图类似，如
var view = new SceneView({
container: "viewDiv",
map: map
});
这个SceneView的属性⾮常多，⽇后有空⼀⼀列举，与我们制作的三维地图关系较⼤的有：
container：是⼀个DOM元素的id，地图将渲染在该DOM元素内。ArcGIS API制作的地图可以⾃适应。
map：显⽰的底图。制作好底图后，在这⾥引⽤制作的底图实例，即可在地图上显⽰。
camera：视图摄像机。摄像机代表了三位观察的位置和⽅向。该属性是⼀个Camera类的实例，使⽤三个参数确定了摄像机的位置和⽅向：
position：摄像机的位置。是⼀个Point类的对象，可以使⽤经(longitude)纬(latitude)度作为平⾯位置的参数，也可以使⽤⼤地坐标(x, y)作为平⾯位置的参数。⾼程都是⽤z属性来指定的。还有⼀个spatialReference的属性，⽤于指定参考系。
heading：摄像机朝向的⽅位⾓。
tilt：摄像机的“垂直⾓”，这个定义与测量学中的垂直⾓（天顶距）定义不同，当摄像机竖直向下时，该⾓度为0°。
⼀旦创建了视图对象，就会在选定的DOM元素中进⾏渲染。
添加图层
ArcGIS API提供了丰富的图层可以使⽤，但是不同的图层代表了不同的含义。这⾥只分析⼀下FeatureLayer和GraphicLayer的区别：当图层
与某⼀地理实体相对应时，最好使⽤FeatureLayer，表⽰是地理要素的图层，具有实体含义；否则使⽤GraphicLayer，表⽰仅仅是⼀些⼏何元素，没有地理含义。
我所拿到的项⽬要可视化的内容具有地理实体含义，所以使⽤FeatureLayer。⼀个FeatureLayer对象包含很多属性，可以通过REST服务创建，也可以本地创建。使⽤REST服务创建需要发布REST服务，然后在url属性上填⼊REST服务的地址。这⾥介绍从本地创建FeatureLayer中的要素，官⽹⽰例见。
如果要从本地创建要素，需要同时设置FeatureLayer的五个属性：fields、objectIdField、spatialReference、geometryType和source。
fields：是⼀个对象数组，相当于ArcMap中的属性表各个字段的配置，每⼀个对象表⽰了属性表中的⼀个字段。每个对象有以下⼏个常⽤属性
name：字段名。
type：字段的数据类型，与ArcMap中⼀样，有small-integer、integer、single、double、string、date、oid、geometry、blob、raster、guid、global-id、xml等。
alias：字段替⽤名。
length：字段长度。
nullable：字段是否可空。
editable：字段时候可编辑。
objectIdField：指定fields中那个字段代表了要素的ObjectId。ObjectId是每个要素的唯⼀标识符。
spatialReference：指定地理参考系。
geometryType：表⽰要素的⼏何类型，有point、mulitpoint、polyline、polygon等类型。
source：是⼀个Graphic对象的集合。每个Graphic对象包括三个部分：geometry、symbol和attribute。
geometry：是⼀个Geometry类的对象，定义了Graphic对象的地理位置。Geometry类的派⽣类有Point（点）、MultiPoint（多点）、Polyline（折线）、Polygon（折线）等。
symbol：该要素显⽰时的符号，代表了可视化⽅式。在创建Graphic对象的时候直接指定其symbol属性不是⼀个⽐较好的做法。
⽐较好的做法是使⽤Renderer（渲染器）来对图层中的所有要素进⾏统⼀渲染。
attribute：是⼀个对象数组，每个对象要包含fields中声明的所有不可空字段。
除此之外，还有⼀些属性是⾮常有⽤的：
renderer：渲染器。是⼀个Renderer类的对象，表⽰对要素的geometry和attribute如何进⾏渲染。
popupTemplate：弹出框的模板，是⼀个PopupTemplate对象，可以⽤来显⽰要素的数据。
当我们获取到了可视化的数据，⾸先创建⼀个Graphic数组，在官⽹⽰例中，是这样的
return arrayUtils.map(geoJson.features, function(feature, i) {
return {
geometry: new Point({
x: dinates[0],
y: dinates[1]
}),
// select only the attributes you care about
attributes: {
ObjectID: i,
title: feature.properties.title,
type: pe,
place: feature.properties.place,
depth: dinates[2] + " km",
time: feature.properties.time,
mag: feature.properties.mag,
mmi: i,
felt: feature.properties.felt,
sig: feature.properties.sig,
url: feature.properties.url
}
};
});
这⾥使⽤了arrayUtils的⽅法将⼀个数组映射为另⼀个数组。也可以使⽤foreach循环来完成这件事。将Griphic数组⽤⼀个变量保存起来。
fields也需要我们进⾏创建，官⽹的⽰例中创建了如下的属性表：
var fields = [
{name: "ObjectID",alias: "ObjectID",type: "oid"},
{name: "title",alias: "title",type: "string"},
{name: "type",alias: "type",type: "string"},
{name: "place",alias: "place",type: "string"},
{name: "depth",alias: "depth",type: "string"},
{name: "time",alias: "time",type: "date"},
{name: "mag",alias: "Magnitude",type: "double"},
{name: "url",alias: "url",type: "string"},
{name: "mmi",alias: "intensity",type: "double"},
{name: "felt",alias: "Number of felt reports",type: "double"},
{name: "sig",alias: "significance",type: "double"}
];
我们现在就可以创建FeatureLayer了，⽰例代码如下：
var lyr = new FeatureLayer({
source: graphics, // autocast as an array of esri/Graphic
// create an instance of esri/layers/support/Field for each field object
fields: fields, // This is required when creating a layer from Graphics
objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
renderer: quakesRenderer, // set the visualization on the layer
spatialReference: {
wkid: 4326
},
geometryType: "point", // Must be set when creating a layer from Graphics
popupTemplate: pTemplate
});
map.add(lyr);
最后⼀⾏通过map类对象的add()⽅法，将该要素图层添加到地图上。其中，quakesRenderer是创建的渲染器，下⼩节中会详细讲解。
设计渲染器
渲染器是地图显⽰符号的⽅法，相当于Echarts中的VisualMap配置项。ArcGIS API中有很多渲染器，我们这⾥对点符号的渲染可以使⽤SimpleRenderer，有⼏个属性
label：渲染器标签。
symbol：渲染⽤的符号。是Symbol类的⼀个对象。Symbol的派⽣类包含了丰富的可视化类型，有⼆维的和三维的。如果使⽤三维的可视化符号，使⽤Symbol3D类，包括⼆维可视化符号的三维版本和⼀些三维可视化特有的符号，如MeshSymbol3D。
visualVariables：视觉变量，是⼀个对象数组。效果类似于Echarts中的VisualMap配置项，可以根据某⼀属性值对颜⾊、尺⼨、透明度、旋转⾓度进⾏映射调整。每⼀个元素都是以下⼏种类型：、、、。
官⽹设计的渲染器如下所⽰：
var quakesRenderer = new SimpleRenderer({
symbol: new SimpleMarkerSymbol({
style: "circle",
size: 20,
color: [211, 255, 0, 0],
outline: {
width: 1,
color: "#FF0055",
style: "solid"
}
}),
visualVariables: [
{
type: "size",
field: "mag", // earthquake magnitude
valueUnit: "unknown",
minDataValue: 2,
maxDataValue: 7,
// Define size of mag 2 quakes based on scale
minSize: {
type: "size",
expression: "view.scale",
stops: [
{value: 1128,size: 12},
{value: 36111,size: 12},
{value: 9244649,size: 6},
{value: 73957191,size: 4},
{value: 591657528,size: 2}]
},
// Define size of mag 7 quakes based on scale
maxSize: {
type: "size",
expression: "view.scale",
stops: [
{value: 1128,size: 80},
{value: 36111,size: 60},
{value: 9244649,size: 50},
{value: 73957191,size: 50},
{value: 591657528,size: 25}]
金钢绳}
}]
});
这个渲染器的效果如下所⽰
整体代码
1var arcgis_groupLayer;
2
3function ArcGIS_Map_Init() {
4 require([
5 "esri/layers/GroupLayer",
6 "esri/layers/FeatureLayer",
7 "esri/Map",
8 "esri/views/SceneView",
9 "esri/widgets/LayerList",
10 "esri/layers/support/Field",
11 "esri/geometry/Point",
12 "esri/renderers/SimpleRenderer",
13 "esri/symbols/PointSymbol3D",
14 "esri/symbols/ObjectSymbol3DLayer",
15 "esri/request",
16 "dojo/_base/array",
17 "dojo/dom",
18 "dojo/on",
19 "dojo/domReady!"
20 ], function (GroupLayer, FeatureLayer, Map, SceneView, LayerList, Field, Point, SimpleRenderer, PointSymbol3D, ObjectSymbol3DLayer, esriRequest,
21 arrayUtils, dom, on) {
22
23var arcgis_fields = [
浮选机叶轮盖板
24 {name: "ObjectID", alias: "ObjectID", type: "oid"},
陶瓷添加剂ei矽钢片25 {name: "title", alias: "title", type: "string"},
26 {name: "num", alias: "num", type: "integer"}
27 ];
28
29 arcgis_groupLayer = new GroupLayer({
30 title: "消防数据",
31 visibility: true,
32 visibilityMode: "exclusive"
33 })
34
35var arcgis_arcgismap = new Map({
36 basemap: "osm",
37 layers: [arcgis_groupLayer]
38 });
39
40var arcgis_initCam = {
41 position: {
42 x: 120.61,
43 y: 30.50,
44 z: 100000,
45 spatialReference: {
46 wkid: 4326
47 }
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议