地图控件 - Widget

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

常用方法

方法	描述
add()	将一个或多个 HTML 组件或控件添加到用户界面中。
empty()	从给定位置移除所有组件。
find()	根据控件或 DOM ID 查找一个组件。
move()	将一个或多个用户界面组件移动到指定位置。
remove()	从用户界面中移除一个或多个 HTML 组件或控件。

指南针控件

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 即存在，可以通过 move 方法移动位置。

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

删除控件

删除指定控件

如：删除缩放控件

mapView.ui.remove("zoom")
// 或
mapView.ui.remove(mapView.ui.find('zoom'))

删除指定位置所有控件

如：删除左上方所有控件

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

批量删除控件

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

mapView.ui.remove([ compass, "zoom" ]);

移动控件

移动多个控件到指定位置

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

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

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

测量控件

官网地址：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-measurement

<script setup lang="ts">
import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import Measurement from "@arcgis/core/widgets/Measurement"

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

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

const measurement = new Measurement({ view: mapView })


// 处理距离测量
const handleMeasureDistance = () => {
  measurement.activeTool = "distance";
}

// 处理面积测量
const handleMeasureArea = () => {
  measurement.activeTool = "area";
}

// 处理清除测量
const handleMeasureClear = () => {
  measurement.clear();
}
</script>

<template>
  <button @click="handleMeasureDistance">测量距离</button>
  <button @click="handleMeasureArea">测量面积</button>
  <button @click="handleMeasureClear">测量清除</button>
</template>