安装ES模块

官方举例

将模块安装到项目中

• 可以从@ arcgis / core安装ArcGIS API for JavaScript的ES模块。

npm install @arcgis/core
//or
yarn add @arcgis/core

配置CSS，在main.js里面引入CSS样式

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

配置config.json

• Vue与@arcgis/core集成只需要将@arcgis/core/assets文件夹复制到构建中
• 由于在构建过程中，CRA并没有提供一个明确的方法来做到这一点，所以可以借助ncp复制
• ncp：异步递归文件和目录复制的工具
• 安装ncp

npm install ncp 
//or
yarn add ncp 

• 配置config.json

// package.json
{
  "scripts": {
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
    "postinstall": "npm run copy", //yarn用户改为"yarn copy"
    ...
  },
}

• 运行以下命令

npm install
//or
yarn install

示例

<template>
    <div class="mapdiv">
      <div class="home" ref="home"></div>
    </div>
</template>

<script>
import WebMap from "@arcgis/core/WebMap";
import MapView from "@arcgis/core/views/MapView";
import Bookmarks from "@arcgis/core/widgets/Bookmarks";
import Expand from "@arcgis/core/widgets/Expand";
export default {
  name: 'App',
  async mounted() {
    console.log('this.$el')
    console.log(this.$el)
    const webmap = new WebMap({
      portalItem: {
        id: "aa1d3f80270146208328cf66d022e09c",
      },
    });
    const view = new MapView({
      container: this.$refs.home,
      map: webmap,
    });
    const bookmarks = new Bookmarks({
      view: view,
      // allows bookmarks to be added, edited, or deleted
      editingEnabled: true,
    });
    const bkExpand = new Expand({
      view: view,
      content: bookmarks,
      expanded: true,
    });
    // Add the widget to the top-right corner of the view
    view.ui.add(bkExpand, "top-right");
    // bonus - how many bookmarks in the webmap?
    webmap.when(function () {
      if (webmap.bookmarks && webmap.bookmarks.length) {
        console.log("Bookmarks: ", webmap.bookmarks.length);
      } else {
        console.log("No bookmarks in this webmap.");
      }
    });
  }
}
</script>

<style scoped lang="scss">
.home{
  height: 300px;
  width: 1000px;
}
</style>

注意

• container绑定的元素一定要设置足够地图显示的宽高，不然就会出问题
• 如果将4.18+与框架或构建工具一起使用，并且未使用Dojo 1或RequireJS，则应该使用ES模块进行构建。如果没有就可以使用AMD模块构建