AlmostMap

基于 OpenLayers 的 Vue 2.x / 3.x 地图组件，支持区域遮罩、POI 标注、自定义 InfoWindow、矢量/卫星底图切换、WMS 叠加层。

安装

npm install almost-map
# 或
pnpm add almost-map

使用

Vue 3

import { createApp } from 'vue'
import App from './App.vue'
import { AlmostMap } from 'almost-map'

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

Vue 2

import Vue from 'vue'
import App from './App.vue'
import { AlmostMap } from 'almost-map/vue2'

Vue.use(AlmostMap)

new Vue({ render: h => h(App) }).$mount('#app')

模板

<template>
  <almost-map
    :map-config="mapConfig"
    :region-data="regionData"
    :marker-list="markers"
  >
    <!-- 自定义 InfoWindow 内容（可选） -->
    <template #info-window="{ item, close }">
      <div class="my-window">
        <div>{{ item.name }}</div>
        <button @click="close">×</button>
      </div>
    </template>
  </almost-map>
</template>

app.use(AlmostMap) 会自动注册 <almost-map> 组件到全局。

自动获取地图配置

import { createMapConfig } from 'almost-map'   // Vue 3
// 或 import { createMapConfig } from 'almost-map/vue2'   // Vue 2

async function init() {
  const { mapConfig, regionData } = await createMapConfig({
    // 必选：WMTS 底图
    wmts: {
      url: 'https://your-server.com/geowebcache/service/wmts',
      // 矢量底图 与 卫星底图 至少配置一个（仅配 satellite 时需设置 basemap="satellite"）
      basemaps: {
        // 矢量底图
        vector: 'YOUR_VECTOR_LAYER',
        // 卫星底图
        satellite: 'YOUR_SATELLITE_LAYER',
      },
    },
    // 可选：WMS 区域叠加层
    wms: {
      url: 'https://your-server.com/geoserver/wms',
      layer: 'your_workspace:your_layer',
      opacity: 0.5,
    },
    // 可选：WFS 区域边界数据
    wfs: {
      url: 'https://your-server.com/geoserver/ows',
      layer: 'your_workspace:your_layer',
      maxFeatures: 50,
    },
  })
}

createMapConfig 会自动：

1. 请求 WMTS GetCapabilities 解析瓦片网格参数（origin、resolutions、matrixIds）
2. 请求 WFS GeoJSON 获取区域边界数据
3. 返回可直接传入 <almost-map> 的 mapConfig 对象和 regionData 对象

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | map-config | Object | 必填 | 地图服务配置（WMTS 底图 + WMS 叠加层 + 视图范围） | | region-props | Object | - | 区域属性字段映射，格式 { code: '字段名', name: '字段名' }。默认使用 code、name 字段，不一致时需传入 | | region-data | Object | null | GeoJSON FeatureCollection 区域边界数据。提供时可使用区域遮罩和自动定位；不传则仅展示底图 | | region-code | String | '' | 需要展示的区域编码（有 regionData 时生效），对应 regionProps 映射的编码字段的值，不传则展示全区域 | | region-center | Object | {} | 展示区域的中心点（有 regionData 时生效），格式 { [default\|regionCode]: [lng, lat] }，不传则自动根据区域边界数据计算 | | default-centers | Array | [] | 默认中心点（无 regionData 时必须传入，且仅在无 regionData 时生效），格式 [lng, lat] | | default-zoom | Number | 12 | 默认缩放层级 | | basemap | String | 'vector' | 底图类型：vector | satellite | | show-layer | Boolean | false | 显示 WMS 行政区划图层 | | marker-coord | String | 'cgcs2000' | 标注坐标坐标系：cgcs2000 | wgs84 | gcj02 | bd-09 | | marker-list | Array | [] | POI 标注列表 | | marker-icon | Object | {} | 图标映射表，key 对应 marker 的 type，value 为图标路径 | | bg-color | String | '#1e4664' | 地图背景色 |

markerList 数据格式

{
  id: 1,
  name: '标注名称',
  type: 'company',        // 图标类型，对应 markerIcon 的 key，不传则使用默认图标
  icon: '/custom.png',    // 可选，单独指定该标注的图标路径（优先级高于 type）
  longitude: 114.6922,
  latitude: 27.8148
}

导出

import { AlmostMap } from 'almost-map'         // Vue 3
// 或
import { AlmostMap } from 'almost-map/vue2'    // Vue 2

// 工具函数
import { createMapConfig, extractRegions, getFeatureByCode } from 'almost-map'

| 导出 | 说明 | |------|------| | AlmostMap | Vue 插件 / 组件（通过 app.use() 注册） | | createMapConfig(options) | 从 WMTS GetCapabilities 自动生成地图配置 | | extractRegions(geoJson, propsMap?) | 从 GeoJSON 提取区域 { code, center, name } 列表，可传 propsMap 指定字段映射 | | getFeatureByCode(code, geoJson) | 按行政编码查找 GeoJSON 中的区域要素 |

Slot

| 名称 | 作用域 | 说明 | |------|--------|------| | info-window | { item, close } | 自定义 POI 点击弹窗。close 是关闭弹窗的方法。不提供则显示简单的默认弹窗 |

方法（通过 ref 调用）

<template>
  <almost-map ref="mapRef" ... />
</template>

| 方法 | 参数 | 说明 | |------|------|------| | flyCenter(center, zoom, duration) | [lng, lat], Number, Number | 飞至指定坐标 | | clearMarkers() | — | 清除所有标注 | | updateMarkers(list) | Array | 更新标注列表 |