地图 - Map

图层

添加图层

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

转到中心点

goTo() 方法有过渡效果。

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

设置中心点

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

获取中心点

console.log(mapView.center)

触发地图

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

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

缩放

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.goTo({
  center: [102.92934063304513, 25.102234987110343],
  zoom: 10
})

或

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

旋转

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

获取旋转角度

console.log(mapView.rotation)

经纬度坐标转屏幕坐标

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

屏幕坐标转经纬度坐标

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