Arcgis For Javascript 4.x vue2 项目使用

 下载 @arcgis/core

 npm install @arcgis/core

复制 @arcgis/core/assets ./public/assets" 文件

在package.json文件

"scripts": { 
    "dev": "vue-cli-service serve",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
}

main.js 中引入配置和样式文件

//配置
import esriConfig from "@arcgis/core/config";
esriConfig.assetsPath = "/assets";
esriConfig.fontsUrl =  "/assets/esriFonts";  //字体
//样式引入
import '@arcgis/core/assets/esri/themes/dark/main.css';
//全局样式
import '@/styles/index.scss' // global css
import '@/styles/arcgis.scss' // global arcgis css

Arcgis For Javascript使用

将Arcgis For Javascript 创建一个clss 引入到需要vue文件中使用

.js文件

/**
 * 地图组件  
 */
// arcgis map
import Map from '@arcgis/core/Map'
import Ground from "@arcgis/core/Ground"
import Basemap from '@arcgis/core/Basemap'
//arcgis view
import MapView from '@arcgis/core/views/MapView'
import SceneView from '@arcgis/core/views/SceneView'
// arcgis layer 
import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import TileLayer from '@arcgis/core/layers/TileLayer'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import ElevationLayer from "@arcgis/core/layers/ElevationLayer"
class ArcGIS {
  constructor() {
    this.expand = {}
    this.map = null // 地图
    this.view = null // 地图容器
    this.SceneView = null // 地图容器
    this.zoom = null //放大缩小按钮
    this.layers = []
    this.layers3D = []
    this.layer = []
    this.mapView=null //鹰眼view
    this.overviewMap=null
    this.mapView3D=null
  }
  //设置arcigs类的方法
  init（）{}
}

vue 文件

html内容，div必须给定高宽和id

<div id="map" class='map1' :style="{height:mapheight}" v-show="!is3d"></div>

js代码引入并使用arcgis 类，创建实例，调用方法

import ArcGIS from './arcgis.js'

//创建实例
this.mapObj = new ArcGIS()
调用方法
this.mapObj.init('map',array)