VUE调用高德地图之电子围栏

之前用VUE实现了高德地图的历史轨迹回放热力图,现在来实现电子围栏功能。
所谓电子围栏,就是地图上限定的区域内实现限行功能,用我们身边的事物来举例,共享单车的限行、限停区域就是电子围栏。由此可见,电子围栏最基础的做法就是在地图上实现多边形覆盖物。

照例,第一步:加载JS AP

  • 在public/index.html中加入:
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>
  • 放置地图极控制功能
    地图控制
  • 初始化地图
    初始化地图
  • 绘制多边形
    多边形
    如果需要一次绘制多个矢量图形,可以删除__this.mouseTool.close()这一行,并在“结束并保存”按钮功能里实现。

其余函数功能的实现,参见完整代码:

<template>
  <div>
    <div id="container"></div>
    <div class="input-card">
      <h4>电子围栏绘制</h4>
      <div class="input-item">
        <input type="button" class="btn" value="开始绘制" id="start" @click="startDrawPolygon()" />
        <input type="button" class="btn" value="清空" id="pause" @click="clearPolygon()" />
      </div>
      <div class="input-item">
        <input type="button" class="btn" value="结束并保存" id="resume" @click="stopAndSave()" />
        <input type="button" class="btn" value="重新绘制" id="stop" @click="redrawPolygon()" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
  data() {
    return {
      map: null,
      mouseTool: null,
      polyType: {
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 4,
        strokeOpacity: 0.2,
        fillColor: "#1791fc",
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: "solid"
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      },
      polygonList: [],
      savedPolygon: []
    };
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [114.459779, 38.087936],
        zoom: 16
      });
    },
    startDrawPolygon() {
      this.clearPolygon();
      let __this = this;
      this.map.plugin("AMap.MouseTool", function() {
        __this.mouseTool = new AMap.MouseTool(__this.map);
      });
      this.mouseTool.polygon(this.polyType);
      //监听draw事件可获取画好的覆盖物
      this.polygonList = [];
      this.mouseTool.on("draw", function(e) {
        __this.polygonList.push(e.obj);
        console.log("绘制的多边形", __this.polygonList);
        __this.mouseTool.close();
      });
    },
    stopAndSave() {
      // this.mouseTool.close();
      let savedPolygon = [];
      for (let i = 0; i < this.polygonList.length; i++) {
        console.log(this.polygonList[i].getOptions());
        let op = this.polygonList[i].getOptions();
        let routePath = [];
        op.path.forEach(item => {
          routePath.push([item.lng, item.lat]);
        });
        let savearr = {
          path: routePath,
          strokeColor: op.strokeColor,
          strokeOpacity: op.strokeOpacity,
          fillOpacity: op.fillOpacity,
          fillColor: op.fillColor,
          zIndex: op.zIndex
        };
        this.savedPolygon.push(savearr);
      }
      let save = JSON.stringify(this.savedPolygon);
      console.log("savedPolygon", save);
      // 模拟数据库存取
      sessionStorage.setItem("savedPolygon", save);
    },
    clearPolygon() {
      // this.map.remove(this.polygonList);
      this.polygonList = [];
      this.map.clearMap(); // 清除地图上的所有覆盖物
    },
    // 用保存的数据重新绘制多边形并添加事件
    redrawPolygon() {
      let __this = this;
      // 用浏览器模拟数据库存取
      let savedPolygon = JSON.parse(sessionStorage.getItem("savedPolygon"));
      console.log("重绘多边形数据", savedPolygon);
      if (savedPolygon == null) return;
      for (let i = 0; i < savedPolygon.length; i++) {
        var polygon = new AMap.Polygon(savedPolygon[i]);
        this.map.add(polygon);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
#container {
  width: 100%;
  height: 500px;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>

启动项目,一切正常!

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue是一个流行的JavaScript框架,可以用于构建用户界面。高德地图是一种流行的地图服务,它提供了丰富的地图功能和API。电子围栏是一种边界区域,当特定的设备或人员进入或离开该区域时会触发警报或其他特定操作。 在Vue中使用高德地图电子围栏,首先需要在Vue项目中引入高德地图的JavaScript API,可以通过在index.html文件中引入相应的脚本来实现,然后在组件中使用Vue的生命周期钩子函数进行初始化和销毁。 在组件中,我们可以使用高德地图的API创建一个地图实例,并设置地图的中心点和缩放级别。然后,我们可以使用地图的绘图工具来创建电子围栏的多边形或圆形,可以通过监听绘图结束事件来获取围栏的坐标信息。 接下来,我们可以使用高德地图的围栏服务API来创建电子围栏。可以通过调用相应的方法,传入围栏的名称、坐标信息和其他参数来创建电子围栏。可以根据需求设置围栏的类型,如圆形、多边形等,以及警报触发的条件和动作。 在Vue中,可以通过使用指令或绑定事件来实现与电子围栏的交互。可以使用v-on指令来监听电子围栏的进入或离开事件,并触发相应的方法或动作。可以在方法中实现警报、通知或其他功能,以响应电子围栏的状态变化。 总之,Vue高德地图电子围栏可以通过使用高德地图的API和Vue的生命周期钩子函数,实现在Vue项目中创建和管理电子围栏及其交互的功能。通过结合Vue的灵活性和高德地图的丰富功能,可以实现各种场景下的电子围栏应用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值