在vue3中使用ArcGIS API for JavaScript

在网上很少有讲如何在Vue3中创建Arcgis的，所以我在这分享一下一个最基本的创建流程

我这教程需要对Vue3有一个最基本的了解才可以使用

创建新地图

基于 vue3

创建Vue3项目

npm create vue@latest

创建的过程我就省略了，官网上很详细了（快速上手 | Vue.js）

使用 npm 安装依赖arcgis

npm install @arcgis/core

安装 ncp（如何安装过就不需要安装了）

npm install ncp

在 package.json添加命令 并运行

{
  "scripts":{
    ..........
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
  }
}

运行命令

npm run copy

在 main.js导入 arcgis 样式依赖

import "@arcgis/core/assets/esri/themes/dark/main.css"
import esriConfig from "@arcgis/core/config.js"
esriConfig.assetsPath = "./assets"
esriConfig.fontsUrl = "/assets/esri-fonts"

在 views 文件夹下面创建一个 map.vue文件

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

设置地图显示的大小

<style scoped>
  #viewDiv {
    width: 100%;
    height: 100%;
  }
</style>

设置地图图层和渲染的样式

<script setup>
  import Map from '@arcgis/core/Map.js'
  import MapView from '@arcgis/core/views/MapView.js'

  const map = new Map({
    basemap: 'topo-vector'
  })
  const view = new MapView({
    map: map,
    zoom: 4,
    center: [111.46160, 40.4943], // 设置地图中心点   [经度，纬度]
    // 去除版权信息
    ui: {
      components: []
    }
  })
</script>

完整的写法

<script setup>

import Map from '@arcgis/core/Map.js'

import MapView from '@arcgis/core/views/MapView.js'

import { ref, onMounted } from 'vue'

const map = new Map({

    basemap: 'topo-vector'

})

const view = new MapView({

    map: map,

    zoom: 4,

    center: [111.46160, 40.4943], // 设置地图中心点   [经度，纬度]

    // 去除版权信息

    ui: {

        components: []

    }

})

onMounted(() => {

    view.container = 'viewDiv'

})

</script>

<template>

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

</template>

<style scoped>

#viewDiv {

    width: 100%;

    height: 100%;

}

</style>