vue + arcgis实现测量工具

要在 Vue 中实现测量工具，可以使用 ArcGIS API for JavaScript 中提供的测量工具模块和 ArcGIS Vue 组件库中的 `esri-widget-measurement` 组件。以下是在 Vue 中实现测量工具的一般步骤：

1. 在你的 Vue 项目中导入 `esri/widgets/Measurement` 模块和 `esri/config` 模块：

import { loadModules } from 'esri-loader';
import { createApp } from 'vue';
import App from './App.vue';

loadModules([
  'esri/widgets/Measurement',
  'esri/config',
]).then(([Measurement, esriConfig]) => {
  esriConfig.apiKey = 'YOUR-ARCGIS-API-KEY';
  
  createApp(App, {
    mounted() {
      // 初始化测量工具
      const measurement = new Measurement({
        view: this.$refs.mapView,
        activeTool: 'distance',
      });

      // 将测量工具添加到地图
      this.$refs.mapView.ui.add(measurement, 'top-right');
    }
  }).mount('#app');
});

2. 在 Vue 组件中添加 `arcgis-map` 和 `arcgis-map-view` 组件：

<template>
  <arcgis-map>
    <arcgis-map-view ref="mapView" :mapProperties="mapProperties" />
  </arcgis-map>
</template>

<script>
import { loadModules } from 'esri-loader';

export default {
  data() {
    return {
      mapProperties: {
        basemap: 'topo-vector',
        center: [-118.805, 34.027], // 地图中心点坐标
        zoom: 13, // 地图缩放等级
      },
    };
  },
};
</script>

3. 在组件中添加 `esri-widget-measurement` 组件：

<template>
  <arcgis-map>
    <arcgis-map-view ref="mapView" :mapProperties="mapProperties" />
    <esri-widget-measurement
      viewName="mapView"
      :measurementProperties="measurementProperties"
    />
  </arcgis-map>
</template>

<script>
import { loadModules } from 'esri-loader';

export default {
  data() {
    return {
      mapProperties: {
        basemap: 'topo-vector',
        center: [-118.805, 34.027], // 地图中心点坐标
        zoom: 13, // 地图缩放等级
      },
      measurementProperties: {
        activeTool: 'distance',
      },
    };
  },
};
</script>

在此示例中，我们将 `esri-widget-measurement` 组件添加到了地图视图中，并设置了 `viewName` 和 `measurementProperties` 属性，其中 `viewName` 指定了组件绑定的地图视图，`measurementProperties` 指定了测量工具的属性，例如测量类型、单位等。

使用以上步骤，您可以在 Vue 中实现测量工具。如果您需要更多的自定义功能，可以参考 ArcGIS API for JavaScript 和 ArcGIS Vue 组件库的官方文档。