# 地图绘标

**Repository Path**: luodash/map-img-maker---map-plotting

## Basic Information

- **Project Name**: 地图绘标
- **Description**: RmRegionImg-地图绘标 是一款轻量且灵活的跨端区域标记组件，支持在图片上绘制多边形区域、添加自定义标记点及标签，适配微信小程序、H5、抖音小程序等多端场景，适用于园区、校园、农田等地点区域可视化标记需求。
可以在图片中绘制多边形，控制多边形的背景、边框、颜色、markers图标，图标labes等，适配微信小程序、H5、抖音小程序等。适用于公园、学校、农田地点区域标记。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://p.dcloud.net.cn/plugin?id=23675
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-05
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# **MapImgMarker  地图绘标**

## 项目概览

**RmRegionImg** 是一款轻量且灵活的跨端区域标记组件，支持在图片上绘制多边形区域、添加自定义标记点及标签，适配微信小程序、H5、抖音小程序等多端场景，适用于园区、校园、农田等地点区域可视化标记需求。

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

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

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



- ## 核心功能

  ### 1. 区域可视化标记

  - **多边形绘制**：通过坐标点定义区域，支持边框颜色、填充透明度等样式自定义
  - **标记点增强**：支持图标、悬浮标签、动态类名（如闪烁效果），覆盖设备 / 地点标记场景

  ### 2. 跨端适配优势

  - 一套组件代码，兼容 **微信小程序、H5、抖音小程序**
  - 图片 / 图标支持网络 / 本地路径，适配不同项目资源管理方式

  ### 3. 高效配置流程

  - 可视化绘图工具：通过 [在线绘制平台](https://map.draw.mbytt.love/) 生成坐标配置，无需手动计算坐标
  - 配置项自动生成：绘制完成后直接导出 `lines` `markers` 数据，快速接入项目



## 绘图网址

[[绘制地图](https://map.draw.mbytt.love/)](https://map.draw.mbytt.love/)

**注意：！！！**

如果你不知道坐标点如何给，请访问链接中进行绘制，绘制完成后点击完成之后，会直接生成数据配置项，复制过来即可。



## 快速开始

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

```html
<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>
```

## 组件说明

### props

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

#### 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     |    否    |

##### lineLabel（当前闭合区域内的文本及样式）

| 属性  |        说明        |  类型   |  默认值   | 是否必须 |
| :---: | :----------------: | :-----: | :-------: | :------: |
| text  | 闭合线区域内的文本 | string  | undefined |    否    |
| color |      文本颜色      | string  |   #000    |    否    |
| size  |      文本大小      | number  |    16     |    否    |
|   x   | 位于闭合区域的位置 | number  |    50     |    否    |
|   y   | 位于闭合区域的位置 | number  |    50     |    否    |
| show  |      是否展示      | boolean |   false   |    否    |

#### useUvLoadMarker（是否使用v-view组件来加载图标，可以拥有更好的性能）

**备注说明：**

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



### Events

| 事件名称    | 说明                               | 回调参数                  |
| ----------- | ---------------------------------- | ------------------------- |
| resize      | 计算图片显示尺寸以及距离顶部的距离 | (width,height,scaleRatio) |
| imageLoad   | 图片加载完成                       |                           |
| markerClick | 图标被点击                         | (marker)                  |

### 内置类名

marker可以在传入组件时自定义类名使用已有的内置类名

| 类名    | 作用 |
| ------- | ---- |
| flicker | 闪烁 |