526互联

vue3中使用arcgis

发布时间 2023-08-30 10:25:30作者: ZerlinM

安装

@arcgis/core方式
通过@arcgis/core加载地图资源，默认是半本地化的，因为 assests 资源是通过 https://js.arcgis.com 在线请求的。

npm install @arcgis/core

项目使用

main.ts

import "@arcgis/core/assets/esri/themes/dark/main.css"

app.vue

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"

const map = new Map({
  basemap: 'dark-gray',
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
})

常用依赖

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import BaseMap from "@arcgis/core/BaseMap"
import Graphic from "@arcgis/core/Graphic"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import WMTSLayer from "@arcgis/core/layers/WMTSLayer"
import WebTileLayer from "@arcgis/core/layers/WebTileLayer"
import Compass from "@arcgis/core/widgets/Compass"
import Sketch from "@arcgis/core/widgets/Sketch"

配置 assetsPath

  • 原始 copy 方式
    根据项目依赖或报错提示把相关通过 https://js.arcgis.com 域名加载的 assets 资源复制到 public 目录下，然后在 main.ts 入口文件中修改 assetsPath 配置即可。
import esriConfig from "@arcgis/core/config.js"
esriConfig.assetsPath = "/assets"

即：从 node_modules/@arcgis/assets/ 下找资源，对应放到 public/assets/ 下，保持目录结构一致。
将copy命令添加到package.json中，操作如下：
全局安装ncp

npm install ncp -g

package.json

"script": {
  "start": "npm run copy && react-scripts start",
  "build": "npm run copy && react-scripts build",
  "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
}

官方说明：managing-assets-locally配置

如果您想将 @arcgis/core/assets 本地复制到构建中，则此插件非常有用。如果您没有这个要求，您可能不需要使用此插件。此外，该插件还可用于使用其附加功能来最小化构建输出。

npm install --save-dev @arcgis/webpack-plugin

// webpack.config.js
const ArcGISPlugin = require("@arcgis/webpack-plugin")

// 添加到插件配置
module.exports = {
  ...
  plugins: [new ArcGISPlugin()]
  ...
}

排除不需要的模块

// webpack.config.js
...
plugins: [
  new ArcGISPlugin({
    // 排除不需要的模块
    userDefinedExcludes: [
      "@arcgis/core/layers/BingMapsLayer",
      "@arcgis/core/layers/CSVLayer",
      "@arcgis/core/layers/GeoRSSLayer",
      "@arcgis/core/layers/ImageryLayer",
      "@arcgis/core/layers/KMLLayer",
      "@arcgis/core/layers/MapImageLayer",
      "@arcgis/core/layers/OpenStreetMapLayer",
      "@arcgis/core/layers/StreamLayer",
      "@arcgis/core/layers/WMSLayer",
      "@arcgis/core/layers/WMTSLayer",
      "@arcgis/core/layers/WebTileLayer"
    ]
  })
],
...

本地化

// webpack.config.js
module.exports = {
  ...
  plugins: [
    new ArcGISPlugin({
      locales: ['en', 'es']
    })
  ]
  ...
}

feature

// webpack.config.js
...
plugins: [
  new ArcGISPlugin({
    // 从构建中排除3D模块
    features: {
      "3d": false
    }
  })
],
...

配置项说明

选择 默认值 描述
copyAssets true 插件是否应该复制资产。
assetsDir assets 要复制的目录名 @arcgis/core/assets。
locales undefined 您要在构建输出中包含的 t9n 本地化。如果未指定，则所有本地化都将可用。
features {}
userDefinedExcludes [] 您可以提供一个字符串数组，表示要从输出捆绑包中排除的模块。例如，您可能希望排除未使用的图层。