@gis_victory/gismap 组件库

一个基于 Vue 3 + TypeScript + Vite 开发的 GIS 地图组件库，提供丰富的地图交互功能和移动端适配。

特性

• 📦 开箱即用的地图组件
• 🎨 支持多种地图样式和图层
• 📱 移动端适配
• 🔍 地图搜索功能
• 🎯 地图工具和控件
• 📍 标记和弹窗
• 📊 图例和数据可视化
• 🔄 地图切换和扩展

安装

npm install @gis_victory/gismap
# 或
yarn add @gis_victory/gismap

快速开始

基础使用

<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 配置

{
  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 配置

{
  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"]
        }
      }
    }
  ]
}

示例

完整示例

<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. 克隆仓库

git clone <repository-url>
cd gismap

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 构建生产版本

npm run build

发布版本

# 更新版本号
npm version patch
# 构建
npm run build
# 发布
npm publish

浏览器兼容性

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)

许可证

MIT