地图 - Map

官网链接：https://developers.arcgis.com/javascript/latest/maps-2d/

常用方法

方法	描述
add()	将一个图层添加到图层集合中。
addMany()	将一个图层或图层数组添加到图层集合中。
remove()	从图层集合中移除指定的图层。
removeMany()	移除指定的多个图层。
removeAll()	移除所有图层。
reorder()	改变图层顺序。

图层

添加图层

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

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

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

其他方法

map.add(new GraphicsLayer())

map.layers.add(new GraphicsLayer())

map.layers.push(new GraphicsLayer())

map.layers.addMany([new GraphicsLayer(), new GraphicsLayer()])

删除图层

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

const graphicsLayer = new GraphicsLayer()

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

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

map.remove(graphicsLayer)

删除多个

map.removeMany([graphicsLayer])

删除所有

map.removeAll()

中心点

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

限制缩放级别

const mapView = new MapView({
  map,
  container: 'js_map',
  constraints: {
    minZoom: 3, // 最小缩放级别
    maxZoom: 15 // 最大缩放级别
  }
})

经纬度坐标转屏幕坐标

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

屏幕坐标转经纬度坐标

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