更新记录
1.0.0(2025-02-25)
下载此版本
x1cms-map - 地图打点组件
组件介绍
x1cms-map
是一个基于 Uniapp map
组件的地图打点插件,支持绘制多边形、计算面积、保存地块数据,并可展示已有地块信息。主要适用于地理标注、农田管理、规划测绘等场景。
适配情况
- 本组件 仅在微信小程序 端测试过,其他平台请自行适配。
安装方式
本组件符合 easycom 规范,HBuilderX 3.1.0 及以上版本,只需将组件导入项目,无需额外 import
或 components
注册,可直接在 template
中使用。
基本用法
<template>
<view class="content">
<x1cms-map @save="handleSave"></x1cms-map>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
};
},
onLoad() {},
methods: {
handleSave(data) {
console.log("保存的地块数据:", data);
// 处理接收的中心点、面积和 geojson 数据
}
}
};
</script>
<style>
</style>
组件属性(Props)
属性名 |
类型 |
默认值 |
说明 |
latitude |
Number |
0 |
地图初始纬度 |
longitude |
Number |
0 |
地图初始经度 |
markers |
Array |
[] |
地图标记点数据 |
polygons |
Array |
[] |
地图上显示的多边形数据 |
polylines |
Array |
[] |
地图上显示的折线数据 |
max-scale |
Number |
20 |
地图最大缩放级别 |
enable-satellite |
Boolean |
true |
是否启用卫星地图模式 |
show-location |
Boolean |
true |
是否显示用户当前位置 |
组件事件(Events)
事件名 |
参数 |
说明 |
@save |
{ centerPoint, area, geojson } |
地块数据保存事件,返回中心点、面积和 geojson |
@regionchange |
event |
监听地图区域变更事件 |
方法(Methods)
方法名 |
说明 |
initLocation() |
获取用户当前 GPS 位置,并更新 latitude 和 longitude |
addPoint() |
在地图中心位置添加一个点 |
undoPoint() |
撤销最近一次打点 |
closePolygon() |
闭合多边形 |
savePolygon() |
计算多边形面积、中心点,并触发 @save 事件 |
displayLandGeoJsonOnMap() |
解析并展示已有的地块 geojson 数据 |
高级用法
1️⃣ 监听保存事件,处理地块数据
<x1cms-map @save="handleSave"></x1cms-map>
methods: {
handleSave(data) {
console.log("地块数据:", data);
// data.centerPoint -> 地块中心点
// data.area -> 地块面积(平方米)
// data.geojson -> GeoJSON 格式的坐标数据
}
}
2️⃣ 传入已有地块数据
<template>
<x1cms-map :polygons="existingLands"></x1cms-map>
</template>
<script>
export default {
data() {
return {
existingLands: [
{
points: [
{ latitude: 30.0, longitude: 120.0 },
{ latitude: 30.1, longitude: 120.1 },
{ latitude: 30.2, longitude: 120.2 },
],
strokeWidth: 3,
strokeColor: '#ff0000',
fillColor: '#ff000080'
}
]
};
}
};
</script>
3️⃣ 监听地图区域变更
<x1cms-map @regionchange="handleRegionChange"></x1cms-map>
methods: {
handleRegionChange(event) {
console.log("地图区域变更:", event);
}
}
组件特点
✅ 支持手动打点:用户可自由点击地图进行标注。✅ 支持多边形绘制:可以围成封闭区域,并计算面积。✅ 计算中心点:自动计算并返回地块中心点坐标。✅ 支持 GeoJSON:数据格式标准化,方便存储和处理。✅ EasyCom 规范:无需手动引入,即可直接使用。✅ 适用于微信小程序:提供良好的地图交互体验。
版本更新
v1.0.0(初始版本)
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
x1cms-map - 地图打点组件
组件介绍
x1cms-map
是一个基于 Uniapp map
组件的地图打点插件,支持绘制多边形、计算面积、保存地块数据,并可展示已有地块信息。主要适用于地理标注、农田管理、规划测绘等场景。
适配情况
- 本组件 仅在微信小程序 端测试过,其他平台请自行适配。
安装方式
本组件符合 easycom 规范,HBuilderX 3.1.0 及以上版本,只需将组件导入项目,无需额外 import
或 components
注册,可直接在 template
中使用。
基本用法
<template>
<view class="content">
<x1cms-map @save="handleSave"></x1cms-map>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
};
},
onLoad() {},
methods: {
handleSave(data) {
console.log("保存的地块数据:", data);
// 处理接收的中心点、面积和 geojson 数据
}
}
};
</script>
<style>
</style>
组件属性(Props)
属性名 |
类型 |
默认值 |
说明 |
latitude |
Number |
0 |
地图初始纬度 |
longitude |
Number |
0 |
地图初始经度 |
markers |
Array |
[] |
地图标记点数据 |
polygons |
Array |
[] |
地图上显示的多边形数据 |
polylines |
Array |
[] |
地图上显示的折线数据 |
max-scale |
Number |
20 |
地图最大缩放级别 |
enable-satellite |
Boolean |
true |
是否启用卫星地图模式 |
show-location |
Boolean |
true |
是否显示用户当前位置 |
组件事件(Events)
事件名 |
参数 |
说明 |
@save |
{ centerPoint, area, geojson } |
地块数据保存事件,返回中心点、面积和 geojson |
@regionchange |
event |
监听地图区域变更事件 |
方法(Methods)
方法名 |
说明 |
initLocation() |
获取用户当前 GPS 位置,并更新 latitude 和 longitude |
addPoint() |
在地图中心位置添加一个点 |
undoPoint() |
撤销最近一次打点 |
closePolygon() |
闭合多边形 |
savePolygon() |
计算多边形面积、中心点,并触发 @save 事件 |
displayLandGeoJsonOnMap() |
解析并展示已有的地块 geojson 数据 |
高级用法
1️⃣ 监听保存事件,处理地块数据
<x1cms-map @save="handleSave"></x1cms-map>
methods: {
handleSave(data) {
console.log("地块数据:", data);
// data.centerPoint -> 地块中心点
// data.area -> 地块面积(平方米)
// data.geojson -> GeoJSON 格式的坐标数据
}
}
2️⃣ 传入已有地块数据
<template>
<x1cms-map :polygons="existingLands"></x1cms-map>
</template>
<script>
export default {
data() {
return {
existingLands: [
{
points: [
{ latitude: 30.0, longitude: 120.0 },
{ latitude: 30.1, longitude: 120.1 },
{ latitude: 30.2, longitude: 120.2 },
],
strokeWidth: 3,
strokeColor: '#ff0000',
fillColor: '#ff000080'
}
]
};
}
};
</script>
3️⃣ 监听地图区域变更
<x1cms-map @regionchange="handleRegionChange"></x1cms-map>
methods: {
handleRegionChange(event) {
console.log("地图区域变更:", event);
}
}
组件特点
✅ 支持手动打点:用户可自由点击地图进行标注。✅ 支持多边形绘制:可以围成封闭区域,并计算面积。✅ 计算中心点:自动计算并返回地块中心点坐标。✅ 支持 GeoJSON:数据格式标准化,方便存储和处理。✅ EasyCom 规范:无需手动引入,即可直接使用。✅ 适用于微信小程序:提供良好的地图交互体验。
版本更新
v1.0.0(初始版本)
- 🌍 支持地图打点功能
- ✏️ 可绘制多边形区域
- 📐 计算地块面积
- 📍 返回 GeoJSON 数据
- 📌 支持撤销、闭合和保存功能
未来计划
📌 适配 H5、APP 端(当前仅适配微信小程序)📌 支持地图标注编辑📌 支持更丰富的地块管理功能
贡献指南
如果你对 x1cms-map
组件有任何改进建议或 Bug 反馈,欢迎提交 Issue 或 PR! 🎉