在vue3 项目中 想要使用arcgis.js开发webGis有许多方法 这里推荐使用的是@arcgis/core插件,博主这里使用的是4.28.10版本
安装依赖项
npm i @arcgis/core
导入相关依赖并使用
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;
}
html
<div id="arcgis-container"></div>