@gis_victory/gismap 1.0.55 → 1.0.57

package/README.md

@@ -1,5 +1,350 @@
-# Vue 3 + TypeScript + Vite
+# @gis_victory/gismap 组件库
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+一个基于 Vue 3 + TypeScript + Vite 开发的 GIS 地图组件库，提供丰富的地图交互功能和移动端适配。
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+## 特性
+
+- 📦 开箱即用的地图组件
+- 🎨 支持多种地图样式和图层
+- 📱 移动端适配
+- 🔍 地图搜索功能
+- 🎯 地图工具和控件
+- 📍 标记和弹窗
+- 📊 图例和数据可视化
+- 🔄 地图切换和扩展
+
+## 安装
+
+```bash
+npm install @gis_victory/gismap
+# 或
+yarn add @gis_victory/gismap
+```
+
+## 快速开始
+
+### 基础使用
+
+```vue
+<template>
+  <MapContainer 
+    :mapViewData="mapViewData" 
+    :switchData="switchData" 
+    :layerData="layerData"
+    :toolsData="toolsData" 
+    :searchData="searchData" 
+    @load="onMapLoad"
+  >
+    <!-- 自定义插槽内容 -->
+    <template #bottom-left>
+      <GisMapCompass />
+    </template>
+  </MapContainer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { MapContainer, GisMapCompass, GSMap } from '@gis_victory/gismap';
+
+const mapViewData = reactive({
+  zoom: 9,
+  center: [120.65677441301864, 29.745141743380103],
+  style: {
+    glyphs: "http://www.gisx.work/map-assets/fonts/{fontstack}/{range}.pbf",
+  },
+  icons: [
+    {
+      name: 'point',
+      label: "点",
+      url: 'assets/icons/point.png',
+    }
+    // 更多图标配置...
+  ]
+});
+
+const switchData = reactive({
+  layers: [{
+    name: "tdt-vec",
+    label: "标准地图",
+    iconName: "vector",
+    checked: true
+  }, {
+    name: "tdt-img",
+    label: "卫星影像",
+    iconName: "satellite",
+    checked: false
+  }],
+  extensions: [{
+    name: "tdt-cia",
+    label: "注记",
+    checked: true,
+  }]
+});
+
+const layerData = ref([]);
+const toolsData = ref([]);
+const searchData = ref([]);
+
+const onMapLoad = (map: GSMap) => {
+  console.log('地图加载完成:', map);
+  // 地图操作逻辑...
+};
+</script>
+```
+
+## 组件列表
+
+### 核心组件
+
+| 组件名 | 描述 | 示例 |
+|-------|------|------|
+| `MapContainer` | 地图容器，包含所有地图组件 | `<MapContainer :mapViewData="mapViewData" @load="onMapLoad" />` |
+| `GisMapView` | 地图视图组件 | `<GisMapView :mapViewData="mapViewData" />` |
+| `GisMapLayer` | 地图图层管理组件 | `<GisMapLayer :layerData="layerData" />` |
+| `GisMapLegend` | 地图图例组件 | `<GisMapLegend />` |
+| `GisMapTools` | 地图工具组件 | `<GisMapTools :toolsData="toolsData" />` |
+| `GisMapSwitch` | 地图切换组件 | `<GisMapSwitch :switchData="switchData" />` |
+| `GisMapSearch` | 地图搜索组件 | `<GisMapSearch :searchData="searchData" />` |
+
+### 工具组件
+
+| 组件名 | 描述 | 示例 |
+|-------|------|------|
+| `GisMapCompass` | 地图指南针组件 | `<GisMapCompass />` |
+| `GisMapPopupBar` | 弹窗工具栏组件 | `<GisMapPopupBar>` |
+| `GisMapPopupBarItem` | 弹窗工具栏项组件 | `<GisMapPopupBarItem label="示例" />` |
+
+### 移动端组件
+
+| 组件名 | 描述 | 示例 |
+|-------|------|------|
+| `MobileMapLayer` | 移动端地图图层组件 | `<MobileMapLayer>` |
+| `MobileBaseLayerSwitch` | 移动端底图切换组件 | `<MobileBaseLayerSwitch :data="layersData" />` |
+
+## API 文档
+
+### MapContainer 组件
+
+#### Props
+
+| 属性名 | 类型 | 描述 | 默认值 |
+|-------|------|------|--------|
+| `mapViewData` | `Object` | 地图视图配置 | `{}` |
+| `switchData` | `Object` | 地图切换配置 | `{}` |
+| `layerData` | `Array` | 图层数据 | `[]` |
+| `toolsData` | `Array` | 工具数据 | `[]` |
+| `searchData` | `Array` | 搜索数据 | `[]` |
+
+#### Events
+
+| 事件名 | 参数 | 描述 |
+|-------|------|------|
+| `load` | `map: GSMap` | 地图加载完成事件 |
+
+#### Slots
+
+| 插槽名 | 描述 |
+|-------|------|
+| `bottom-left` | 地图左下角插槽 |
+| `bottom-right` | 地图右下角插槽 |
+| `top-left` | 地图左上角插槽 |
+| `top-right` | 地图右上角插槽 |
+
+### GSMap 实例
+
+#### 方法
+
+| 方法名 | 参数 | 描述 |
+|-------|------|------|
+| `pubsub.on` | `event: string, callback: Function` | 订阅地图事件 |
+| `pubsub.emit` | `event: string, data: any` | 发布地图事件 |
+| `manager.templateManager.add` | `id: string, template: string` | 添加模板 |
+| `manager.maskManager.add` | `data: string` | 添加遮罩 |
+
+## 配置项
+
+### mapViewData 配置
+
+```javascript
+{
+  zoom: 9, // 初始缩放级别
+  center: [120.65677441301864, 29.745141743380103], // 初始中心点坐标
+  style: {
+    glyphs: "http://www.gisx.work/map-assets/fonts/{fontstack}/{range}.pbf", // 字体配置
+  },
+  icons: [ // 图标配置
+    {
+      name: 'point', // 图标名称
+      label: "点", // 图标标签
+      url: 'assets/icons/point.png', // 图标路径
+    }
+  ]
+}
+```
+
+### switchData 配置
+
+```javascript
+{
+  layers: [ // 底图配置
+    {
+      name: "tdt-vec", // 图层名称
+      label: "标准地图", // 图层标签
+      iconName: "vector", // 图标名称
+      checked: true // 是否默认选中
+    }
+  ],
+  extensions: [ // 扩展配置
+    {
+      name: "tdt-cia", // 扩展名称
+      label: "注记", // 扩展标签
+      checked: true, // 是否默认选中
+      config: { // 扩展配置
+        source: {
+          tiles: ["http://www.gisx.work/tiles/dem/{z}_{x}_{y}.webp"]
+        }
+      }
+    }
+  ]
+}
+```
+
+## 示例
+
+### 完整示例
+
+```vue
+<template>
+  <MapContainer 
+    :mapViewData="mapViewData" 
+    :switchData="switchData" 
+    :layerData="layerData"
+    :toolsData="toolsData" 
+    :searchData="searchData" 
+    @load="onMapLoad"
+  >
+    <template #bottom-left>
+      <GisMapCompass />
+    </template>
+    <template #top-right>
+      <MobileMapLayer>
+        <MobileBaseLayerSwitch :data="switchData.layers" />
+      </MobileMapLayer>
+    </template>
+  </MapContainer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { MapContainer, GisMapCompass, GSMap, MobileMapLayer, MobileBaseLayerSwitch } from '@gis_victory/gismap';
+
+const mapViewData = reactive({
+  zoom: 9,
+  center: [120.65677441301864, 29.745141743380103],
+  style: {
+    glyphs: "http://www.gisx.work/map-assets/fonts/{fontstack}/{range}.pbf",
+  },
+  icons: [
+    {
+      name: 'point',
+      label: "点",
+      url: 'assets/icons/point.png',
+    }
+  ]
+});
+
+const switchData = reactive({
+  layers: [{
+    name: "tdt-vec",
+    label: "标准地图",
+    iconName: "vector",
+    checked: true
+  }, {
+    name: "tdt-img",
+    label: "卫星影像",
+    iconName: "satellite",
+    checked: false
+  }],
+  extensions: [{
+    name: "tdt-cia",
+    label: "注记",
+    checked: true,
+  }]
+});
+
+const layerData = ref([]);
+const toolsData = ref([]);
+const searchData = ref([]);
+
+let map: GSMap;
+const onMapLoad = (_map: GSMap) => {
+  map = _map;
+  // 地图加载完成后的操作
+  map.pubsub.on('layer:click', ({ templateId, feature }: { templateId: string, feature: any }) => {
+    const template = map.manager?.templateManager?.renderHtml(templateId, feature.properties);
+    if (template) {
+      map.manager?.popupManager.show({
+        position: feature.geometry.coordinates,
+        html: template,
+      });
+    }
+  });
+};
+
+// 初始化数据
+onMounted(() => {
+  // 这里可以加载图层数据、工具数据和搜索数据
+});
+</script>
+```
+
+## 开发指南
+
+### 本地开发
+
+1. 克隆仓库
+
+```bash
+git clone <repository-url>
+cd gismap
+```
+
+2. 安装依赖
+
+```bash
+npm install
+```
+
+3. 启动开发服务器
+
+```bash
+npm run dev
+```
+
+4. 构建生产版本
+
+```bash
+npm run build
+```
+
+### 发布版本
+
+```bash
+# 更新版本号
+npm version patch
+# 构建
+npm run build
+# 发布
+npm publish
+```
+
+## 浏览器兼容性
+
+- Chrome (最新版本)
+- Firefox (最新版本)
+- Safari (最新版本)
+- Edge (最新版本)
+
+## 许可证
+
+MIT

package/dist/index.es.js

@@ -95176,6 +95176,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           });
           break;
       }
+      map2?.pubsub.emit(`switch:click`, {
+        checked: item.checked,
+        data: item
+      });
     };
     onMounted(() => {
       props.data.layers.forEach((item) => {