vue使用esri-loader地图显示中文

在 Vue 中使用 esri-loader 加载 ArcGIS API for JavaScript 并显示中文地图，可以按照以下步骤进行操作：

1. 首先，确保已经安装了 esri-loader 库，可以通过 npm 进行安装：

npm install esri-loader --save

2. 在需要使用地图的组件中，引入 esri-loader 和 ArcGIS 相关资源：

<template>
  <div id="map-view"></div>
</template>

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

export default {
  name: 'MapView',
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      // 加载地图模块和相关资源
      const [Map, MapView] = await loadModules(['esri/Map', 'esri/views/MapView'], {
        css: true, // 加载 CSS 文件
      });

      // 创建地图实例
      const map = new Map({
        basemap: 'streets',
      });

      // 创建地图视图实例
      const view = new MapView({
        container: 'map-view',
        map,
      });

      // 设置地图视图的中心和缩放级别
      view.center = [114.07, 22.54]; // 设置中心点的经纬度坐标（这里以深圳为例）
      view.zoom = 12; // 设置缩放级别

      // 加载中文地图模块
      await loadModules(['esri/layers/WebTileLayer'], {
        url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
      }).then(([WebTileLayer]) => {
        const tileLayer = new WebTileLayer();
        map.add(tileLayer);
      });
    },
  },
};
</script>

<style>
#map-view {
  height: 500px;
}
</style>

3. 在上述代码中，首先通过 `loadModules` 方法加载需要的地图模块和相关资源。然后，创建地图实例和地图视图实例，并设置中心点和缩放级别。最后，通过加载中文地图模块（`esri/layers/WebTileLayer`）来显示中文地图。

注意：上述代码中的地图服务链接是使用的是[国家地理信息公共服务平台](http://map.geoq.cn/)提供的在线地图服务，可以根据需要选择其他地图服务链接。

希望以上信息能够帮助到你！如有任何疑问，请随时提出。