地图视图 - MapView

官网链接：https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html

常用方法

方法	描述
goTo()	将视图设置为给定的目标。
hitTest()	返回与指定屏幕坐标相交的每个图层的点击测试结果。
toMap()	将给定的屏幕点转换为地图点。
toScreen()	将给定的地图点转换为屏幕点。
openPopup()	在给定位置打开弹窗，内容可以通过 content 参数定义，或者根据 PopupTemplate 驱动。
closePopup()	关闭弹窗。

简单示例

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"

const map = new Map({
  basemap: 'dark-gray',
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
})

基础设置

// 设置旋转角度为 270
mapView.rotation = 270

// 设置缩放层级为 18
mapView.zoom = 18

// 设置中心点为 [-112, 38]
mapView.center = [-112, 38]

// 设置地图比例为 1:24000
mapView.scale = 24000

限定范围

import Extent from "@arcgis/core/geometry/Extent.js"

const extent = new Extent({
  xmin: -9177882,
  ymin: 4246761,
  xmax: -9176720,
  ymax: 4247967,
  spatialReference: {
    wkid: 102100
  }
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
  extent // 将覆盖缩放级别
})

常见的一些 WKID：

• 3857：Web墨卡托投影，用于大多数Web地图应用程序。
• 4326：WGS84地理坐标系，经纬度坐标系。
• 102100 / 102200：ArcGIS Online 底图使用的Web墨卡托投影。
• 3413 / 3031：南极和北极的极面投影。
• 27700：英国国家格网，适用于英格兰、威尔士和苏格兰。

背景色

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
  background: {
    color: 'red'
  }
})

弹层

禁用弹层

mapView.popupEnabled = false

手动打开弹层

mapView.openPopup({
  // ...
})

弹层停靠设置

mapView.popup = {
  dockEnabled: true,
  dockOptions: {
    position: "top-left",
    breakpoint: false
  }
}

图形（graphics）

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import Graphic from "@arcgis/core/Graphic"

const polygonGraphic = new Graphic({
  geometry: {
    type: "polygon",
    rings: [
      [  // 第1个 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]  // 和起点一样
      ], [  // 第2个 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]  // 和起点一样
      ]
    ]
  },
  symbol: {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  }
})

const map = new Map({
  basemap: 'dark-gray',
  layers: [ graphicLayer ]
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  graphics: [ polygonGraphic ]
})

// 或
mapView.graphics.add(polygonGraphic)

// 删除
mapView.graphics.remove(polygonGraphic)

中心点

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"

const map = new Map({
  basemap: 'dark-gray',
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343]
})

转到中心点

有过渡效果

mapView.goTo({
  center: [110.123141243, 33.5322342]
})

直接设置

mapView.set({center: [110.123141243, 33.5322342]})

获取center

console.log(mapView.center)

触发地图更新

可以使用设置本身中心点来触发地图更新。

mapView.set({center: [mapView.center.longitude, mapView.center.latitude]})

或

mapView.set({center: mapView.center})

缩放

初始化配置

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"

const map = new Map({
  basemap: 'dark-gray',
})

const mapView = new MapView({
  map,
  container: 'js_map',
  zoom: 3
})

动态设置

mapView.zoom = 12
// 或
mapView.set({zoom: 12})
// 或
mapView.goTo({zoom: 12})
// 或
mapView.zoom++
mapView.zoom--

获取zoom

console.log(mapView.zoom)

旋转

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"

const map = new Map({
  basemap: 'dark-gray',
})

const mapView = new MapView({
  map,
  container: 'js_map',
  rotation : 60
})

设置旋转角度

mapView.rotation = 90

获取rotation

console.log(mapView.rotation)

多参数设置

goTo方法

mapView.goTo({
  center: [102.92934063304513, 25.102234987110343],
  zoom: 10,
  rotation: 60
})

set方法

mapView.set({
  center: [102.92934063304513, 25.102234987110343],
  zoom: 10,
  rotation: 60
})

经纬度坐标转屏幕坐标

mapView.toScreen({
  x: 102.92934063304513,
  y: 25.102234987110343,
  spatialReference: {
    wkid: 4326, // WGS-84坐标系
  }
})

屏幕坐标转经纬度坐标

mapView.toMap({
  x: 23342,
  y: 32354
})