【vue3+ArcGIS5】web开发中的地图功能从入门到实战一:显示一个基础的地图

风清云淡_A2026-04-03 13:14

ArcGIS是一个比较专业的地图插件了，可以帮助实现很多的2d,3d的可视化效果。使用范围还相当的广泛，这个专题我们来研究下它的一些使用方法。

实现效果

实现步骤

新建一个新的vite+vue3项目，工程结构如下
在index.html中引入依赖的插件js

js 复制代码

<script type="module" src="https://js.arcgis.com/5.0/"></script>

在component文件中新建一个组件来显示我们的地图组件

html 复制代码

<script setup>
    
</script>

<template>
    <h2>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</h2>
    <div class="container">
        <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
            <arcgis-zoom slot="top-left"></arcgis-zoom>
        </arcgis-map>
    </div>
</template>

<style>
   .container {
      height: 100%;
      margin: 0;
    }
</style>

清空App.vue中的默认信息，引入我们的组件

html 复制代码

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import ArcGisComp from './components/ArcGisComp/second.vue'
</script>

<template>
  <HelloWorld />
  <ArcGisComp />
</template>

启动项目

bash 复制代码

pnpm dev

最后就可以看到我们的地图显示效果。