地图控件 - Widget

指南针

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

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

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

const compass = new Compass({
  view: mapView,
})
mapView.ui.add(compass, {
  position: "top-right"
})

打印

import print from "@arcgis/core/widgets/print"

const print = new Print({
  view: mapView,
  printServiceUrl:
    "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
})
mapView.ui.add(print, {
  position: "top-right",
})

缩放

缩放是默认地图UI控件，初始化 MapView 即存在，不过也可以修改其显示位置。

mapView.ui.move('zoom', 'bottom-right')

删除控件

删除指定位置指定控件

如：删除左下脚的缩放控件

mapView.ui.move("zoom", "bottom-left")

删除指定位置所有控件

如：删除左上方所有控件

mapView.ui.empty('top-left')

移动控件

移动多个控件到指定位置

// compass 和 toggle 是实例控件，zoom是默认控件
mapView.ui.move([ compass, toggle, "zoom" ], "bottom-right")

移动指定控件到指定索引位置

// legend图例控件是实例控件
mapView.ui.move({component: legend, position: "top-right", index: 0})