更新记录
1.1.0(2025-03-08) 下载此版本
支持点聚合新增数据录入功能等
1.0.0(2025-03-07) 下载此版本
这是一个电子围栏组件(ElectronicFence),主要功能包括在地图上绘制、编辑和管理电子围栏。用户可以通过点击地图添加围栏点位,支持围栏颜色自定义,可以保存多个围栏并进行编辑或删除。组件还提供了围栏数据的本地存储和导出功能,支持H5和微信小程序两个平台。组件具有良好的交互体验,包括点位吸附、自动闭合等功能,界面设计简洁美观。
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.54 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
电子围栏组件使用指南
一、组件简介
电子围栏组件为在地图上实现电子围栏的便捷绘制与高效管理提供了全面功能。无论是创建新围栏、调整已有围栏属性,还是对围栏数据进行处理,该组件都能满足多样化需求。
二、使用步骤
绘制围栏
点击界面上的 “绘制围栏” 按钮,此时进入绘制模式。
在地图上通过依次点击来添加围栏点位。随着点位的添加,线段会逐步连接各个点。
当最后添加的点位足够靠近起始点时,系统会自动识别并闭合围栏,完成绘制。
颜色选择
在绘制围栏的过程中,随时可进行颜色选择操作。
点击颜色选择区域,会弹出多种预设颜色供选择。这些颜色涵盖了常见且易于区分的色调,满足不同用户对围栏颜色标识的个性化需求。
选择心仪的颜色后,后续绘制的围栏线段将以所选颜色呈现。
围栏管理
保存:完成围栏绘制且确认无误后,点击 “保存围栏” 按钮。此时,绘制好的围栏信息将被存储到已保存围栏列表中,方便后续管理操作。
编辑:在已保存围栏列表中,找到需要编辑的围栏条目,点击对应的 “编辑” 按钮。进入编辑模式后,可对围栏的点位、形状、颜色等属性进行修改调整。修改完成后,点击确认保存编辑结果。
删除:若要删除某个已保存的围栏,在已保存围栏列表中点击该围栏条目的 “删除” 按钮。系统会弹出确认提示,确认删除后,该围栏将从列表中移除且相关数据被删除。
导出:如需将所有已保存的围栏数据导出以便在其他场景使用,点击 “导出围栏” 按钮。系统将自动生成包含所有围栏信息的 JSON 文件,并提供下载路径,用户可根据提示进行下载保存。
自动定位与初始位置设置
自动定位:点击 “自动定位” 按钮,组件会利用设备的定位功能(如 GPS 等)获取当前位置信息,并将地图视图自动定位到当前位置,方便基于当前位置进行围栏绘制等操作。
手动设置初始位置:若不想使用自动定位功能,可手动设置初始位置。在相应设置区域输入经纬度坐标,或者通过地图上的特定工具(如坐标拾取器)选择一个位置作为初始位置,设置完成后,地图将以该位置为初始显示区域。