arcgis使用es modules

Install the modules into your project:

npm install @arcgis/core

Then use import statements to load individual modules.

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

Copy assets

You will need to copy the API’s assets, which includes styles, images, fonts, and localization files, from the @arcgis/core/assets folder to your build folder. A simple way to accomplish this is to configure an NPM script that runs during your build process. For example, use npm to install ncp and configure a script in package.json to copy the folder. Here’s a React example:

// package.json
{
    "script": {
        "start": "npm run copy && vue-cli-service serve",
        "build": "npm run copy && vue-cli-service build",
        "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
    }
}

可以看到copy命令里面使用了ncp这个命令，所以我们要通过以下命令来全局安装一下这个工具：

npm install ncp -g

然后在Vue项目的"main.js"或者"app.vue"文件中通过如下命令引入ArcGIS API for JavaScript所需的样式文件包，如下：

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

最后在组件代码文件顶部位置引入所需要的API模块

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
initMap(){
    const map = new Map({
        basemap: 'osm',
    });

    const view = new MapView({
        container: 'mapview',
        map: map,
        zoom: 10,
    });
}