Angular ES Module方式引入ArcgisAPI

Angular ES Module方式引入ArcgisAPI

一、新建项目，安装包

    npm install @arcgis/core

    npm install ncp -g 

copy会用到ncp包

二、修改package.json中的命令

"scripts": {
    "ng": "ng",
    "start": "npm run copy && ng serve",
    "build": "npm run copy && ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "copy":"ncp ./node_modules/@arcgis/core/assets ./src/assets"
  },

修改启动命令以及copy@arcgis/core中的静态文件到src/assets文件夹下

三、引入arcgisAPI所需要的样式文件

在index.html文件引入

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

我用的less编写样式，也可直接在style.less文件中引入

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

四、在ts文件中引入包即可使用

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

   const map = new Map({
      basemap: "osm"
    })
    const mapView = new MapView({
      container: "mapView",
      map: map,
      zoom: 15,
      center: [116, 39]
    })

效果图如下

五、warning问题

浏览器报如下警示
xxx\node_modules@arcgis\core\intl\moment.js depends on ‘moment/locale/ar-ly.js’. CommonJS or AMD dependencies can cause optimization bailouts.
在angular.json的bulid-options下加如下代码，重新启动项目即可

 "allowedCommonJsDependencies": [
              "moment",
              "moment/locale/zh-cn"
            ]