博客园

vue3中使用arcgis

安装

@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

<template>
  <div class="gis">
    <div ref="mapRef" class="map"></div>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"

const mapRef = ref(null)
let mapView: any = null

onMounted(() => {
  initMap()
})

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

  mapView = new MapView({
    map,
    container: mapRef.value,
    center: [120.28985, 31.54225],
    zoom: 13,
  })

  mapView.ui._removeComponents(['attribution']) // 去掉arcgis的logo或标识
}
</script>
<style scoped lang="less">
.gis {
  width: 100%;
  height: 99.6vh;
}
.map {
  width: 100%;
  height: 100%;
}

// 去除点击时出现的黑框
:deep(.esri-view-surface) {
  &:after {
    display: none;
  }
}

</style>

常用依赖

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 [] 您可以提供一个字符串数组，表示要从输出捆绑包中排除的模块。例如，您可能希望排除未使用的图层。

附：
本文参考 ArcGis中文网

posted @ 2023-08-30 09:56  ZerlinM  阅读(1244)  评论(0)  编辑  收藏  举报