地图 - Map
约 354 字大约 1 分钟
地图 - 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
})