显示 WebMap

网址: https://developers.arcgis.com/javascript/latest/tutorials/display-a-web-map/

本文档的价值在于小部件的使用, 在国内一般不会使用到其 API 服务. 但是可以开发自己的地图数据.

本教程展示使用 存储与 ArcGIS 的 web map 来创建地图.

Web Map 是一个地图数据, 以 JSON 的格式进行存储. 其中定义了诸多属性, 例如 basemap layer, data layer 等.

该 JSON 格式定义在 web map 规范中.

一个 Web Map 就是一个地图, 它是 ArcGIS 中的一个 item.

一个 Web Map Item 包含地图所需要的所有配置 (JSON 格式). 包括:

• basemap layer
• data layer
• layer style
• pop-up 设置等.

应用程序可以使用 item ID 来展示地图.

概念补充

1. basemap layer. 是一个用于访问和显示来自基础地图层服务的数据的层. 它为地图或场景提供视觉和地理上下文, 通常包含带有行政边界和地名的全局数据.
2. data layer. 数据层是从文件或服务中引用地理数据的层, 用于在地图或场景中可视化数据.
3. layer style. 样式是描述如何在地图视图中呈现地图内容的定义. 它通常从服务或文件中读取.
4. pop-up. 即弹窗, 它是一种视觉元素, 用于显示地图中特征或图形的数据.

这些细节需要单独梳理, 补充.

在本教程中, 你会学习如果加载并展示存储于 ArcGIS Online 中的, 已配置好的 web map.

注意:

如果需要了解数据服务 (data hosting), 可以参考地图 API 与位置服务指南中的 Data Hosting. 要了解服务, 可以访问 特性服务.

前置要求

你需要一个 API Key, 进入官网, 登录后, 进入 dashboard 页面.

步骤

1. 创建项目.
2. 设置 ApiKey.
3. 添加模块 (Map, MapView, WebMap, ScaleBar, Legend).
4. 加载 Web Map. 设置其 portalItem
5. 更新 MapView 实例, 使用 WebMap 实例代替 Map 实例. 并删除 center, zoom 属性.
6. 添加小部件.

详细步骤

import WebMap from '@arcgis/core/WebMap'
import Config from '@arcgis/core/config'
import MapView from '@arcgis/core/views/MapView'
import ScaleBar from '@arcgis/core/widgets/ScaleBar'
import Legend from '@arcgis/core/widgets/Legend'

Config.apiKey = 'xxx'
const webmap = new WebMap({
  portalItem: {
    id: "41281c51f9de45edaf1c8ed44bb10e30"
  }
});
const view = new MapView({
  map: webmap,
  container: 'div',
})

const scalebar = new ScaleBar({
  view: view
});

view.ui.add(scalebar, "bottom-left");

const legend = new Legend ({
  view: view
});
view.ui.add(legend, "top-right");