前段时间接了一个项目，涉及到了空间信息三维可视化的工作。之前在网上查找无意中看到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 geometry, a symbol, and attributes.A  Graphic is displayed in the GraphicsLayer.

  当我们拿到带有空间信息的数据，就可以对每个数据设计可视化的图形，将同类的数据显示的图形添加到同一个图层中，就可以显示了。官方指出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属性来对底图进行操作。示例见Toggle ground elevation。

 通过调节这些属性，就可以实现我们想要的地图。

添加视图

我们需要一个视图来对我们所制作的地图进行观察，包括对底图的观察以及其他所有要素的观察。在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中的要素，官网示例见Sample - Create a FeatureLayer with GeoJSON data。

如果要从本地创建要素，需要同时设置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: feature.geometry.coordinates[0],
        y: feature.geometry.coordinates[1]
    }),
    // select only the attributes you care about    attributes: {
        ObjectID: i,
        title: feature.properties.title,
        type: feature.properties.type,
        place: feature.properties.place,
        depth: feature.geometry.coordinates[2] + " km",
        time: feature.properties.time,
        mag: feature.properties.mag,
        mmi: feature.properties.mmi,
        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配置项，可以根据某一属性值对颜色、尺寸、透明度、旋转角度进行映射调整。每一个元素都是以下几种类型：ColorVisualVariable、SizeVisualVariable、OpacityVisualVariable、RotationVisualVariable。

官网设计的渲染器如下所示：

            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}]
    }
}]
});

 这个渲染器的效果如下所示

整体代码

我的项目的整体代码由于现在放假不在电脑里，日后会分享出来。

原文：http://www.cnblogs.com/MSspblxh/p/6273998.html