vue-arcgis-map

基于 Vue 3 与 @arcgis/core 的地图组件库：地图初始化、底图切换（含自定义矢量示例）、工具栏（缩放、复位、测距、测面、绘图、清绘）。

安装依赖

npm install map-tool-vue vue @arcgis/core

引入依赖与注册

import { createApp } from 'vue'
import App from './App.vue'
import VueArcgisMap from 'map-tool-vue'
import '@arcgis/core/assets/esri/themes/light/main.css'

const app = createApp(App)
app.use(VueArcgisMap)
app.mount('#app')

使用示例

<template>
  <div style="position: relative">
    <ArcgisMap ref="mapRef" width="100%" height="600px" @ready="onReady" />
    <template v-if="view && sketchLayer">
      <BasemapSwitch :view="view" />
      <MapToolbar :view="view" :sketch-layer="sketchLayer" />
    </template>
  </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'

const mapRef = ref(null)
const view = shallowRef(null)
const sketchLayer = shallowRef(null)

const onReady = ({ view: v, sketchLayer: layer }) => {
  view.value = v
  sketchLayer.value = layer
}
</script>

ArcgisMap 支持以下尺寸参数：

• width：默认 100%，支持 String | Number（Number 按 px 处理）
• height：默认 70vh，支持 String | Number（Number 按 px 处理）

按需引入（不全局注册）

import { ArcgisMap, BasemapSwitch, MapToolbar } from 'map-tool-vue'

说明

• MapView、Layer 等 ArcGIS 对象不要用 ref() 做深度响应式，请用 shallowRef（或 markRaw），否则会出现 __accessor__ 与 Vue Proxy 冲突。本库子组件内部已对 props 做了 toRaw 处理，但业务侧仍建议用 shallowRef 保存 view。
• 地图与测量能力依赖 Esri 服务与许可策略，部署与密钥请按官方文档配置。
• 若使用 UMD 产物，请注意 Rollup 对 default + 具名导出同时存在时的用法；推荐 ESM 方式引用。

开发文档

开发、调试、构建和发布相关内容已迁移至 DEVELOPMENT.md。