更新记录

1.0.0（2025-04-30）

x1cms-tianditu - 天地图打点绘制组件

版本：1.0.0（2025-04-30）

平台兼容性

uni-app(4.33)

其他

x1cms-tianditu - 天地图打点绘制组件

1.0.0（2025-04-30）

项目演示

H5 演示

APP演示

组件介绍

x1cms-tianditu 是一款基于 Leaflet + Turf.js 开发，适用于 UniApp 的天地图打点绘制组件。 支持自定义打点、多边形闭合、面积计算、中心点生成、已有地块展示等功能，广泛适用于地块标注、农田管理、城市规划、测绘标注等业务场景。

组件兼容 App端（Android/iOS）、H5端，小程序端通过 web-view 方式加载。

适配情况

注意事项

• 由于本组件使用 Leaflet 地图库，需要在 App.vue 全局引入样式：

  <style src="leaflet/dist/leaflet.css"></style>

• 微信小程序端需配合 <web-view> 承载页面，确保天地图加载正常。
• 使用 renderjs 特性，需要开启 vue3 + nvue 编译支持。

安装方式

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

基本用法

<template>
  <view class="content">
    <x1cms-tianditu @save="handleSave"></x1cms-tianditu>
  </view>
</template>

<script setup>
function handleSave(data) {
  console.log('保存的地块信息：', data);
}
</script>

组件属性（Props）

组件事件（Events）

组件方法（Methods）

高级用法示例

1️⃣ 监听保存地块数据

<x1cms-tianditu @save="handleSave"></x1cms-tianditu>

<script setup>
function handleSave({ centerPoint, area, geojson }) {
  console.log('中心点：', centerPoint);
  console.log('面积（亩）：', area);
  console.log('GeoJSON数据：', geojson);
}
</script>

2️⃣ 显示已有地块数据（多块）

<x1cms-tianditu :multiLandData="lands"></x1cms-tianditu>

<script setup>
const lands = [
  {
    positions: [
      { lat: 30.0, lng: 120.0 },
      { lat: 30.1, lng: 120.1 },
      { lat: 30.2, lng: 120.2 }
    ],
    center: [30.05, 120.05],
    name: '地块A',
    iconUrl: '/static/marker.png',
    landInfo: {
      id: 1,
      name: '测试地块'
    }
  }
];
</script>

3️⃣ 微信小程序使用说明

• 小程序端需使用 web-view 打开外部 H5 页面，引入 x1cms-tianditu 实现地图打点。
• 示例：

  <web-view src="https://your-domain.com/tianditu-map.html"></web-view>

• 小程序端需要申请天地图 key 并配置可信域名。

组件特点总结

• ✅ Leaflet底图，天地图服务
• ✅ 支持中心点打点、撤销打点、闭合绘制
• ✅ 自动计算多边形面积（亩）
• ✅ 生成标准GeoJSON坐标数据
• ✅ 支持绘制已有多个地块，点击展示详细信息
• ✅ 全平台适配（H5、App、小程序通过WebView）
• ✅ 使用 Easycom 自动导入

版本更新

v1.0.0（初始发布）

• ✏️ 支持地图中心打点
• ✏️ 支持闭合绘制多边形
• 📐 支持面积计算（亩）
• 📍 支持保存中心点、面积、geojson数据
• 📦 支持展示多地块功能（带Marker和Tooltip）

未来计划

📌 支持地块编辑功能（增删改）
📌 增加地图切换功能（矢量/影像）
📌 支持手动上传GeoJSON文件绘制
📌 适配百度地图、高德地图等其他底图服务

贡献指南

如果你对 x1cms-tianditu 有更多想法或发现了问题，欢迎提交 Issue 或 Pull Request！🌟