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"
]