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

最新推荐文章于 2024-08-01 15:12:32 发布

小汪同学→_→

最新推荐文章于 2024-08-01 15:12:32 发布

阅读量430

点赞数 6

分类专栏： webGis-arcgis 文章标签： vue.js webgl

本文链接：https://blog.csdn.net/QDxin_xyz/article/details/139390294

版权

webGis-arcgis 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在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;
}