Vue 3 component for ArcGIS 3.x maps with full configuration support
npm install cc-arcgis-mapVue 3 组件，用于 ArcGIS 3.x 地图的快速集成。支持完整的配置系统、MapUtil工具类以及灵活的扩展机制。
🏢 企业级内网支持 - 开箱即用的内网ArcGIS配置，无需额外设置即可使用
📍 武汉2000坐标系 - 专门优化的本地坐标支持，默认可视范围已配置
🗺️ 50+预配置图层 - 涵盖电子地图、影像、专题图等所有常用图层
🛠️ 43个实用工具方法 - 涵盖绘制、查询、测量等所有地图操作场景
- 🗺️ 完整的ArcGIS 3.x支持 - 基于esri-loader，完整支持ArcGIS 3.x API
- 🎨 零配置使用 - 开箱即用，包含完整的默认配置（50+图层、内网地址等）
- ⚙️ 灵活的全局配置 - 通过Vue插件一次性配置，所有组件自动使用
- 🛠️ 强大的MapUtil工具类 - 保留所有原有方法，支持扩展
- 📦 TypeScript支持 - 完整的类型定义和智能提示
- 🔧 Composable API - 提供useMap、useMapLayer等组合式API
- 🚀 性能优化 - 图层缓存、懒加载队列等优化机制
当前版本: v1.0.12
``bash`
npm install cc-arcgis-map@1.0.12 esri-loader或
yarn add cc-arcgis-map@1.0.12 esri-loader
> 注意: 本组件库专为内网环境优化，默认已配置内网ArcGIS服务地址。如需外网使用，请参考下方配置章节。
在应用入口文件中注册插件：
`typescript
// main.ts
import { createApp } from 'vue'
import VueArcgisMap from 'cc-arcgis-map'
import 'cc-arcgis-map/style.css'
import App from './App.vue'
const app = createApp(App)
// 方式1: 直接使用默认配置（包含所有预配置图层和内网设置）
app.use(VueArcgisMap)
// 方式2: 覆盖部分配置
app.use(VueArcgisMap, {
esriconfig: {
url: 'http://192.168.8.74:8085/arcgis_js_api/init.js'
},
mapExtent: {
xMin: 725836,
yMin: 355421,
xMax: 876728,
yMax: 423604
}
})
app.mount('#app')
`
`vue
@map-click="onMapClick"
/>
:zoom="13"
:base-layer="'暗黑版电子地图'"
@map-ready="onMapReady"
/>
`
本组件库已内置内网环境的 ArcGIS 配置：
`typescript`
// 默认内网配置
{
esriconfig: {
url: 'http://192.168.8.74:8085/arcgis_js_api/init.js'
}
}
如需修改为其他内网地址：
`typescript`
app.use(VueArcgisMap, {
esriconfig: {
url: 'http://your-server:port/arcgis_js_api/init.js'
}
})
如需在外网环境使用，配置官方 ArcGIS API：
`typescript`
app.use(VueArcgisMap, {
esriconfig: {
url: 'https://js.arcgis.com/3.41/init.js'
}
})
1. 内网环境：使用默认配置即可，所有图层已配置内网地址
2. 图层URL：所有预配置图层默认使用内网地址前缀
3. 性能优化：内网环境下建议启用本地缓存以提升加载速度
默认配置了武汉2000坐标系的可视范围：
`typescript`
// 武汉2000坐标系默认范围
{
xMin: 725836,
yMin: 355421,
xMax: 876728,
yMax: 423604
}
`typescript`
// 修改可视范围
app.use(VueArcgisMap, {
mapExtent: {
xMin: 700000,
yMin: 350000,
xMax: 900000,
yMax: 450000
}
})
`typescript
// 地理坐标（WGS84）转武汉2000
const wgs84Point = [114.3055, 30.5996]
const wh2000Point = coordinateTransform(wgs84Point, 'WGS84', 'WH2000')
// 在地图上添加点
mapUtil.addPointMark(map, wh2000Point[0], wh2000Point[1], icon, attrs)
`
本组件库内置了50+个常用图层，按类型分为：
`typescript`
// 添加业务图层
addLayerConfig({
label: '业务图层',
mapUrl: 'http://your-server/arcgis/rest/services/ServiceName/MapServer',
mapType: 'dynamic',
visible: true
})
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| center | [number, number] | [114.3055, 30.5996] | 地图中心点 |zoom
| | number | 13 | 缩放级别 |extent
| | MapExtent | - | 地图范围 |baseLayer
| | string \| LayerConfig \| false | '暗黑版电子地图' | 底图配置 |layers
| | LayerConfig[] | [] | 额外图层 |showLoading
| | boolean | true | 是否显示加载状态 |esriConfig
| | Partial | - | 自定义ArcGIS配置 |
| 事件名 | 参数 | 说明 |
|--------|------|------|
| map-ready | { map, geometryEngine, mapUtil } | 地图加载完成 |map-click
| | MapClickEvent | 地图点击事件 |zoom-change
| | ZoomChangeEvent | 缩放级别变化 |center-change
| | CenterChangeEvent | 中心点变化 |extent-change
| | ExtentChangeEvent | 范围变化 |
通过 ref 可以调用组件的公共方法：
`vue
`
| 方法 | 说明 |
|------|------|
| getMap() | 获取地图实例 |getGeometryEngine()
| | 获取几何引擎 |getMapUtil()
| | 获取MapUtil实例 |clearGraphics()
| | 清除所有图形 |setExtent(extent, fit?)
| | 设置地图范围 |zoomToGraphics(graphics, expand?)
| | 缩放到图形 |
MapUtil 提供了43个实用的地图操作方法，完全向后兼容原有代码。
#### 点标记
`typescript`
// 添加图片标记
mapUtil.addPointMark(map, x, y, imgPath, attributes)
// 添加圆形标记
mapUtil.addPointRound(map, x, y, rgba, radius, attributes)
// 添加文字标记
mapUtil.addPointFont(map, x, y, text, attributes)
// 添加文本标注
mapUtil.addPointText(map, x, y, text, textColor, attributes)
#### 线图形
`typescript`
// 添加线图形
mapUtil.addLineGraphic(map, paths, attributes)
// 添加渐变线
mapUtil.addLineRound(map, paths, attributes)
// 添加动态线（带流向）
mapUtil.addLineDynamic(map, paths, attributes)
#### 面图形
`typescript`
// 添加面图形
mapUtil.addPolygonGraphic(map, rings, attributes)
// 添加渐变面
mapUtil.addPolygonGradient(map, rings, attributes)
// 添加动态面
mapUtil.addPolygonDynamic(map, rings, attributes)
#### 其他图形
`typescript`
// 添加圆
mapUtil.addCircleGraphic(map, center, radius, attributes)
// 添加环形
mapUtil.addDonutGraphic(map, rings, attributes)
// 添加图片
mapUtil.addImageGraphic(map, extent, imageUrl, attributes)
`typescript`
// 控制图层显隐
mapUtil.controlLayer(map, layerConfig, visible)
// 添加图层到列表
mapUtil.addMenuLayer(map, url, type, id, alpha)
// 添加WFS图层
mapUtil.addWFSLayer(map, url, layerName)
// 移除WFS图层
mapUtil.removeWFSLayer(map, layerName)
// 创建矢量图层
mapUtil.createVectorLayer(map, layerId)
// 根据名称获取图层
mapUtil.getLayerByName(map, layerName)
// 根据标题获取图层
mapUtil.getLayerByTitle(map, title)
// 获取所有图层信息
mapUtil.getAllLayerInfos(map)
`typescript`
// 通用查询
mapUtil.query(url, where, outFields, callback)
// 条件查询
mapUtil.queryByWhere(url, where, outFields, callback)
// 几何查询
mapUtil.queryByGeometry(url, geometry, spatialRelationship, callback)
// 要素查找
mapUtil.findTask(url, searchFields, searchText, callback)
// 要素识别
mapUtil.identinate(url, geometry, tolerance, callback)
// 空间关系查询
mapUtil.spatialQuery(url, geometry, spatialRelationship, callback)
// 获取图层字段
mapUtil.getLayerFields(url, callback)
// 统计分析
mapUtil.getStatistics(url, field, statisticType, callback)
`typescript`
// 获取几何中心
mapUtil.getGeometryCenter(geometry)
// 获取总范围
mapUtil.getTotalExtent(geometryList, spatialReference)
// 缓冲区分析
mapUtil.geometryBuffer(geometry, distance)
// 相交分析
mapUtil.intersect(geometry1, geometry2)
// 合并分析
mapUtil.union(geometryList)
// 计算面积
mapUtil.getArea(geometry)
// 计算长度
mapUtil.getLength(geometry)
`typescript`
// 清除所有图形
mapUtil.clearAllGraphic(map)
// 清除指定图形
mapUtil.clearTargetGraphics(map, attributeName, attributeValue)
// 图形闪烁
mapUtil.geometryFlick(map, geometry, attributes, isLoop)
// 开始绘制
mapUtil.startDraw(map, drawType, callback)
// 停止绘制
mapUtil.stopDraw(map)
// 距离测量
mapUtil.measureDistance(map, callback)
// 面积测量
mapUtil.measureArea(map, callback)
`typescript
// 注册单方法
mapUtil.extend('addHeatMap', function(data, options) {
// this 指向 mapUtil 实例
const map = this.getMap()
// 实现热力图逻辑...
})
// 批量注册
mapUtil.use({
addCluster(points) {
// 聚合图实现
},
addTrack(coordinates) {
// 轨迹图实现
}
})
// 使用扩展方法
mapUtil.addHeatMap(data, options)
`
`typescript
import { useMap } from 'cc-arcgis-map'
const { map, setExtent, setCenter, setZoom } = useMap()
setExtent({ xMin: 1, yMin: 2, xMax: 3, yMax: 4 })
setCenter([114, 30], 13)
`
`typescript
import { useMapLayer } from 'cc-arcgis-map'
const { addLayer, removeLayer, toggleLayer } = useMapLayer(map)
addLayer({
label: '自定义图层',
mapUrl: 'http://example.com/map',
mapType: 'dynamic'
})
`
`typescript
import { useMapGraphics } from 'cc-arcgis-map'
const { addPointMark, addPolygon, clearAll } = useMapGraphics(map)
addPointMark(114, 30, '/icon.png', { id: '1' })
addPolygon([[[114, 30], [115, 30], [115, 31], [114, 31]]], { id: '2' })
`
`typescript
import { useMapQuery } from 'cc-arcgis-map'
const { queryByWhere, spatialQuery } = useMapQuery(map)
queryByWhere(
'http://example.com/map/MapServer/0',
"NAME = '武汉'",
['*'],
true,
(result) => {
console.log('查询结果:', result)
}
)
`
包内置了完整的默认配置：
- esriconfig: 内网ArcGIS地址
- mapExtent: 武汉2000坐标系范围
- layerConfig: 50+个完整图层配置
- defaultBaseLayer: '暗黑版电子地图'
`typescript`
app.use(VueArcgisMap, {
esriconfig: {
url: 'http://192.168.8.74:8085/arcgis_js_api/init.js'
},
mapExtent: {
xMin: 725836,
yMin: 355421,
xMax: 876728,
yMax: 423604
},
layerConfig: [
...getDefaultLayerConfig(), // 保留所有默认图层
{ label: '新图层', mapUrl: '...', mapType: 'dynamic' }
]
})
`typescript
import { addLayerConfig, updateLayerConfig } from 'cc-arcgis-map'
// 添加新图层
addLayerConfig({
label: '运行时添加的图层',
mapUrl: 'http://example.com/map',
mapType: 'dynamic'
})
// 更新现有图层
updateLayerConfig('电子地图', {
mapUrl: 'http://new-server.com/map'
})
`
`typescript
// 旧代码
import { mapUtil } from '@/utils/MapUtil'
// 使用
mapUtil.addPointMark(map, x, y, icon, attrs)
`
`typescript
// 新代码（完全兼容）
import { mapUtil } from 'cc-arcgis-map'
// mapUtil方法调用完全不变
mapUtil.addPointMark(map, x, y, icon, attrs)
`
如果之前使用了 sysConfig，现在可以用 getGlobalConfig 获取：
`typescript
import { getGlobalConfig } from 'cc-arcgis-map'
// 获取所有配置
const config = getGlobalConfig()
console.log(config.layerConfig) // 所有图层配置
console.log(config.esriconfig) // ArcGIS配置
`
#### 最简单的地图初始化
`vue
style="width: 100%; height: 500px;"
/>
`
#### 添加点标记和响应点击
`vue
:zoom="13"
@map-ready="onMapReady"
@map-click="onMapClick"
/>
`
#### 复杂空间查询
`vue
`
#### 图层动态切换和透明度控制
` vue
底图切换
:key="layer.label"
@click="switchBaseLayer(layer)"
:class="{ active: currentBaseLayer === layer.label }"
>
{{ layer.label }}
图层控制
min="0"
max="100"
v-model="layer.opacity"
@input="setLayerOpacity(layer)"
/>
`
#### 综合地图应用（包含工具栏、图层控制、查询、测量）
` vue
:center="center"
:zoom="zoom"
@map-ready="onMapReady"
@map-click="onMapClick"
/>
图层控制
{{ group.name }}
查询结果 ({{ queryResults.length }})
{{ item.name }} - {{ item.address }}
坐标: {{ coords.x.toFixed(6) }}, {{ coords.y.toFixed(6) }}
`
完整支持TypeScript类型定义：
`typescript
import type {
ArcgisMapProps,
ArcgisMapEmits,
MapReadyEvent,
MapClickEvent,
LayerConfig,
EsriConfig
} from 'cc-arcgis-map'
const props = defineProps
const emit = defineEmits
const onReady = (event: MapReadyEvent) => {
const { map, mapUtil } = event
}
``
欢迎提交 Issue 和 Pull Request！
MIT
- 基于 Vue 3 Composition API
- 使用 esri-loader 加载 ArcGIS API
- 参考 ArcGIS JavaScript API 3.x