ArcGIS API for JavaScript 4.18+基于ES Modules的本地化设置@arcgis/core local Vue3版本_Higer

网络 02-07 7366

ArcGIS API for JavaScript 4.18以后的版本4.18 4.19 4.20 4.21 4.22 4.23支持ES Modules模式了，默认的API是访问CDN的，内网本地化修改，其中React版本的本地化参考链接，本篇为Vue3版本，分享出来。主要参考官网的参考文档解决的，具体链接：https://developers.arcgis.com/javascript/latest/es-modules/

步骤： 1、Vue cli创建前端工程后，终端输入yarn安装依赖，会将"@arcgis/core": “^4.22.2”,@arcgis/core下载到node_modules目录下， package.json文件内容：

{ "name": "dq-gis-vue3-esm", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@arcgis/core": "^4.22.2", "core-js": "^3.8.3", "element-plus": "^2.0.2", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }

2、将./node_modules/@arcgis/core/assets文件夹内容复制到src文件夹的assets下和public文件夹下，最终目录结构如下：

3、修改App.vue，导入ArcGIS的样式

/* 导入ArcGIS的样式 */ @import "./assets/esri/themes/light/main.css";

App.vue全部代码：

<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> /* 导入ArcGIS的样式 */ @import "./assets/esri/themes/light/main.css"; #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } html, body, #app { padding: 0; margin: 0; height: 100%; width: 100%; } </style>

4、修改main.js，配置本地读取，设置portal

import esriConfig from "@arcgis/core/config.js"; esriConfig.assetsPath = "./assets"; esriConfig.portalUrl = "https://DESKTOP-FGFN0F6.arcgisonline.cn/portal";

main.js全部代码：

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import esriConfig from "@arcgis/core/config.js"; esriConfig.assetsPath = "./assets"; esriConfig.portalUrl = "https://DESKTOP-FGFN0F6.arcgisonline.cn/portal"; import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

5、目录结构 6、运行起来后效果：