安裝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模塊構建