更新记录

1.0.0(2025-02-25) 下载此版本

x1cms-map - 地图打点组件

组件介绍

x1cms-map 是一个基于 Uniapp map 组件的地图打点插件,支持绘制多边形、计算面积、保存地块数据,并可展示已有地块信息。主要适用于地理标注、农田管理、规划测绘等场景。

适配情况

  • 本组件 仅在微信小程序 端测试过,其他平台请自行适配。

安装方式

本组件符合 easycom 规范,HBuilderX 3.1.0 及以上版本,只需将组件导入项目,无需额外 importcomponents 注册,可直接在 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 位置,并更新 latitudelongitude
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(初始版本)


平台兼容性

Vue2 Vue3
×
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 及以上版本,只需将组件导入项目,无需额外 importcomponents 注册,可直接在 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 位置,并更新 latitudelongitude
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! 🎉

隐私、权限声明

1. 本插件需要申请的系统权限列表:

定位

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问