vue引入arcgis api

### 集成 ArcGIS JavaScript API 到 Vue.js 项目

#### 安装依赖库
为了在 Vue.js 中使用 ArcGIS JavaScript API，推荐的方法是通过 npm 来安装所需的 ES 模块。这允许更好地与现代前端工具链集成并简化版本控制。

npm install @arcgis/core

此命令会下载最新稳定版的 ArcGIS JS API 并将其保存到 `node_modules` 文件夹下[^2]。

#### 创建地图组件
创建一个新的 Vue 组件来承载 ArcGIS 地图实例：

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

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

@Component({
  name: 'EsriMapView'
})
export default class EsriMapView extends Vue {
  private view!: MapView;

  public mounted(): void {
    const map = new Map({
      basemap: 'streets-navigation-vector',
    });

    this.view = new MapView({
      container: document.getElementById('viewDiv')!,
      map,
      zoom: 10,
      center: [-118.2437, 34.0522], // Los Angeles coordinates as an example
    });
  }

  public beforeDestroy(): void {
    if (this.view) {
      this.view.container = null;
    }
  }
}
</script>

<style scoped>
#viewDiv {
  width: 100%;
  height: 600px;
}
</style>

上述代码展示了如何定义一个名为 `EsriMapView` 的 Vue 组件，在其中初始化了一个简单的街道矢量底图，并设置了视图容器的高度宽度样式[^3]。

#### 添加 CSS 资源链接
为了让应用程序能够正确显示 ArcGIS 提供的地图控件和其他 UI 元素，还需要引入官方提供的 CSS 文件。可以在项目的入口 HTML 或者公共布局文件里加入如下 `<link>` 标签：

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>

该资源指向的是轻量化主题样式的外部 CDN 版本。