vue3 + arcgis.js4.x---初始化地图_vue+arcgis

在vue3 项目中 想要使用arcgis.js开发webGis有许多方法 这里推荐使用的是@arcgis/core插件，博主这里使用的是4.28.10版本
安装依赖项

npm i @arcgis/core
1

导入相关依赖并使用

import '@arcgis/core/assets/esri/themes/light/main.css' // 样式文件
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Basemap from '@arcgis/core/Basemap'
import TileInfo from '@arcgis/core/layers/support/TileInfo.js'
import TileLayer from '@arcgis/core/layers/TileLayer'
import Graphic from '@arcgis/core/Graphic'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import SpatialReference from '@arcgis/core/geometry/SpatialReference'
import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import TextSymbol from '@arcgis/core/symbols/TextSymbol'
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'
import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol'
import Sketch from '@arcgis/core/widgets/Sketch'
import Draw from '@arcgis/core/views/draw/Draw'
import * as webMercatorUtils from '@arcgis/core/geometry/support/webMercatorUtils'

// 初始化gis地图
function initMap() {
  // 创建view视图
  const customMap = new MapView({
    container: 'arcgis-container',
    map: new Map({
      basemap: new Basemap({
        baseLayers: [
          new TileLayer({
            url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 图层url
          })
        ]
      })
    }),
    popup: {
      dockEnabled: true,
      collapseEnabled: false,
      dockOptions: {
        buttonEnabled: false, // 取消浮窗popup停靠按钮
        breakpoint: true // 是否在点击的地方显示
      }
    },
    center: [117.227239, 31.820586], // 中心点坐标
    zoom: 9, // 地图层级
    logo: false,
    slider: true,
    constraints: {
      lods: TileInfo.create().lods,
      minScale: 25000000,
      maxScale: 0
    }
  })
  customMap.ui.remove('attribution')
  customMap.ui.empty('top-left')
  return customMap
}

onMounted(() => {
  window.customMap = initMap()
})

<style lang="scss" scoped>
#arcgis-container {
  height: 100vh;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

html

<div id="arcgis-container"></div>
1