mtk-map

MT Map

基于 Vue 2 和 MapTalks 的地图组件库

特性

• 🗺️ 基于 MapTalks 的高性能地图引擎
• 🧩 丰富的 Vue 组件，包括地图、图层、几何图形、控件等
• 📦 开箱即用，支持按需加载
• 📝 完整的文档和示例

安装

npm install mt-map
# 或
yarn add mt-map
# 或
pnpm add mt-map

快速开始

<template>
  <mt-map :center="[116.4074, 39.9042]" :zoom="12">
    <mt-map-tile-layer :url-template="urlTemplate" />
    <mt-map-marker :coordinate="[116.4074, 39.9042]" />
  </mt-map>
</template>

<script>
import { MtMap, MtMapTileLayer, MtMapMarker } from 'mt-map'

export default {
  components: {
    MtMap,
    MtMapTileLayer,
    MtMapMarker
  },
  data() {
    return {
      urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    }
  }
}
</script>

组件列表

基础组件

• MtMap - 地图容器

图层组件

• MtMapTileLayer - 瓦片图层
• MtMapVectorLayer - 矢量图层
• MtMapImageLayer - 图片图层
• MtMapWmsLayer - WMS 图层
• MtMapGroupTileLayer - 瓦片图层组
• MtMapParticleLayer - 粒子图层

几何图形

• MtMapMarker - 标记点
• MtMapLineString - 线
• MtMapPolygon - 多边形
• MtMapCircle - 圆形
• MtMapRectangle - 矩形
• MtMapEllipse - 椭圆
• MtMapSector - 扇形
• MtMapLabel - 标签
• MtMapTextBox - 文本框

控件

• MtMapZoom - 缩放控件
• MtMapScale - 比例尺
• MtMapCompass - 指南针
• MtMapOverview - 鹰眼图
• MtMapLayerSwitcher - 图层切换器
• MtMapToolbar - 工具栏
• MtMapPanel - 面板
• MtMapSearch - 搜索

工具

• MtMapDrawTool - 绘制工具
• MtMapDistanceTool - 测距工具
• MtMapAreaTool - 测面工具

UI 组件

• MtMapInfoWindow - 信息窗口
• MtMapMenu - 右键菜单
• MtMapTooltip - 提示框

插件

• MtMapMarkerClusterLayer - 点聚合图层
• MtMapUiMarkerClusterLayer - UI 点聚合图层
• MtMapRoutePlayer - 路线播放器

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建文档
pnpm build:doc

# 构建组件库
pnpm build

许可证

MIT