vue-amap实现多种形式的地理围栏效果

前言

最近又收到了一个需求,需要做地理围栏,要求:地理围栏需要多种类型(圆形,多边形),同时允许存在多个地理围栏,编辑不同的地理围栏,要调整到对应的地理围栏上进行编辑 。于是基于vue-amap 做了如下一个版本的效果:
请添加图片描述

一、安装vue-amap 并引入

这块网上都有教程,这边就不在过多的叙述的。以下是我找的链接:https://blog.csdn.net/u010227042/article/details/119386501

二、引入遮罩层(圆形和多边形)

代码如下:

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

这里为什么需要写 :ref=“circle_${index}” ?因为在项目中存在多个地理围栏,需要定义唯一值,到时候编辑的时候,才可以获取到你所点击的那个地理围栏。

三.添加多边形和圆形的地理围栏

代码如下(示例):

请添加图片描述

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

在这里插入图片描述```

 // 添加多边形区域
    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)
    }

在点击右侧两种类型的图标以后,默认出现圆形的地理围栏或者多边形的地理围栏。

四.编辑圆形和多边形

请添加图片描述

请添加图片描述


总结

总体来说,做单个地理位置的难度不大,但一旦涉及到多个不同类型的地理围栏,可能就存在一点难度,但问题也不是很大,只需要多查询一下文档,多动动脑子,也是可以解决的。

如需项目demo,微信扫下面的二维码,注册成功,到下面的我的-联系客服 问我要代码请添加图片描述
![请添加图片描述](https://img-blog.csdnimg.cn/direct/4f701effc6a745a18efb69acee114dc2.jpeg =450x650

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue-amap 是一个基于 Vue.js 的高德地图组件库,支持在线地图和离线地图。实现高德离线地图,需要先下载离线地图数据,在 Vue-amap 中引入并配置离线地图数据即可。 以下是实现步骤: 1. 下载离线地图数据:在高德官网下载离线地图数据,下载后解压缩得到离线地图数据文件夹。 2. 在 Vue 项目中安装 vue-amap: ``` npm install vue-amap --save ``` 3. 在 main.js 中引入和配置 vue-amap: ``` import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation'], // 默认高德 sdk 版本为 1.4.4 v: '1.4.4', // 配置离线地图数据路径,注意路径要使用绝对路径 uiVersion: '1.0', map: { // 配置离线地图数据路径,注意路径要使用绝对路径 mapStyle: 'amap://styles/whitesmoke', features: ['bg', 'road', 'building'], customMapStyle: { 'styleJson': [ { 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'land', 'elementType': 'all', 'stylers': { 'color': '#f3f3f3' } }, { 'featureType': 'railway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'color': '#fdfdfd' } }, { 'featureType': 'highway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'poi', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'subway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'local', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'arterial', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'building', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'label', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#999999' } } ] }, // 配置离线地图数据路径,注意路径要使用绝对路径 zooms: [3, 20], viewMode: '3D', expandZoomRange: true }, // 配置离线地图数据路径,注意路径要使用绝对路径 filePath: '/path/to/offline/map/data' }); ``` 注意,需要将 filePath 设置为离线地图数据文件夹的绝对路径。 4. 在组件中使用 Vue-amap: ``` <template> <el-amap :zoom="13" :center="center"> <el-amap-marker :position="center"></el-amap-marker> </el-amap> </template> <script> export default { data () { return { center: [116.397428, 39.90923] }; } }; </script> ``` 在 el-amap 中设置 zoom 和 center 即可显示地图。el-amap-marker 可以设置标记点。 至此,就完成了 Vue-amap 实现高德离线地图的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

搞不动的前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值