【ArcGIS API】Vue3+Vite+ArcGIS API for JavaScript——加载二维地图为例

ArcGIS API for JavaScript系列文章汇总：【ArcGIS API】汇总篇-CSDN博客

效果

具体实现

安装arcgis包

npm install @arcgis/core

将项目目录中node_modules\@arcgis\core\assets的文件复制到public/asstes中 

main.js中全局引入css样式

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

 组件中编写

<template>
  <div id="viewDiv" class="viewDiv"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'

onMounted(() => {
  const map = new Map({
    basemap: 'streets', //其他基础地图：satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic
  })
  console.log(map)
  const mapView = new MapView({
    container: 'viewDiv', // Reference to the scene div created in step 5
    map: map, // Reference to the map object created before the scene
    zoom: 4, // Sets zoom level based on level of detail (LOD)
    center: [15, 65], // Sets center point of view using longitude,latitude
  })
})
</script>

<style scoped>
.viewDiv {
  height: 100vh;
  width: 100vw;
}
</style>