foreword

Recently, I received another request for geofencing. Requirements: geofences need multiple types (circle, polygon), and multiple geofences are allowed at the same time. Edit different geofences and adjust them to the corresponding geofences. edit. So based on vue-amap, the following version has the effect:

1. Install vue-amap and import

There are tutorials on this Internet, so I won’t go into too much description here. Here is the link I found: https://blog.csdn.net/u010227042/article/details/119386501

2. Introduce the mask layer (circle and polygon)

code show as below:

<el-amap
        ref="map"
        vid="amapDemo"
        class="amap-box"
        :zoom="zoom"
        :center="center"
        :events="events"
        :map-style="mapStyle"
        :plugin="plugin"
      >
        <!-- 多边形 -->
        <el-amap-polygon
          v-for="(polygon, index) in polygons"
          :key="'polygons'+ index"
          :ref="`polygon_${index}`"
          :vid="index"
          :path="polygon.path"
          :draggable="polygon.draggable"
          stroke-style="dashed"
          stroke-color="#FF0000"
          stroke-weight="1"
          fill-opacity="0.5"
          fill-color="#FF0000"
          :events="polygon.events"
        />
        <!-- 圆形 -->
        <el-amap-circle
          v-for="(circle,index) in circles"
          :key="'circles'+index"
          :ref="`circle_${index}`"
          editable="true"
          :vid="index"
          :center="circle.center"
          :radius="circle.radius"
          fill-opacity="0.5"
          fill-color="#FF0000"
          stroke-style="dashed"
          stroke-color="#FF0000"
          stroke-weight="1"
          :events="circle.events"
        />
        <!-- <el-amap-polyline :editable="polyline.editable" :path="polyline.path" :events="polyline.events" /> -->
 </el-amap>

Why do you need to write: ref=" " here circle_${index}? Because there are multiple geofences in the project, you need to define a unique value. When you edit, you can get the geofence you clicked.

3. Add polygonal and circular geofences

The code is as follows (example):

Please add a picture description

  // 添加圆形
    addCirle() {
      // 默认添加一个圆形的电子围栏
      const obj = {
        center: this.marker.position,
        radius: 100,
        isEdit: true,
        areaName: '默认围栏',
        events: {
          click: () => {
            console.log('圆形')
          }
        }
      }
      this.circles.push(obj)
    },

insert image description here ```

 // 添加多边形区域
    addArea() {
      // 默认添加一个多边形的电子围栏
      const initDate = this.marker.position
      const obj = {
        path: [
          [initDate[0], initDate[1]],
          [initDate[0] - 0.001, initDate[1]],
          [initDate[0] - 0.001, initDate[1] - 0.001],
          [initDate[0], initDate[1] - 0.001]
        ],
        draggable: false,
        areaName: '默认围栏',
        isEdit: true,
        events: {
          click(e) {
            //  _this.clickEdit(_this, this)
          }
        }
      }
      this.polygons.push(obj)
    }

After clicking the two types of icons on the right, a circular geofence or a polygonal geofence will appear by default.

4. Edit circles and polygons

Please add a picture description

Summarize

Generally speaking, it is not difficult to do a single geographic location, but once it involves multiple different types of geofences, it may be a little difficult, but the problem is not too big, just need to check the documents more and use your brain more. It can also be solved.

如果需要完整的demo 代码，请联系我邮箱：1015095073 @qq.com  微信号：sunyihao1232

Vue-amap realizes various forms of geographic fence effects