@smarttod/smart-map

@smarttod/smart-map

基于 MapLibre GL 的离线瓦片地图 Vue3 组件库，支持动态配置、主题切换、图层管理等功能。

功能特性

• 基于 MapLibre GL 的高性能地图渲染
• 支持矢量瓦片和栅格瓦片
• 动态图层配置（从后端API加载）
• 地图主题切换（深色/浅色模式）
• POI管理（增删改查）
• 标注绘制（点/线/面）
• 测量工具
• 半径搜索
• 楼层切换

安装

npm install @smarttod/smart-map

快速开始

基础用法

<template>
  <SmartMap :zoom="18" @map-load="handleMapLoad" />
</template>

<script setup>
import { SmartMap } from '@smarttod/smart-map'

function handleMapLoad(map) {
  console.log('地图加载完成', map)
}
</script>

配置API地址

import { setServerConfig } from '@smarttod/smart-map'

// 方式1: 使用自定义API地址
setServerConfig({
  apiUrl: 'http://192.168.1.100:8320'
})

// 方式2: 使用当前域名（默认行为，同域部署时无需配置）
setServerConfig({})

加载业务系统配置

import { getSystemConfig } from '@smarttod/smart-map/api'

// 加载指定业务系统的配置（图标、分类、图层、主题）
const config = await getSystemConfig('smart-park')
console.log(config.icons)      // 图标列表
console.log(config.categories) // 分类列表
console.log(config.layers)     // 图层列表
console.log(config.themes)     // 主题列表

使用动态图层管理器

import { useDynamicLayerManager } from '@smarttod/smart-map'

const { loadLayersFromConfig, initLayers, applyTheme } = useDynamicLayerManager(map)

// 加载图层配置
await loadLayersFromConfig('smart-park')

// 初始化图层到地图
initLayers()

// 应用主题
const theme = config.themes.find(t => t.code === 'dark')
if (theme) applyTheme(theme)

API 文档

配置方法

ServerConfig 配置项

API接口

系统管理

import { getSystems, getSystemConfig } from '@smarttod/smart-map/api'

// 获取所有业务系统
const systems = await getSystems()

// 获取指定系统的完整配置
const config = await getSystemConfig('smart-park')

图层管理

import { getLayers, createLayer, updateLayer, deleteLayer } from '@smarttod/smart-map/api'

// 获取图层列表
const layers = await getLayers('smart-park')

// 创建图层
await createLayer('smart-park', {
  layerKey: 'buildings',
  name: '建筑',
  layerType: 'fill',
  sourceType: 'postgis'
})

// 更新图层
await updateLayer('smart-park', 1, { name: '新名称' })

// 删除图层
await deleteLayer('smart-park', 1)

主题管理

import { getThemes, getThemeByCode } from '@smarttod/smart-map/api'

// 获取主题列表
const themes = await getThemes('smart-park')

// 获取指定主题
const darkTheme = await getThemeByCode('smart-park', 'dark')

POI管理

import { getPois, createPoi, updatePoi, deletePoi } from '@smarttod/smart-map/api'

// 获取POI列表
const pois = await getPois()

// 创建POI
await createPoi({
  name: '测试点',
  category: 'building',
  icon: 'marker',
  lng: 116.4,
  lat: 39.9
})

// 更新POI
await updatePoi(1, { name: '新名称' })

// 删除POI
await deletePoi(1)

组件列表

Composable列表

更新日志

见 CHANGELOG.md

环境要求

• Vue 3.4+
• MapLibre GL 4.0+

许可证

MIT