arcgis 中文文档

我若亦如风
1,295 阅读9分钟

快速入门

创建一个2D web应用

1.创建页面，同时在 body 标签中创建 div 标签，并设置ID值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create a 2D map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

1.引入文件。在 head 标签中，引入 ArcGIS API

<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>

2.加载模块

  • esri/Map: 创建地图的代码
  • esri/views/MapView: 2D代码
<script>
  require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {
    // Code to create the map and view will go here
  });
</script>

require 函数的作用是加载Api的AMD模块，想了解Api的不同引入模式，请移步Introduction to tooling

3.创建map地图

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
    const map = new Map({
        basemap: "topo-vector"
    });
});

4.创建2D视图

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
    const map = new Map({
        basemap: "topo-vector"
    });

    const view = new MapView({
        container: "viewDiv", // Reference to the DOM node that will contain the view
        map: map // References the map object created in step 3
    });
});

这样就可以实现一个简易的2d map了，下面附上全部代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Intro to MapView - Create a 2D map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.23/"></script>
  <script>
    require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
      const map = new Map({
        basemap: "topo-vector"
      });
      const view = new MapView({
        container: "viewDiv", // Reference to the view div created in step 5
        map: map, // Reference to the map object created before the view
        zoom: 4, // Sets zoom level based on level of detail (LOD)
        center: [15, 65] // Sets center point of view using longitude,latitude
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

参考：Intro to MapView - Create a 2D map

添加图层（layers）

1.创建一个地图、视图、复选框 创建地图、视图

require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
  // Create the Map
  const map = new Map({
    basemap: "oceans"
  });

  // Create the SceneView
  const view = new SceneView({
    container: "viewDiv",
    map: map
  });
});

创建复选框，后期用于控制图层显示

<body>
  <div id="viewDiv"></div>
  <span id="layerToggle" class="esri-widget"> <input type="checkbox" id="streetsLayer" checked /> Transportation </span>
</body>

2.创建2个切片(TileLayer)图层，并添加其他属性

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/TileLayer" // Require the TileLayer module
    ], (Map, SceneView, TileLayer) => {
    const transportationLayer = new TileLayer({
        url: "https://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer",
        id: "streets", 
        opacity: 0.7
    });

    const housingLayer = new TileLayer({
        url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
        id: "ny-housing"
    });
});

id 是唯一标识符，minScale和 maxScale 控制图层在不同比例下的可见性。默认情况下，visible 属性为true。

3.将图层添加到地图

将图层添加到map的构造函数中

const map = new Map({
    basemap: "oceans",
    layers: [housingLayer] // layers can be added as an array to the map's constructor
});

通过 map.layers.add() 将图层添加到地图

map.layers.add(transportationLayer);

如果添加了视图，也可通过 view.map.layers.add() 添加

// ...
const map = new Map({
    basemap: "topo-vector",
});
const view = new MapView({
    container: "viewDiv",
    map: map, 
});
view.map.layers.add(transportationLayer)

4.设置图层可见性 使用 addEventListener 监听第一步中创建的复选框，选中该复选框将设置图层的可见效。与 visible 一样，任何图层的任何特性都可以直接在图层实例上设置。

// 获取复选框节点
const streetsLayerToggle = document.getElementById("streetsLayer");

// 监听复选框的 change 事件
streetsLayerToggle.addEventListener("change", () => {
    // 复选框状态选中（true）时，设置图层可见
    transportationLayer.visible = streetsLayerToggle.checked;
});

注意：即使图层不可见，其图层仍在地图中，可以访问图层的的所有属性。

5.理解 LayerViews

图层对象管理作为服务发布的地理和表格数据。它不处理在视图中渲染层的问题，这是 LayerView 的工作。图层的LayerView 是在其在视图中渲染之前创建的。使用 FeatureLayers 时，相应的可以让开发人员访问在视图中渲染的与该层特征相关的图形。

在这一步中，我们将侦听视图的 layerview 创建事件，并打印输出，以便您可以在控制台中查看其属性。请注意，我们将使用步骤2中为每个层创建的id来获得所需的层。

require(["esri/Map", "esri/views/SceneView", "esri/layers/TileLayer"], (
  Map,
  SceneView,
  TileLayer
) => {
  // ···
  view.on("layerview-create", (event) => {
    if (event.layer.id === "ny-housing") {
      // Explore the properties of the housing layer's layer view here
      console.log("LayerView for New York housing density created!", event.layerView);
    }
    if (event.layer.id === "streets") {
      // Explore the properties of the transportation layer's layer view here
      console.log("LayerView for streets created!", event.layerView);
    }
  });
});

6.使用 Layer.when()

图层加载完成后回调

// 图层加载完后，将视图设置为该层的全部动画
housingLayer.when(() => {
    view.goTo(housingLayer.fullExtent);
});

需要注意，使用图层，需要保证 view已加载完成

view.when(() => {
    housingLayer.when(() => {
        view.goTo(housingLayer.fullExtent);
    });
})

地图弹窗

  1. 需要 locator、Map 和 MapView 模块并创建新实例

geometry

geometryEngine

参数类型说明

类型描述可选值
ArealUnits (String ｜ Number)面积测量单位acres 、 ares 、 hectares 、 square-feet 、 square-meters 、 square-yards 、 square-kilometers 、 square-miles 、 Number
LinearUnits (String ｜ Number)线性测量单位meters 、 feet 、 kilometers 、 miles 、 nautical-miles 、 yards 、 Number

union(geometries) - 合并

const union = geometryEngine.union([pt1, pt2]);

  • 描述 合并所有输入的相同类型的几何图形，并返回一个合并后的空间参考。

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometries | 需要合并的几何图形数组 | 必填 |

  • 返回值 | 类型 | 描述 | | --- | --- | | Array | 合并后的几何图形数组 |

也可以 geometryEngineAsync.union()

within(innerGeometry, outerGeometry) - 包含

const isWithin = geometryEngine.within(polygon, boundaryPolygon);

判断一个几何图形（a）是否在另一个几何图形（b）中。

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | innerGeometry | 几何图形a | 必填 | | outerGeometry | 几何图形b | 必填 |

  • 返回值 | 类型 | 描述 | | --- | --- | | Boolean | 如果几何图形（a）在几何图形（b）中返回 true，反之false |

也可以 geometryEngineAsync.within()

intersect(geometry1, geometry2) - 点线面交集

const intersecting = geometryEngine.intersect(boundaryPolygon, buffers);

从两个几何图形之间的交点创建新几何图形。如果输入几何图形具有不同的尺寸（即点=0；线=1；面=2），则结果的尺寸将等于输入的最低尺寸。下表描述了各种几何图形类型组合的预期输出。

请注意，geometry1和geometry2在此操作中是可互换的，如果翻转，将返回相同的结果。

  • 参数/返回值 | geometry1类型 | geometry2类型 | 返回类型（geometry） | | --- | --- | --- | | 面 | 面 | 面 | | 面 | 线 | 线 | | 面 | 点 | 点 | | 线 | 线 | 线 | | 线 | 点 | 点 | | 点 | 点 | 点 |

也可以 geometryEngineAsync.intersect()

intersects(geometry1, geometry2) - 面与面是否相交

const isIntersecting = geometryEngine.intersects(boundaryPolygon, cityPolygon);

  • 描述 一个几何图形是否与另一个几何图形相交。

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometry1 | 几何图形a | 必填 | | geometry2 | 几何图形b | 必填 |

  • 返回值 | 类型 | 描述 | | --- | --- | | Boolean | 如果几何图形（a）与几何图形（b）相交返回 true，反之false |

difference(inputGeometry, subtractor)

获取两个几何体的差异。返回的几何体是inputGeometry不在subtractor中，subtractor的范围必须大于等于inputGeometry的范围。

const geometry = geometryEngine.difference(boundaryPolygon, buffers);

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | inputGeometry | 要从中减去的输入几何图元。 | Geometry ｜Geometry[] | | subtractor | 从inputGeometry中减去的几何体。 | Geometry |

  • 返回值 | 类型 | 描述 | | --- | --- | | Geometry ｜Geometry[] | 返回inputGeometry的几何图形减去减法器几何图形。 |

distance(geometry1, geometry2, distanceUnit?)

计算两个几何图形的最短平面距离。距离以distanceUnit输入的单位计算，如果没传，默认以输入的几何图形单位输出。

const totalDistance = geometryEngine.distance(point1, point2, "feet");

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometry1 | 第一个几何体 | Geometry | | geometry2 | 第二个几何体 | Geometry | | distanceUnit（非必填）| 返回值的测量单位。默认为输入几何图形的单位。| LinearUnits |

  • 返回值 | 类型 | 描述 | | --- | --- | | Number | 返回两个几何体之间的距离 |

clip(geometry, envelope)

从几何面中裁剪出新的几何面。

const clippedGeometry= geometryEngine.clip(boundaryPolygon, view.extent);

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometry | 要剪裁的几何体 | 必填 | | envelope | 用来夹的信封 | 必填 |

  • 返回值 | 类型 | 描述 | | --- | --- | | Gometry | 剪裁好的几何体 |

geodesicArea(geometry, unit?)

计算输入几何图形的面积。与 planarArea()，geodesicArea 在执行此计算时考虑地球的曲率。因此，当使用空间参考为WGS84（wkid：4326）或Web Mercator的输入几何图形时，最好使用 geodesicArea() 计算面积。如果输入几何图形具有投影坐标系而不是Web Mercator，请改用 planarArea()。

此方法仅适用于WGS84（wkid:4326）和Web Mercator空间参照。

const area = geometryEngine.geodesicArea(boundaryPolygon, "square-miles");

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometry | 输入多边形 | Polygon | | unit（非必填）| 返回值的测量单位。默认为输入几何图形的单位。 | ArealUnits |

  • 返回值 | 类型 | 描述 | | --- | --- | | Number | 输出集合体的面积

geodesicLength(geometry, unit?) - 计算长度

const length = geometryEngine.geodesicLength(riverGeometry, "miles");
  • 描述 计算输入几何图形的长度。与 planarLength() 相反，在执行此计算时，geodesicLength() 会考虑地球的曲率。因此，当使用空间参考为WGS84（wkid:4326）或 Web Mercator 的输入几何图形时，最好使用 geodesicLength() 计算长度。如果输入几何图形的投影坐标系不是Web Mercator，请改用planarLength()。

此方法仅适用于WGS84（wkid:4326）和Web Mercator空间参照。

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometry | 输入几何图形 | | | unit(非必填) | 返回值的测量单位。默认为输入几何图形的单位。 | |

  • 返回值 | 类型 | 描述 | | --- | --- | | Number | 输出几何长度 |

也可以 geometryEngineAsync.geodesicLength()

planarArea(geometry, unit?)

计算输入几何图形的面积。与 geodesicArea() 相反，planarArea() 使用投影坐标执行此计算，并且不考虑地球的曲率。使用空间参照为WGS84（wkid:4326）或Web Mercator的输入几何图形时，最好使用 geodesicArea() 计算面积。如果输入几何图形具有投影坐标系而不是Web Mercator，请改用 planarArea()。

const area = geometryEngine.planarArea(boundaryPolygon, "square-miles");

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometry | 输入的几何体 | Polygon | | unit(非必填) | 返回值的测量单位。默认为输入几何图形的单位。 | ArealUnits |

  • 返回值 | 类型 | 描述 | | --- | --- | | Number | 返回输入几何体的面积 |

planarLength(geometry, unit?)

计算输入几何图形的长度。与 geodesicLength() 相反， planarLength() 使用投影坐标，在执行此计算时不考虑地球的曲率。使用空间参照为WGS84（wkid:4326）或Web Mercator的输入几何图形时，最好使用 geodesicLength() 计算长度。如果输入几何图形具有投影坐标系而不是Web Mercator，请改用 planarLength()。

const length = geometryEngine.planarLength(riverGeometry, "miles");

  • 参数 | 名称 | 描述 | 类型 | | --- | --- | --- | | geometry | 输入的几何体 | Geometry | | unit(非必填) | 返回值的测量单位。默认为输入几何图形的单位。 | LinearUnits |

  • 返回值 | 类型 | 描述 | | --- | --- | | Number | 输入几何图形的长度 |

geometryEngineAsync

Point - 点

// AMD 
require(["esri/geometry/Point"], (Point) => { /* code goes here */ });

// ESM
import Point from "@arcgis/core/geometry/Point";

new Point(properties?)

名称类型描述
propertiesObject参数对象
properties.latitudeNumber维度
properties.longitudeNumber经度
properties.mNumber以地图单位表示的点的m坐标
properties.typeString几何图形的类型。对于点，类型始终为“point”
properties.xNumber以地图单位表示的点的x坐标（东距）
properties.yNumber以地图单位表示的点的y坐标（北距）
properties.zNumber以地图单位表示的点的z坐标（或高程）

Polygon - 多边形

// AMD 
require(["esri/geometry/Polygon"], (Polygon) => { /* code goes here */ });

// ESM
import Polygon from "@arcgis/core/geometry/Polygon";

多边形包含一组环（rings）和一个空间参考（spatialReference）。每个环都表示一个点阵列，环的第一个点和最后一个点必须相同，多边形还有一个布尔值的 hasM 和 hasZ字段。

new Polygon(properties?)

名称类型描述
propertiesObject参数对象
properties.cacheObject
properties.centroidPoint
properties.declaredClassString
properties.extentExtent几何图形的范围
properties.hasMNumber以地图单位表示的点的m坐标
properties.hasZNumber以地图单位表示的点的z坐标（高）
properties.ringsNumber[][][]一组环
properties.spatialReferenceSpatialReference几何图形的空间参考，默认WGS84 (wkid: 4326)
properties.typeString几何图形的类型。对于多边形，类型始终为“polygon”
// 3D polygon rings with m-values (note that the second ring does not have m-values defined for it)
const rings = [
  [ // first ring
    [-97.06138, 32.837, 35.1, 4.8],
    [-97.06133, 32.836, 35.2, 4.1],
    [-97.06124, 32.834, 35.3, 4.2],
    [-97.06138, 32.837, 35.1, 4.8] // same as first vertex
  ],
  [ // second ring
    [-97.06326, 32.759, 35.4],
    [-97.06298, 32.755, 35.5],
    [-97.06153, 32.749, 35.6],
    [-97.06326, 32.759, 35.4] // same as first vertex
  ]
];

const polygon = new Polygon({
  hasZ: true,
  hasM: true,
  rings: rings,
  spatialReference: {
    wkid: 4326
  }
});

layers

使用

聚合

image.png

require([
  "esri/WebMap",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/widgets/Legend",
  "esri/widgets/Expand",
  "esri/smartMapping/labels/clusters",
], function (WebMap, MapView, FeatureLayer, clusterLabelCreator) {
  const map = new WebMap({});

  const view = new MapView({
    container: "viewDiv",
    map,
  });

  let graphicList = Array.from(Array(100)).map((item, index) => {
    console.log(item, index);
    return {
      geometry: {
        type: "point",
        x: `114.7549${index}54712`,
        y: `40.5439${index}54712`,
      },
      attributes: {},
    };
  });

  let deviceLayer = new FeatureLayer({
    source: graphicList, // autocast as a Collection of new Graphic()
    objectIdField: "OBJECTID",
    fields: [
      {
        name: "OBJECTID",
        type: "oid",
      },
    ],
  });

  view.map.addMany([deviceLayer]);

  deviceLayer
    .when()
    .then(async (layer) => {
      const { labelingInfo, clusterMinSize } = await clusterLabelCreator
        .getLabelSchemes({
          layer,
          view,
        })
        .then((labelSchemes) => labelSchemes.primaryScheme);

      return {
        type: "cluster",
        labelingInfo,
        clusterMinSize,
      };
    })
    .then(async (featureReduction) => {
      // sets generated cluster configuration on the layer
      deviceLayer.featureReduction = featureReduction;
    })
    .catch((error) => {});
});
avatar
文章
阅读
粉丝