平面地图

简介

地图 (Map) 是一个容器, 用于管理 layer 和 basemap 的引用.

视图 (View) 用于显示地图层, 以及处理用户交互, 弹窗 (popup), 小工具 (widget), 以及地图定位 (map location) 等.

使用地图

working with maps

创建地图使用 Map 类, Map 对象需要交给 View 对象来显示.

  • 2D 地图使用 MapView 类
  • 3D 地图使用 SceneView 类

创建地图

创建地图的一个方法就是实例化 Map 类, 需要指定 basemap 和 一组 layer.

const myMay = new Map({
  basemap: 'xxxx',  // 指定底图
  layers: [ ... ]   // 使用到的层
})
const mapView = new MapView({
  map: myMap,
  center: [经度, 纬度],
  zoom: ...,
  container: ...,
})

从 Web Map 创建地图

第二个创建方法是从 web map (2D) 加载, 或从 web scene (3D) 加载.

web map 或 web scene 是 JSON 格式的数据, 其中包含地图与场景的配置. 他们一般结合 ArcGIS Online map viewer 或 ArcGIS Online scene viewer 结合使用.

然后演示了参考代码, 这里略.

使用视图

视图 view 的主要功能就是展示层, 弹窗, 小部件, 处理用户交互, 以及指定范围.

创建视图

涉及到的类为: MapView, 用于展示 2D 地图, SceneView 用于展示 3D 场景.

要展示地图 (Map), 需要为视图提供一个 Map 实例, 以及一个用于展示地图的页面元素 (或 id 选择器).

在纯 JS-DOM 模型开发中可以使用 ID 选择器, 在 Vue 开发中可以直接使用 ref 获得元素引用, 将其元素置于此.

const view = new MapView({
  map: myMap,
  container: 元素
})

设置地图的可视区域

在初始化视图的时候可以设置, center, zoom, 以及 scale 属性来控制可视范围.

也可以后期使用编程的方式设置相关属性.

const view = new MapView({
  center: [-112, 38]
  zoom: 13
})

将视图移至另一位置

goTo 方法可以使用平滑的方式将视图移动至另一个位置区域. 该方法常用于从某个位置飞到另一个位置的效果.

该方法可以接收 Geometry, Graphic, 以及 Viewpoint 对象作为参数, 附加参数为动画控制.

image-20231114102238961

view.goTo({
  { center: [-114, 39] },
  { duration: 5000 }
})

与制图交互

视图还负责与用户进行交互, 并弹出消息层. 视图提供了很多内置事件:

image-20231114102601743

文档中同时列出了所有事件的参数.

view.popupEnabled = false;  // Disable the default popup behavior

view.on("click", function(event) { // Listen for the click event
  view.hitTest(event).then(function (hitTestResults){ // Search for features where the user clicked
    if(hitTestResults.results) {
      view.openPopup({ // open a popup to show some of the results
        location: event.mapPoint,
        title: "Hit Test Results",
        content: hitTestResults.results.length + "Features Found"
      });
    }
  })
});

在视图中添加小部件

视图还提供了一个 wiget 容器, 用于补充功能. 它可以添加 Wiget 小部件, 也可以支持放置 HTML 元素.

view.ui 提供了 DefaultUI 容器, 用于放置小部件与 HTML 元素.

使用 view.ui.add() 方法进行添加.

const search = document.createElement('div')
const input = document.createElement('input')
const button = document.createElement('button')
button.innerText = '点击按钮'
button.addEventListener('click', () => {
  alert('一段测试: ' + input.value)
})

search.appendChild(input)
search.appendChild(button)

view.ui.add(search, 'top-left')
Last Updated:
Contributors: jk