vue中调用arcgisserver地图服务

您可以在Vue项目中使用ArcGIS API for JavaScript来调用ArcGIS服务器地图服务。首先，您需要将ArcGIS API添加到您的项目中。

您可以使用以下命令安装ArcGIS API for JavaScript

npm install esri-loader

然后在Vue组件中加载ArcGIS API并使用它来调用地图服务。您可以使用以下代码示例作为参考：

<template>
  <div id="map"></div>
</template>
<script>
import { loadModules } from 'esri-loader'

export default {
  name: 'Map',
  data() {
    return {
      map: null,
      view: null
    }
  },
  async created() {
    const [Map, MapView] = await loadModules([
      'esri/Map',
      'esri/views/MapView'
    ])

    this.map = new Map({
       basemap: 'streets-navigation-vector'
    })

    this.view = new MapView({
      container: "map",
      map: this.map,
      center: [-118.80500, 34.02700],
      zoom: 13
    })

    const layer = {
      url:
        'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer'
    }

    const mapLayer = await loadModules(['esri/layers/MapImageLayer'])
      .then(([MapImageLayer]) => {
        return new MapImageLayer(layer)
      })

    this.map.add(mapLayer)
  }
}
</script>

该组件使用esri-loader库加载ArcGIS API for JavaScript，并在地图中使用MapImageLayer来添加地图服务。请注意，此示例使用的是静态的地图服务。如果您需要使用动态地图服务，请使用DynamicMapLayer。

请注意，您需要使用合适的ArcGIS许可证才能使用ArcGIS API for JavaScript和ArcGIS服务器地图服务。同时，不要忘记在Vue项目中包含ArcGIS API for JavaScript所需的样式表和资源。