集成到应用 - Integration

@arcgis/core方式

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

npm install @arcgis/core

指定版本号

npm install @arcgis/core@4.24

项目使用

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/ 下，保持目录结构一致。

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

混合项目配置说明

场景：前端打包资源，放到后端项目里使用。

如果使用了vite脚手架，并增加了base配置，如下：

{
	base: '/vm/'
}

且访问路径为：https://www.xxx.com/vm/ 开头，另静态资源目录放在 public/vm/assets 下的，那 asssetsPath 路径也要相应修改，如下：

esriConfig.assetsPath = "/vm/assets"

插件方式 @arcgis/webpack-plugin

需要 arcgis-js-api 版本4.18.0或更高版本或 @arcgis/core。

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

esri-loader方式

esri-loader是一款小巧的库，旨在帮助您在使用流行 JavaScript 框架和打包器的应用程序中使用 ArcGIS JavaScript AMD 模块的 ArcGIS API。

安装 esri-loader

npm i esri-loader

加载模块：

const [Map, MapView] = await loadModules([
  "esri/Map",
  "esri/views/MapView"
])

将 esri-loader 配置为使用版本 4.24，并从 ArcGIS CDN 获取该版本的 CSS：

const [Map, MapView] = await loadModules([
  "esri/Map",
  "esri/views/MapView"
], {version: '4.24', css: true})

其他配置项：

名称	类型	默认值	描述
version	string	'4.25'	将使用 Esri 的 CDN 托管的 ArcGIS API 版本。
url	string	undefined	将使用 ArcGIS API 托管构建的 URL。如果同时传递版本和 URL，则 URL 将使用。
css	string 或 boolean	undefined	如果传递一个字符串，则认为它是要加载的 CSS 文件的 URL。使用 css: true 来从 CDN 加载版本 CSS。
insertCssBefore	string	undefined	在使用 CSS 时，将 stylesheet 的 <link> 标签插入到第一个匹配此 CSS 选择器的 HTML 元素之前。请参阅覆盖 ArcGIS 样式。

require方式

<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>

<script>
  require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
    const map = new Map({
      basemap: "dark-gray"
    })

    const view = new MapView({
      container: "viewDiv",
      map: map,
      zoom: 4,
      center: [15, 65] // 经度, 纬度
    })
  })
</script>