mapbox-csw

基于 Mapbox GL JS 的地图功能封装库，提供更友好的 API 用于构建地图应用。

功能特性

地图交互

• 地图标记 (Markers) - 支持 Vue 组件嵌入
• 信息气泡 (Popups) - 支持文本和图片
• 鼠标事件处理 - 悬停指针效果
• 地球自转动画 - 低缩放级别时自动旋转

图层类型

| 图层类型 | 说明 | |---------|------| | Circle Layer | 矢量圆形图层，用于点要素渲染 | | Fill Layer | 矢量面图层，用于多边形填充 | | Line Layer | 矢量线图层，用于线要素 | | Symbol Layer | 符号图层，用于图标和文字标注 | | Fill Extrusion Layer | 3D 拉伸图层 | | Heat Map Layer | 热力图图层 | | Highlight Layer | 高亮选择层（单例） | | Image Layer | 图片/影像图层 | | Raster Layer | 栅格瓦片图层 | | Vector Layer | 通用矢量图层（基类） | | Layer Group | 图层组管理 |

绘图工具

• DrawLine - 点击添加点，双击完成绘制
• DrawRectangle - 点击两角绘制矩形
• DrawCurve - 手绘曲线绘制

测量工具

• DistanceMeasurement - 距离测量，支持累计距离显示
• AreaMeasurement - 面积测量，支持多边形面积计算

地图操作

• 视角飞行: flyToPoint、flyToFeature、flyToGuangdong、panToPoint
• 地图导出: exportMap - 导出地图为 PNG
• 地理计算: getPointDistance、getLineDistance、getPolygonArea
• 坐标验证: isValidLngLat
• 矢量编辑: polygonCut - 多边形裁切

底图支持

• 天地图矢量底图 (vec_w)
• 天地图影像底图 (img_w)
• 支持矢量/影像切换

安装

npm install mapbox-csw

快速开始

import { CircleLayer, createMap, DrawLine } from 'mapbox-csw'

// 创建地图
const map = createMap({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [113.27, 23.13],
  zoom: 10
})

// 添加圆形图层
const circleLayer = new CircleLayer('my-circles', {
  data: myGeoJsonFeatures,
  color: '#3388ff',
  radius: 8
})
circleLayer.addTo(map)

// 使用绘图工具
const drawLine = new DrawLine(map)
drawLine.on('drawend', (feature) => {
  console.log('绘制完成:', feature)
})

API 概览

地图创建

import { createMap } from 'mapbox-csw'

图层管理

import {
  CircleLayer,
  FillLayer,
  HeatMapLayer,
  HighlightLayer,
  ImageLayer,
  LineLayer,
  RasterLayer,
  SymbolLayer
} from 'mapbox-csw'

交互事件

import {
  addComponentMarker,
  addComponentPopup,
  pointerCursor,
  spinGlobe
} from 'mapbox-csw'

工具函数

import {
  AreaMeasurement,
  DistanceMeasurement,
  DrawCurve,
  DrawLine,
  DrawRectangle,
  exportMap,
  flyToFeature,
  flyToPoint,
  panToPoint,
  polygonCut
} from 'mapbox-csw'

项目结构

src/
├── utils/
│   ├── index.js               # 库的主入口
│   ├── createMapbox.js        # 地图实例创建
│   ├── layer/                 # 图层实现
│   │   ├── baseLayer.js       # 底图图层
│   │   ├── circleLayer.js     # 圆形图层
│   │   ├── fillLayer.js       # 面图层
│   │   ├── lineLayer.js       # 线图层
│   │   ├── symbolLayer.js     # 符号图层
│   │   └── ...                # 其他图层
│   ├── event/                 # 事件处理
│   │   ├── mapMarker.js       # 标记
│   │   ├── mapPopup.js        # 弹出框
│   │   ├── mouseEvent.js      # 鼠标事件
│   │   └── spinGlobe.js       # 地球旋转
│   └── tool/                  # 工具函数
│       ├── drawVector.js      # 绘图工具
│       ├── measureTool.js     # 测量工具
│       ├── fixedAndZoom.js     # 视角飞行
│       └── mapUtils.js        # 地图工具
├── components/
│   └── layerManager/          # 图层管理器组件
├── data/                     # 示例数据
└── example/
    └── track-typhoon.js       # 台风轨迹示例

技术栈

• Vue 3 - 框架
• Vite - 构建工具
• Mapbox GL JS - 地图引擎
• Turf.js - 地理空间分析

版本

v0.0.7

作者

ReBeX ([email protected])