请在vue中调用arcgis api来创建地图并可以添加点位数据在地图上

好的，我可以为您提供实现的步骤，具体如下：

1. 在Vue项目中引入ArcGIS API for JavaScript，可以使用以下的CDN链接：

<script src="https://js.arcgis.com/4.18/"></script>

2. 创建一个地图容器，可以在Vue的模板中添加以下代码：

<template>
  <div id="mapView"></div>
</template>

3. 在Vue的script中初始化地图和MapView实例，并将其挂载到地图容器上：

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

export default {
  name: 'MapComponent',
  data() {
    return {
      mapView: null
    }
  },
  mounted() {
    // 加载ArcGIS API for JavaScript模块
    loadModules(['esri/Map', 'esri/views/MapView']).then(([Map, MapView]) => {
      // 创建地图实例
      const map = new Map({
        basemap: 'streets'
      });
      // 创建MapView实例并挂载到地图容器上
      this.mapView = new MapView({
        container: 'mapView',
        map: map,
        center: [121.47, 31.23],
        zoom: 10
      });
    });
  }
}
</script>

4. 添加点位数据到地图上，可以在Vue的methods中添加以下代码：

addPoint() {
  // 加载ArcGIS API for JavaScript模块
  loadModules(['esri/Graphic']).then(([Graphic]) => {
    // 创建点位数据
    const point = {
      type: 'point',
      longitude: 121.47,
      latitude: 31.23
    };
    // 创建点位数据的符号
    const pointSymbol = {
      type: 'simple-marker',
      color: [226, 119, 40],
      outline: {
        color: [255, 255, 255],
        width: 2
      }
    };
    // 创建点位数据的Graphic实例
    const pointGraphic = new Graphic({
      geometry: point,
      symbol: pointSymbol
    });
    // 将点位数据添加到地图上
    this.mapView.graphics.add(pointGraphic);
  });
}

5. 在Vue的模板中添加一个按钮，用于触发添加点位数据的方法：

<template>
  <div>
    <div id="mapView"></div>
    <button @click="addPoint">添加点位数据</button>
  </div>
</template>

这样，您就可以在Vue中调用ArcGIS API for JavaScript来创建地图并添加点位数据了。当然，您还可以根据自己的需求来进一步定制和扩展地图功能。