更新记录

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）

组件事件（Events）

方法（Methods）

高级用法

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（初始版本）

平台兼容性

uni-app

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）

组件事件（Events）

方法（Methods）

高级用法

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！ 🎉