Vue + ArcGIS API for JavaScript ，加载国家天地图示例，实现按需引入地图组件（前端ruoyi-vue）

记录一下vue如何结合ArcGIS API for JavaScript实现国家天地图的加载，真正的可以实现按需引入模块。我用的前端框架是ruoyi-vue-plus。
一、首先将代码 gitee.com/JavaLionLi/… 下载下来后跑起来，这块可以参考官方文档gitee.com/JavaLionLi/… ，不详细介绍了。
二、npm下载arcgis包，我用的版本是4.23.7

npm install @arcgis/core

三、安装ncp命令

npm install ncp

四、在packjson中配置以下命令，把arcgis的资源拷贝到public下面

  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
  }

主要是这句

"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"

运行

npm run copy

五、main.js中配置arcgis资源路径，在第四步的时候已经拷贝出来了。

import '@arcgis/core/assets/esri/themes/light/main.css'
import esriConfig from '@arcgis/core/config'
esriConfig.assetsPath = './assets'

六、编写加载国家天地图的代码
gjtdt.vue

<template>
  <div>
    <div id="mapViewDiv" class="card-item" />
  </div>
</template>

<script>
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
import SceneView from '@arcgis/core/views/SceneView'
import Map from '@arcgis/core/Map'

export default {
  name: 'Gjtdt',
  data() {
    return {
      mapApp: {
        zoom: 14,
        center: [108.458333, 22.756929],
        basemap: 'streets',
        draw: null,
        legend: null,
        viewPadding: {
          top: 0,
          bottom: 0
        },
        uiPadding: {
          right: 15,
          bottom: 15
        },
        map: null,
        mapView: null,
        leftPanelShow: true,
        mode: '2d',
        sceneView: null,
        activeView: null,
        searchWidgetNav: null,
        action: null,
        containerMap: 'mapViewDiv'
      },
      token: ''
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      var tiandituBaseUrl = 'http://{subDomain}.tianditu.gov.cn' // 天地图服务地址
      this.mapApp.map = new Map({
        basemap: 'topo-vector',
        ground: 'world-elevation',
        logo: false
      })

      const mconfig = {
        container: this.mapApp.containerMap,
        map: this.mapApp.map,
        zoom: this.mapApp.zoom,
        center: this.mapApp.center,
        padding: this.mapApp.viewPadding,
        ui: {
          padding: this.mapApp.uiPadding
        }
      }

      this.mapApp.mapView = new SceneView(mconfig)
      // 球面墨卡托投影矢量底图
      var tiledLayer = new WebTileLayer({
        urlTemplate: tiandituBaseUrl + '/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk=' + this.token,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
      })
      // 矢量标注(球面墨卡托投影)
      var tiledLayerAnno = new WebTileLayer({
        urlTemplate: tiandituBaseUrl + '/DataServer?T=cia_w?T=vec_c/wmts&x={col}&y={row}&l={level}&tk=' + this.token,
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
      })
      // 将天地图底图添加到map上
      this.mapApp.map.add(tiledLayer)
      // 标注添加到map上
      this.mapApp.map.add(tiledLayerAnno)
    }
  }
}
</script>

<style  scoped>
.card-item {
  height: 900px;
  border: 1px solid #aaa;
}
  #mapViewDiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

附录： packpage.json

{
  "name": "ruoyi-vue-plus",
  "version": "4.3.1",
  "description": "RuoYi-Vue-Plus后台管理系统",
  "author": "LionLi",
  "license": "MIT",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "keywords": [
    "vue",
    "admin",
    "dashboard",
    "element-ui",
    "boilerplate",
    "admin-template",
    "management-system"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
  },
  "dependencies": {
    "@arcgis/core": "4.23.7",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
    "core-js": "3.25.3",
    "echarts": "4.9.0",
    "element-ui": "2.15.10",
    "esri-loader": "^3.6.0",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",
    "highlight.js": "9.18.5",
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.0.0-rc.1",
    "ncp": "^2.0.0",
    "nprogress": "0.2.0",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "vue": "2.6.12",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-meta": "2.4.0",
    "vue-router": "3.4.9",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.6",
    "@vue/cli-plugin-eslint": "4.4.6",
    "@vue/cli-service": "4.4.6",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "4.1.0",
    "compression-webpack-plugin": "5.0.2",
    "connect": "3.6.6",
    "eslint": "7.15.0",
    "eslint-plugin-vue": "7.2.0",
    "lint-staged": "10.5.3",
    "runjs": "4.4.2",
    "sass": "1.32.13",
    "sass-loader": "10.1.1",
    "script-ext-html-webpack-plugin": "2.1.5",
    "svg-sprite-loader": "5.1.1",
    "vue-template-compiler": "2.6.12"
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

加载效果