更新记录

2.2.1（2025-10-23）

更新日志

v2.2.1 (2025-10-23)

✨ 新功能

• 自定义返回按钮：左上角新增圆形返回按钮
  • 圆形设计，44×44px 易于点击
  • 白色背景 + 柔和阴影
  • 使用自定义 back.svg 图标
  • 悬停变淡蓝背景，图标变蓝色
  • 点击缩放动画反馈
  • 调用 uni.navigateBack() 返回上一页

平台兼容性

uni-app(4.25)

uni-app x(4.25)

x1cms-leaflet - 天地图 + Leaflet Draw 绘制组件

组件介绍

x1cms-leaflet 是一个集成了 Leaflet 地图库和 Leaflet.draw 绘制工具的 UniApp 地图组件。基于天地图底图服务，支持多种图形绘制、编辑、删除功能，并自动计算多边形面积和中心点，适用于地块标注、规划绘制、测绘标注等业务场景。

核心特性

✅ 基于 Leaflet + Leaflet.draw + Leaflet-Geoman：提供专业的地图绘制工具 ✅ 完整中文化：所有工具栏、提示信息均已中文化 ✅ 天地图底图：使用天地图影像和注记图层 ✅ 多种绘制工具：多边形、矩形、圆形、折线、标记点 ✅ 图层编辑：支持编辑和删除已绘制的图层 ✅ 高级功能：裁剪、旋转、拖拽图层 ✅ 面积计算：自动计算多边形、矩形、圆形的面积（亩） ✅ 中心点计算：使用 Turf.js 计算多边形质心 ✅ 自定义控件：精美的 SVG 图标按钮 ✅ 全平台支持：H5 和 App-Plus（通过 renderjs） ✅ EasyCom 规范：无需手动引入，开箱即用

适配情况

安装方式

本组件遵循 easycom 规范，使用 HBuilderX 3.1.0 及以上版本，直接将组件导入项目即可，无需手动 import 或注册。

依赖安装

# 使用 pnpm 安装依赖
pnpm install leaflet leaflet-draw @turf/turf @geoman-io/leaflet-geoman-free

# 或使用 npm
npm install leaflet leaflet-draw @turf/turf @geoman-io/leaflet-geoman-free

全局样式引入

重要：必须在 App.vue 中引入 Leaflet、Leaflet.draw 和 Leaflet-Geoman 的 CSS 样式：

<style src="leaflet/dist/leaflet.css"></style>
<style src="leaflet-draw/dist/leaflet.draw.css"></style>
<style src="@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"></style>

基本用法

<template>
  <view class="container">
    <x1cms-leaflet
      :latitude="36.0617"
      :longitude="103.8343"
      :zoom="14"
      @layerCreated="handleLayerCreated"
      @layerEdited="handleLayerEdited"
      @layerDeleted="handleLayerDeleted"
    />
  </view>
</template>

<script>
export default {
  methods: {
    handleLayerCreated(data) {
      console.log('图层已创建:', data)
      // data 包含: type, id, latlngs, area, centerPoint, geojson
    },
    handleLayerEdited(data) {
      console.log('图层已编辑:', data)
    },
    handleLayerDeleted(data) {
      console.log('图层已删除:', data)
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

组件属性（Props）

existingLayers 数据格式

[
  {
    type: 'polygon',  // 图层类型: polygon, polyline, circle, marker
    latlngs: [[36.06, 103.83], [36.07, 103.83], [36.07, 103.84]],
    color: '#37b153',  // 可选，边框颜色
    fillColor: '#28c073',  // 可选，填充颜色
    fillOpacity: 0.5,  // 可选，填充透明度
    weight: 3  // 可选，边框宽度
  }
]

组件事件（Events）

layerCreated 事件返回数据

{
  type: 'polygon',  // 图层类型
  id: 12345,  // 图层唯一ID
  latlngs: [[36.06, 103.83], [36.07, 103.83], ...],  // 坐标数组
  area: '123.45',  // 面积（亩），仅多边形和圆形
  centerPoint: {  // 中心点，仅多边形
    latitude: 36.065,
    longitude: 103.835
  },
  geojson: '[[103.83,36.06],[103.83,36.07],...]'  // GeoJSON 格式
}

组件方法（Methods）

可以通过 ref 调用组件方法：

<x1cms-leaflet ref="mapRef" />

绘制工具说明

组件在地图右上角提供以下绘制工具（完整中文界面）：

• 绘制多边形：点击开始绘制，继续点击添加顶点，点击第一个点闭合多边形
• 绘制矩形：点击并拖动鼠标绘制矩形区域
• 绘制圆形：点击中心点并拖动调整半径
• 绘制折线：点击添加折线节点，双击完成
• 添加标记：点击地图添加位置标记
• 编辑图层：拖动控制点编辑已绘制的图形
• 删除图层：点击要删除的图层进行移除

中文化说明

组件已完整中文化，包括：

• ✅ 工具栏按钮文字（绘制多边形、绘制矩形、绘制圆形等）
• ✅ 绘制时的提示信息（点击开始绘制、点击继续绘制等）
• ✅ 编辑工具栏文字（编辑图层、删除图层、保存、取消等）
• ✅ 操作提示（拖动控制点编辑、点击要删除的要素等）
• ✅ 错误提示信息

所有文本均采用符合中文使用习惯的表达方式，提供更好的用户体验。

高级用法

1️⃣ 加载已有图层

<template>
  <x1cms-leaflet :existingLayers="savedLayers" />
</template>

<script>
export default {
  data() {
    return {
      savedLayers: [
        {
          type: 'polygon',
          latlngs: [
            [36.06, 103.83],
            [36.07, 103.83],
            [36.07, 103.84],
            [36.06, 103.84]
          ],
          color: '#ff0000',
          fillColor: '#ff0000',
          fillOpacity: 0.3
        }
      ]
    }
  }
}
</script>

2️⃣ 监听绘制事件并保存数据

<script>
export default {
  data() {
    return {
      allLayers: []
    }
  },
  methods: {
    handleLayerCreated(data) {
      // 保存到本地数组
      this.allLayers.push(data)

      // 发送到服务器
      uni.request({
        url: '/api/save-layer',
        method: 'POST',
        data: {
          type: data.type,
          coordinates: data.latlngs || data.center,
          area: data.area,
          centerPoint: data.centerPoint
        },
        success: (res) => {
          console.log('保存成功:', res)
        }
      })
    }
  }
}
</script>

3️⃣ 获取所有图层数据

<template>
  <view>
    <x1cms-leaflet ref="mapRef" />
    <button @tap="saveAllLayers">保存所有图层</button>
  </view>
</template>

<script>
export default {
  methods: {
    saveAllLayers() {
      const layers = this.$refs.mapRef.getAllLayers()
      console.log('所有图层:', layers)

      // 保存到本地存储
      uni.setStorageSync('saved_layers', JSON.stringify(layers))

      uni.showToast({
        title: `已保存 ${layers.length} 个图层`,
        icon: 'success'
      })
    }
  }
}
</script>

4️⃣ 清除所有图层

<script>
export default {
  methods: {
    clearAll() {
      uni.showModal({
        title: '确认清除',
        content: '确定要清除所有绘制的图层吗？',
        success: (res) => {
          if (res.confirm) {
            this.$refs.mapRef.clearAllLayers()
            uni.showToast({
              title: '已清除',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

测试页面

项目中已包含完整的测试页面，位于 pages/leaflet-test/leaflet-test.vue。

访问方式：

uni.navigateTo({
  url: '/pages/leaflet-test/leaflet-test'
})

注意事项

1. 样式引入：必须在 App.vue 中引入 leaflet.css 和 leaflet.draw.css
2. 依赖安装：确保已安装 leaflet、leaflet-draw、@turf/turf 依赖
3. 定位权限：组件会自动获取用户位置，需在 manifest.json 中声明定位权限
4. 坐标系统：使用 GCJ-02（火星坐标系），天地图使用 EPSG:4326 投影
5. 性能优化：大量图层时建议使用图层分组和按需加载

天地图 API Key

组件默认使用的天地图 Key 仅供测试使用，生产环境请申请自己的 Key：

1. 访问 天地图官网
2. 注册账号并申请开发者 Key
3. 在组件代码中替换 TK 常量的值

const TK = '你的天地图Key'

版本记录

v2.1.0（2025-10-23）

• 🚀 集成 Leaflet-Geoman：新增裁剪、旋转、拖拽高级功能
• ✂️ 裁剪功能：绘制裁剪区域自动裁切图层
• 🔄 旋转功能：拖动手柄精确旋转图形
• 👆 拖拽功能：平滑拖动移动图层位置
• 🎨 新增 3 个 SVG 图标按钮

v2.0.0（2025-10-23）

• 🚀 架构升级：完全自定义控件系统
• 🎨 自定义缩放控件：SVG 图标 + 白色卡片设计
• 🎨 自定义绘制工具栏：7 个 SVG 图标按钮，完全掌控样式
• ✨ 淡蓝色激活状态，Material Design 风格
• ⚡ 更好性能，更灵活定制

v1.1.0（2025-10-23）

• 🎨 精致界面设计：白色卡片风格，简洁现代
• 📍 缩放控件：左下角 32px 按钮，白色背景 + 柔和阴影
• 🎨 绘制工具栏：白色卡片 32px 按钮，紧凑布局
• ✏️ 操作按钮：28px 轻量设计，悬停淡蓝反馈
• ✨ 统一圆角 4-8px，双层阴影，0.2s 快速过渡

v1.0.6（2025-10-23）

• 🎨 重大视觉优化：美化绘制和编辑时的控制点（拐点）图标
• 🔵 蓝色圆形绘制顶点，🟢 绿色圆形编辑控制点，🟠 橙色中间点
• ✨ 悬停变红色放大，拖动高亮显示，所有状态平滑过渡动画
• 🚫 移除丑陋方框，替换为精美圆形 + 阴影 + 光晕效果

v1.0.5（2025-10-23）

• 🎨 视觉优化：美化标记点图标，替换白色方框为精美的渐变红色定位图标
• ✨ 使用 SVG 自定义图标，支持高清显示和阴影效果

v1.0.4（2025-10-23）

• 🎨 用户体验优化：移除内置返回按钮，由外部页面控制导航
• 🐛 修复工具栏漂移：修复点击工具后工具栏位置向上移动的问题

v1.0.3（2025-10-23）

• 🐛 重要修复：彻底解决圆形编辑时 radius is not defined 崩溃问题
• 🔧 修复根本原因：保存 leaflet-draw 原始配置，避免重复调用时丢失
• ⚡ 优化初始化流程，移除重复的配置调用

v1.0.2（2025-10-23）

• 🐛 Bug 修复：修复圆形编辑时 radius is not defined 错误
• 🐛 Bug 修复：修复矩形绘制时 type is not defined 错误
• ✅ 完善中文配置，添加完整的测量单位函数
• ✅ 增强编辑功能，圆形编辑时显示中文提示
• ✅ 智能单位转换：大面积显示公顷，长距离显示千米

v1.0.1（2025-10-23）

• ✨ 重要更新：完整中文化
• ✅ Leaflet.draw 工具栏完整中文化
• ✅ 所有绘制提示信息中文化
• ✅ 编辑和删除操作提示中文化
• ✅ 优化用户体验

v1.0.0（2025-10-23）

• ✨ 初始版本发布
• ✅ 集成 Leaflet + Leaflet.draw
• ✅ 支持多边形、矩形、圆形、折线、标记点绘制
• ✅ 支持图层编辑和删除
• ✅ 自动计算面积和中心点
• ✅ 支持 H5 和 App-Plus 平台
• ✅ 提供完整的测试页面

未来计划

📌 支持更多地图底图（高德、百度、OpenStreetMap） 📌 支持自定义绘制工具样式 📌 支持图层导入导出（GeoJSON、KML） 📌 支持测距和测面积工具 📌 支持图层搜索和筛选 📌 优化小程序端支持

技术支持

如有问题或建议，欢迎提交 Issue 或 Pull Request！

许可证

MIT License