更新记录

1.0（2025-05-30） 下载此版本

1.适配微信小程序、H5、抖音小程序差label适配中 2.自定义区域名称开发中

平台兼容性

uni-app(4.01)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ × √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ - label适配中 - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
√ × √

rm-regionImg

​ 可以在图片中绘制多边形，控制多边形的背景、边框、颜色、markers图标，图标labes等，适配微信小程序、H5、抖音小程序等。适用于公园、学校、农田地点区域标记。

​ 天地图还在开发中，目前仅支持传入图片做为地图绘制区域和图标标记。

​ 建议及反馈请发送邮箱:1940787338@qq.com

组件说明

props

        props: {
            imgConfig: {
                type: Object,
                required: true,
                default: () => ({})
            },
            markers: {
                type: Array,
                default: () => []
            },
            lines: {
                type: Array,
                default: () => []
            },
        },

imgConfig（图片配置）

属性 说明 类型 默认值 是否必须
url 图片链接 string '' 是
width 图片宽度 number undefined 是
height 图片高度 number undefined 是

markers（图标配置）

属性 说明 类型 默认值 是否必须
id 唯一标识，不可相同 number undefined 是
labels 图标上方的标签 Array [] 否
coorX 图标相对于图片的X轴 number undefined 是
coorY 图标相对于图片的Y轴 number undefined 是
iconSize 图标大小 number 16 否
className 自定义类名 string 无 否
iconUrl 图标路径，支持网络路径和本地，不支持base64 string 默认图标 否

lines（线、面、区域配置）

属性 说明 类型 默认值 是否必须
type 线的类型，目前只支持多边形绘制 string 'Polygon' 是
lineList 线框坐标(多个)，起始点必须和结尾闭合形成闭环 Array [] 是
style 线的样式 Object {} 是
lineList（线框坐标）
属性 说明 类型 默认值 是否必须
coorX 线的当前点相对于图片的X number undefined 是
coorY 线的当前点相对于图片的Y number undefined 是
style（线的样式）
属性 说明 类型 默认值 是否必须
color 线框的颜色，目前仅支持16进制 string undefined 是
fillColor 框选区域的背景颜色，目前仅支持16进制 string undefined 是
fillOpacity 背景透明度 范围:[0-1] number {} 是
fill 是否需要填充 boolean true 否
width 线的宽度 number 2 否

备注说明：

目前绘制线框和图标，都是以图片左上角为起始点。

快速开始

1.导入组件，并且在template中使用

<RmRegionImg :lines="lines" :markers="markers" :imgConfig="imgConfig"></RmRegionImg>
<script>
    import RmRegionImg from '@/components/rm-regionImg/rm-regionImg'
    export default {
        components: {
            RmRegionImg
        },
        data() {
            return {
                imgConfig:{
                    url: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/gfy/gy.png',
                    width: 1235,
                    height: 737,
                },
                markers: [
                    {
                        id: 1,
                        labels:['设备名称:工业篮球场', '使用时间:2025年6月'],
                        coorX: 336.609908,
                        coorY: 737 - 401.041064,
                        iconSize: 15,
                        className: 'flicker',
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                    {
                        id: 2,
                        labels:['设备名称:北门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 436.053212,
                        coorY: 737 - 559.018306,
                        iconSize: 16,
                        iconUrl: '/static/img/camera.png'
                    },
                    {
                        id: 3,
                        labels:['设备名称:南门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 707.609929,
                        coorY: 737 - 101.64871,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/gfy/lookYou.png'
                    },
                    {
                        id: 4,
                        labels:['地点名称:桃李园餐厅'],
                        coorX: 706.335015,
                        coorY: 737 - 333.518533,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                    {
                        id: 5,
                        labels:['设备名称:南门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 462.82641,
                        coorY: 737 - 294.024222,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                    {
                        id: 6,
                        labels:['设备名称:南门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 942.194135,
                        coorY: 737 - 483.851715,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                ],
                lines:[
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 220.592719, coorY: 737 - 590.868556 }, 
                        { coorX: 243.541174, coorY: 737 - 83.81257 },
                        { coorX: 1060.761152, coorY: 737 - 116.93683 },
                        { coorX: 1064.585894, coorY: 737 - 598.512617 },
                        { coorX: 220.592719, coorY: 737 - 590.868556 },
                      ],
                      style: {
                          color: '#3388ff',
                          fillColor: '#3388ff',
                          fillOpacity: 0.2,
                          fill: false,
                          width: 3
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 272.864199, coorY: 737 - 472.385625 }, 
                        { coorX: 267.764543, coorY: 737 - 319.504423 },
                        { coorX: 414.379672, coorY: 737 - 324.600463 },
                        { coorX: 415.654586, coorY: 737 - 481.303695 },
                        { coorX: 272.864199, coorY: 737 - 472.385625 },
                      ],
                      style: {
                          color: '#16DD20',
                          fillColor: '#16DD20',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 483.225036, coorY: 737 - 543.730186 }, 
                        { coorX: 484.49995, coorY: 737 - 402.315074 },
                        { coorX: 671.912332, coorY: 737 - 404.863094 },
                        { coorX: 677.011989, coorY: 737 - 553.922266 },
                        { coorX: 483.225036, coorY: 737 - 543.730186 },
                      ],
                      style: {
                          color: '#3388ff',
                          fillColor: '#3388ff',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 256.290315, coorY: 737 - 262.173972 }, 
                        { coorX: 261.389972, coorY: 737 - 105.47074 },
                        { coorX: 410.554929, coorY: 737 - 111.84079 },
                        { coorX: 409.280015, coorY: 737 - 265.996002 },
                        { coorX: 256.290315, coorY: 737 - 262.173972 }, 
                      ],
                      style: {
                          color: '#B3D020',
                          fillColor: '#B3D020',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 739.482783, coorY: 737 - 547.552216 }, 
                        { coorX: 733.108212, coorY: 737 - 402.315074 },
                        { coorX: 893.747397, coorY: 737 - 402.315074 },
                        { coorX: 886.097912, coorY: 737 - 551.374246 },
                        { coorX: 739.482783, coorY: 737 - 547.552216 }, 
                      ],
                      style: {
                          color: '#DF1FE2',
                          fillColor: '#DF1FE2',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 733.108212, coorY: 737 - 313.134373 }, 
                        { coorX: 731.833298, coorY: 737 - 122.03287 },
                        { coorX: 883.548083, coorY: 737 - 128.40292 },
                        { coorX: 880.998255, coorY: 737 - 323.326453 },
                        { coorX: 733.108212, coorY: 737 - 313.134373 }, 
                      ],
                      style: {
                          color: '#0EBBEB',
                          fillColor: '#0EBBEB',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 430.953556, coorY: 737 - 251.981892 }, 
                        { coorX: 433.503384, coorY: 737 - 123.30688 },
                        { coorX: 677.011989, coorY: 737 - 124.58089 },
                        { coorX: 674.462161, coorY: 737 - 282.558132 },
                        { coorX: 430.953556, coorY: 737 - 251.981892 }, 
                      ],
                      style: {
                          color: '#C20664',
                          fillColor: '#C20664',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                ]
            }
        },
    }
</script>

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

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

加载更多...