vue-openlayers-plugin 1.1.16 → 1.2.0

package/README.md

@@ -131,6 +131,194 @@ const onFeatureSelected = (feature: any) => {
 </style>
 ```
 
+### 视角书签使用
+
+视角书签的数据由父组件统一管理，通过 `viewBookmarks` 传给地图组件。地图组件内部只负责展示、应用视角和触发事件，不直接请求后端接口。
+
+推荐接入方式：
+
+- 父组件初始化时调用查询接口，拿到书签列表后传给 `CustomOpenlayer`
+- 用户在地图中新增、编辑、删除、清空、应用书签时，地图组件通过 `bookmark-action` 向外抛出事件
+- 父组件在 `onBookmarkAction` 中根据 `action` 调用新增、更新、删除、清空等接口
+- 接口成功后重新查询书签列表，或本地同步更新后再回传给 `viewBookmarks`
+
+```vue
+<template>
+  <CustomOpenlayer
+    :map-config="mapConfig"
+    :view-bookmarks="viewBookmarks"
+    @bookmark-action="onBookmarkAction"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { CustomOpenlayer } from 'vue-openlayers-plugin'
+import type { BookmarkAction, MapConfig, ViewBookmark } from 'vue-openlayers-plugin'
+
+const viewBookmarks = ref<ViewBookmark[]>([])
+
+const mapConfig: MapConfig = {
+  center: [116.397428, 39.90923],
+  zoom: 10,
+  projection: 'EPSG:4326',
+  controls: {
+    viewBookmarks: true
+  }
+}
+
+const fetchBookmarks = async () => {
+  const list = await bookmarkApi.list()
+  viewBookmarks.value = list
+}
+
+const onBookmarkAction = async (event: BookmarkAction) => {
+  const { action, bookmark } = event
+
+  if (action === 'add' && bookmark) {
+    await bookmarkApi.create(bookmark)
+  }
+
+  if (action === 'update' && bookmark) {
+    await bookmarkApi.update(bookmark.id, bookmark)
+  }
+
+  if (action === 'delete' && bookmark) {
+    await bookmarkApi.remove(bookmark.id)
+  }
+
+  if (action === 'clear') {
+    await bookmarkApi.clear()
+  }
+
+  if (action === 'apply' && bookmark) {
+    console.log('已应用书签视角', bookmark)
+  }
+
+  await fetchBookmarks()
+}
+
+onMounted(() => {
+  fetchBookmarks()
+})
+
+const bookmarkApi = {
+  async list(): Promise<ViewBookmark[]> {
+    return []
+  },
+  async create(bookmark: ViewBookmark) {
+    return bookmark
+  },
+  async update(id: string, bookmark: ViewBookmark) {
+    return { id, ...bookmark }
+  },
+  async remove(id: string) {
+    return id
+  },
+  async clear() {
+    return true
+  }
+}
+</script>
+```
+
+#### 数据传递说明
+
+- `viewBookmarks`：父组件传入的书签数组，作为地图组件的书签数据源
+- `controls.viewBookmarks: true`：开启视角书签按钮，用户点击后会打开“视角书签”面板
+- 地图组件不会自动持久化书签；是否存本地、是否调后端接口，都由父组件决定
+
+#### 视角书签数据结构
+
+`viewBookmarks` 的元素类型为 `ViewBookmark`，结构如下：
+
+```typescript
+interface ViewBookmark {
+  id: string
+  name: string
+  category: string
+  description: string
+  center: [number, number]
+  zoom: number
+  rotation: number
+  createTime: string | Date
+  creator?: string
+  thumbnail?: string
+  layerStates?: {
+    id: string
+    visible: boolean
+    opacity: number
+    title?: string
+  }[]
+}
+```
+
+字段说明：
+
+- `id`：书签唯一标识，通常对应后端主键
+- `name`：书签名称
+- `category`：书签分类，便于筛选和分组
+- `description`：书签描述信息
+- `center`：视角中心点坐标，格式为 `[经度, 纬度]`
+- `zoom`：缩放级别
+- `rotation`：旋转角度，单位为度
+- `createTime`：创建时间，支持字符串或 `Date`
+- `creator`：创建人，可选
+- `thumbnail`：视角缩略图，可选，通常为图片 URL 或 Base64
+- `layerStates`：保存书签时记录的图层状态，可选，用于恢复图层显隐和透明度
+
+示例数据：
+
+```typescript
+const viewBookmarks: ViewBookmark[] = [
+  {
+    id: 'bk-1',
+    name: '北京中心',
+    category: '城市',
+    description: '北京中心视角',
+    center: [116.407526, 39.90403],
+    zoom: 12,
+    rotation: 0,
+    createTime: '2026-05-05 10:00:00',
+    creator: 'admin',
+    thumbnail: 'https://example.com/bookmarks/bk-1.jpg',
+    layerStates: [
+      {
+        id: 'osm',
+        visible: true,
+        opacity: 1,
+        title: 'OpenStreetMap'
+      },
+      {
+        id: 'land_acquisition',
+        visible: false,
+        opacity: 0.8,
+        title: '征地图层'
+      }
+    ]
+  }
+]
+```
+
+#### 事件说明
+
+地图组件会抛出 `bookmark-action` 事件，事件参数类型如下：
+
+```typescript
+type BookmarkAction = {
+  action: 'add' | 'update' | 'delete' | 'apply' | 'clear'
+  bookmark?: ViewBookmark
+}
+```
+
+不同 `action` 的含义如下：
+
+- `add`：用户保存了一个新书签
+- `update`：用户修改了已有书签
+- `delete`：用户删除了某个书签
+- `clear`：用户清空了全部书签
+- `apply`：用户点击应用书签，地图已切换到对应视角
+
 ### 移动端使用（MobileMap）
 
 `MobileMap` 内置了移动端常用 UI（搜索、图层面板、图例入口等），通过 Props 控制显示：
@@ -229,6 +417,13 @@ const onMapReady = (map: unknown) => {
 | showLayerPanel | `boolean` | `false` | 是否显示图层面板 |
 | showMeasurementTools | `boolean` | `false` | 是否显示测量工具 |
 | showDrawingTools | `boolean` | `false` | 是否显示标绘工具 |
+| viewBookmarks | `ViewBookmark[]` | `[]` | 视角书签列表，由父组件传入 |
+
+#### Events
+
+| 事件名 | 参数 | 描述 |
+|------|------|------|
+| bookmark-action | `BookmarkAction` | 视角书签新增、编辑、删除、清空、应用时触发 |
 
 ### CustomDialog
 
@@ -336,6 +531,152 @@ layerManager.addLayer({
 })
 ```
 
+#### GeoJSON 请求图层配置
+
+GeoJSON 图层除了支持直接传入 `data`，也支持通过 `geojsonConfig.request` 发起远程请求，适合按行政区、业务类型、时间范围等条件动态加载矢量数据。
+
+```typescript
+const mapConfig = {
+  center: [121.473, 31.23],
+  zoom: 12,
+  projection: 'EPSG:4326',
+  vectorLayers: [
+    {
+      id: 'land_acquisition',
+      name: '征地',
+      type: 'GeoJSON',
+      visible: true,
+      opacity: 80,
+      geojsonLandType: '征地未结案',
+      geojsonConfig: {
+        request: {
+          url: '/zzd/parcel/geojson/by-user-land-type',
+          method: 'GET',
+          headers: {
+            Authorization: 'Bearer <token>',
+            'X-Tenant-Id': 'demo'
+          },
+          params: {
+            landType: '征地未结案'
+          },
+          managementUnitParamName: 'managementUnit',
+          landTypeParamName: 'landType',
+          dataPath: 'data.features'
+        }
+      },
+      style: {
+        fill: {
+          color: 'rgba(255, 0, 0, 0.2)'
+        },
+        stroke: {
+          color: '#FF0000',
+          width: 2
+        }
+      }
+    }
+  ]
+}
+```
+
+#### GeoJSON 请求配置项
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `geojsonConfig.data` | `object \| string` | 直接传入 GeoJSON 数据，适合本地静态数据 |
+| `geojsonConfig.request.url` | `string` | 请求地址 |
+| `geojsonConfig.request.method` | `'GET' \| 'POST' \| 'PUT' \| 'DELETE'` | 请求方法，默认 `GET` |
+| `geojsonConfig.request.headers` | `Record<string, string>` | 自定义请求头，比如 `Authorization` |
+| `geojsonConfig.request.params` | `Record<string, any>` | 查询参数，会自动拼接到 URL 上 |
+| `geojsonConfig.request.body` | `Record<string, any> \| string` | 非 `GET` 请求体 |
+| `geojsonConfig.request.dataPath` | `string` | 返回结果中的 GeoJSON 数据路径，例如 `data.features` |
+| `geojsonConfig.request.managementUnit` | `string` | 管理单位值 |
+| `geojsonConfig.request.managementUnitParamName` | `string` | 管理单位参数名，默认 `managementUnit` |
+| `geojsonConfig.request.landType` | `string` | 地类值 |
+| `geojsonConfig.request.landTypeParamName` | `string` | 地类参数名，默认 `landType` |
+| `geojsonConfig.refresh` | `object` | 刷新配置，支持定时刷新、缩放后刷新、移动后刷新 |
+
+#### 请求头设置方式
+
+最直接的方式是在 `geojsonConfig.request.headers` 中传入：
+
+```typescript
+geojsonConfig: {
+  request: {
+    url: '/api/parcel/geojson',
+    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'X-Project-Id': 'project-a'
+    }
+  }
+}
+```
+
+如果不希望把 token 写死在配置中，可以使用请求拦截器动态注入：
+
+```typescript
+geojsonConfig: {
+  request: {
+    url: '/api/parcel/geojson',
+    method: 'GET',
+    requestInterceptor: async (request) => {
+      const token = localStorage.getItem('token') || ''
+
+      return {
+        headers: {
+          ...request.headers,
+          Authorization: `Bearer ${token}`
+        }
+      }
+    }
+  }
+}
+```
+
+#### 响应转换与数据解析
+
+如果后端返回结构不固定，除了 `dataPath` 之外，还可以使用 `responseInterceptor` 或 `responseParser` 做二次处理：
+
+```typescript
+geojsonConfig: {
+  request: {
+    url: '/api/parcel/geojson',
+    method: 'GET',
+    responseParser: async (response) => {
+      return response.result.list
+    }
+  }
+}
+```
+
+#### 运行时刷新 GeoJSON 图层
+
+组件实例暴露了 `refreshLayer` 和 `updateLayerRequestParams`，可以在不重建地图的情况下更新请求参数并重新拉取数据：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CustomOpenlayer } from 'vue-openlayers-plugin'
+
+const mapRef = ref<InstanceType<typeof CustomOpenlayer> | null>(null)
+
+const updateLandType = async () => {
+  mapRef.value?.updateLayerRequestParams('land_acquisition', {
+    landType: '征地已结案'
+  })
+
+  await mapRef.value?.refreshLayer('land_acquisition')
+}
+</script>
+```
+
+#### 使用建议
+
+- 需要鉴权时，优先使用 `headers` 或 `requestInterceptor`
+- 参数频繁变化时，优先使用 `updateLayerRequestParams`
+- 后端返回结构复杂时，优先使用 `dataPath`，不够再使用 `responseParser`
+- 如果鉴权依赖 Cookie，也可以不传 `headers`，由浏览器自动携带
+
 ### 标绘工具
 
 ```typescript

package/lib/{BasemapPanel-d1332546.mjs → BasemapPanel-d6e4ea88.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, inject, computed, ref, watch, onMounted, onUnmounted, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString } from "vue";
-import { r as resolveBasemapThumbnail, l as layerEventBus, X, b as _export_sfc } from "./index-198a96d2.mjs";
+import { r as resolveBasemapThumbnail, l as layerEventBus, X, b as _export_sfc } from "./index-58704a25.mjs";
 import "@element-plus/icons-vue";
 import "ol";
 import "proj4";

package/lib/{CoordinateLocationDialog-c2d89c1e.mjs → CoordinateLocationDialog-81d00abc.mjs}

@@ -1,6 +1,6 @@
 import { defineComponent, inject, computed, ref, reactive, resolveComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode } from "vue";
 import { Aim } from "@element-plus/icons-vue";
-import { X, T as TooltipHelper, b as _export_sfc } from "./index-198a96d2.mjs";
+import { X, T as TooltipHelper, b as _export_sfc } from "./index-58704a25.mjs";
 import "ol";
 import "proj4";
 import "@supermapgis/iclient-ol";

package/lib/{MapPrintDialog-eea9e39e.mjs → FilterPanel-7358e3fb.mjs}

@@ -1,4 +1,4 @@
-import { d as _sfc_main } from "./index-198a96d2.mjs";
+import { j as _sfc_main } from "./index-58704a25.mjs";
 import "vue";
 import "@element-plus/icons-vue";
 import "ol";

package/lib/{FilterPanel-d7cb1c79.mjs → LayerPanel-9bf28955.mjs}

@@ -1,4 +1,4 @@
-import { j as _sfc_main } from "./index-198a96d2.mjs";
+import { e as _sfc_main } from "./index-58704a25.mjs";
 import "vue";
 import "@element-plus/icons-vue";
 import "ol";

package/lib/{LayerPanel-f411a32b.mjs → MapPrintDialog-64d46412.mjs}

@@ -1,4 +1,4 @@
-import { e as _sfc_main } from "./index-198a96d2.mjs";
+import { d as _sfc_main } from "./index-58704a25.mjs";
 import "vue";
 import "@element-plus/icons-vue";
 import "ol";

package/lib/{MeasurementDialog-9914f4e9.mjs → MeasurementDialog-4e084192.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, inject, computed, ref, watch, resolveComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeClass } from "vue";
-import { X, f as formatMeasurementResult, b as _export_sfc } from "./index-198a96d2.mjs";
+import { X, f as formatMeasurementResult, b as _export_sfc } from "./index-58704a25.mjs";
 import "@element-plus/icons-vue";
 import "ol";
 import "proj4";

package/lib/{MyMarkersDialog-ef717e8c.mjs → MyMarkersDialog-aa44e5bd.mjs}

@@ -1,7 +1,7 @@
 import { defineComponent, inject, computed, ref, reactive, onUnmounted, watch, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, unref, withCtx, createElementVNode, normalizeClass, createTextVNode, toDisplayString, renderList, createBlock, withModifiers, mergeProps } from "vue";
 import { Plus, FolderOpened, Download, Delete, Search, LocationFilled, Edit } from "@element-plus/icons-vue";
 import { ElMessageBox } from "element-plus";
-import { X, M as MarkerDrawingAdapter, h as fromLonLat, t as toLonLat } from "./index-198a96d2.mjs";
+import { X, M as MarkerDrawingAdapter, h as fromLonLat, t as toLonLat } from "./index-58704a25.mjs";
 import "ol";
 import "proj4";
 import "@supermapgis/iclient-ol";

package/lib/{QuadCompareDialog-3d6eaf0c.mjs → QuadCompareDialog-84a88cf9.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, inject, computed, shallowRef, reactive, watch, nextTick, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, createCommentVNode } from "vue";
-import { k as layerFactory, i as getUid, m as defaults, X, n as TileLayer, I as ImageLayer, V as VectorTileLayer, H as HeatmapLayer, o as VectorLayer, L as LayerGroup, b as _export_sfc } from "./index-198a96d2.mjs";
+import { k as layerFactory, i as getUid, m as defaults, X, n as TileLayer, I as ImageLayer, V as VectorTileLayer, H as HeatmapLayer, o as VectorLayer, L as LayerGroup, b as _export_sfc } from "./index-58704a25.mjs";
 import { u as useMap } from "./useMap-8e3a2de5.mjs";
 import { View, Map } from "ol";
 import "@element-plus/icons-vue";

package/lib/{RegionNavigationDialog-2843eedd.mjs → RegionNavigationDialog-467ad6c0.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, reactive, resolveComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, normalizeClass } from "vue";
-import { X } from "./index-198a96d2.mjs";
+import { X } from "./index-58704a25.mjs";
 import "@element-plus/icons-vue";
 import "ol";
 import "proj4";

package/lib/{SplitCompareDialog-1e678e69.mjs → SplitCompareDialog-50410c0b.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, inject, computed, shallowRef, watch, nextTick, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, createCommentVNode } from "vue";
-import { k as layerFactory, i as getUid, m as defaults, X, n as TileLayer, I as ImageLayer, V as VectorTileLayer, H as HeatmapLayer, o as VectorLayer, L as LayerGroup, b as _export_sfc } from "./index-198a96d2.mjs";
+import { k as layerFactory, i as getUid, m as defaults, X, n as TileLayer, I as ImageLayer, V as VectorTileLayer, H as HeatmapLayer, o as VectorLayer, L as LayerGroup, b as _export_sfc } from "./index-58704a25.mjs";
 import { u as useMap } from "./useMap-8e3a2de5.mjs";
 import { View, Map } from "ol";
 import "@element-plus/icons-vue";

package/lib/{SwipeCompareDialog-547de7ee.mjs → SwipeCompareDialog-c322e2f6.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, inject, computed, shallowRef, watch, nextTick, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, normalizeClass, normalizeStyle, Fragment, renderList, createBlock, createCommentVNode } from "vue";
-import { k as layerFactory, i as getUid, m as defaults, X, n as TileLayer, I as ImageLayer, V as VectorTileLayer, H as HeatmapLayer, o as VectorLayer, L as LayerGroup, b as _export_sfc } from "./index-198a96d2.mjs";
+import { k as layerFactory, i as getUid, m as defaults, X, n as TileLayer, I as ImageLayer, V as VectorTileLayer, H as HeatmapLayer, o as VectorLayer, L as LayerGroup, b as _export_sfc } from "./index-58704a25.mjs";
 import { u as useMap } from "./useMap-8e3a2de5.mjs";
 import { View, Map } from "ol";
 import { DCaret } from "@element-plus/icons-vue";

package/lib/{ViewBookmarksDialog-d3e38c53.mjs → ViewBookmarksDialog-83cf5ec4.mjs}

@@ -1,7 +1,7 @@
 import { defineComponent, inject, computed, ref, watch, reactive, resolveComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, createElementBlock, Fragment, renderList, withModifiers, toDisplayString, createCommentVNode } from "vue";
 import { Plus, Delete, Search, Camera, View, Edit, Location, ZoomIn } from "@element-plus/icons-vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { X, t as toLonLat, h as fromLonLat, i as getUid } from "./index-198a96d2.mjs";
+import { X, t as toLonLat, h as fromLonLat, i as getUid } from "./index-58704a25.mjs";
 import "ol";
 import "proj4";
 import "@supermapgis/iclient-ol";