vue实现高德地图多边形绘制电子围栏

<template>
  <div class="index">
    <el-button type="primary" @click="drawRectangle">绘制多边形</el-button>
    <el-button type="primary" @click="editRectangle">编辑多边形</el-button>
    <el-button type="primary" @click="deleRectangle">删除多边形</el-button>
    <div id="amapContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'amapFence',
  data () {
    return {
      path: [], // 当前绘制的多边形经纬度数组
      polygonItem: [], // 地图上绘制的所有多边形对象
      polyEditors: []  // 所有编辑对象数组
    }
  },
  props: {
    paths: {} // 编辑
  },
  mounted () {
    this.intAmap(() => {
      if (this.paths) {
        this.editRectangle(this.paths);
      }
    });
  },
  methods: {
    // 地图初始化
    intAmap (callBack) {
      this.AMap = window.AMap;
      this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar'], function () {
        //TODO  创建控件并添加
      });
      this.map = new this.AMap.Map("amapContainer", {
        center: [116.434381, 39.898515],
        zoom: 14,
        mapStyle: "amap://styles/darkblue",
        pitch: 80,
        rotation: -15,
        viewMode: '3D',//开启3D视图,默认为关闭
        buildingAnimation: true,//楼块出现是否带动画
      });
      this.map.addControl(new this.AMap.ControlBar());
      if (callBack && typeof callBack == 'function') {
        callBack();
      }
    },
    // 编辑围栏
    editRectangle (paths) {
      const path = paths;
      const AMap = window.AMap;
      var polygon = new this.AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50,
      });

      this.map.add(polygon);
      this.polygonItem.push(polygon);
      // 缩放地图到合适的视野级别
      this.map.setFitView([polygon]);

      this.polyEditor = new AMap.PolyEditor(this.map, polygon);
      this.polyEditor.open();
      this.polyEditors.push(this.polyEditor);

      this.polyEditor.on('addnode', function (event) {
        console.info('触发事件:addnode', event)
        console.info('修改后的经纬度:', polygon.getPath())
      });

      this.polyEditor.on('adjust', function (event) {
        console.info('触发事件:adjust', event)
        console.info('修改后的经纬度:', polygon.getPath())
      });

      this.polyEditor.on('removenode', function (event) {
        console.info('触发事件:removenode', event)
        console.info('修改后的经纬度:', polygon.getPath())
      });

      this.polyEditor.on('end', function (event) {
        console.info('触发事件: end', event)
        console.info('修改后的经纬度:', polygon.getPath())
        // event.target 即为编辑后的多边形对象
      });
    },
    // 绘制多边形
    drawRectangle () {
      const vm = this;
      this.mouseTool = new this.AMap.MouseTool(this.map);
      const polygon = this.mouseTool.polygon({
        strokeColor: 'red',
        strokeOpacity: 0.5,
        strokeWeight: 6,
        fillColor: 'blue',
        fillOpacity: 0.5,
        // strokeStyle还支持 solid
        strokeStyle: 'solid',
        // strokeDasharray: [30,10],
      });

      this.mouseTool.on('draw', function (event) {
        // event.obj 为绘制出来的覆盖物对象
        var polygonItem = event.obj;
        var paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
        console.log('覆盖物对象绘制完成各个点的坐标', paths);
        var path = [];  // 编辑的路径
        paths.forEach(v => {
          path.push([v.lng, v.lat])
        });
        vm.path = path;
        vm.editRectangle(vm.path);
        vm.polygonItem.push(event.obj);
        vm.map.remove(event.obj); // 删除多边形
        console.log(polygon, '------polygon-----');
      });
    },
    // 批量删除多边形
    deleRectangle () {
      // 取消编辑状态
      this.polyEditors.forEach(v => {
        v.close();
      });
      this.map.clearMap(); // 删除地图所有覆盖物
    },
  }
}
</script>

<style lang="scss" scoped>
#amapContainer {
  height: 800px;
  width: 1000px;
}
</style>

  • 4
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 27
    评论
好的,您提到的问题是关于在 Vue绘制多边形并进行编辑的问题,对吗?那么,您可以使用高德地图 JavaScript API 中提供的绘制工具类来实现这一功能。具体步骤如下: 1. 引入高德地图 JavaScript API 和绘制工具类库: ```javascript <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> ``` 2. 在 Vue 组件中创建地图容器,生成地图实例,并加载绘制工具类库: ```javascript <template> <div id="mapContainer"></div> </template> <script> export default { name: 'Map', mounted() { this.initMap(); }, methods: { initMap() { const map = new AMap.Map('mapContainer', { zoom: 10, center: [116.397428, 39.90923], }); AMap.plugin(['AMap.MouseTool'], () => { // 初始化鼠标绘制工具 const mouseTool = new AMap.MouseTool(map); // 监听draw事件,获取绘制的图形对象 AMap.event.addListener(mouseTool, 'draw', (e) => { console.log(e.obj); // e.obj为绘制出来的图形对象 // TODO: 将图形对象保存到state中,用于后续编辑 }); }); }, }, }; </script> ``` 3. 在绘制完成后,将绘制的图形对象保存到 state 中,以便进行后续编辑: ```javascript // 将绘制的图形对象保存到state中 // state.polygons为一个数组,保存所有已绘制多边形对象 state.polygons.push(e.obj); ``` 4. 对已绘制多边形对象进行编辑: ```javascript // 对已绘制多边形对象进行编辑 const drawPolygon = (polygon) => { // 使用多边形编辑插件 const polygonEditor = new AMap.PolyEditor(map, polygon); // 开启编辑模式 polygonEditor.open(); // 监听编辑完成事件,保存编辑后的多边形对象到state中 AMap.event.addListener(polygonEditor, 'end', (e) => { console.log(e.target); // e.target为当前编辑的多边形对象 // TODO: 保存编辑后的多边形对象到state中 }); }; ``` 希望这个回答能够帮助您解决问题。如果您还有其他问题,可以继续向我提出。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值