高德地图创建电子围栏,鼠标单机选择电子围栏中心点

该博客详细介绍了如何在高德地图API中实现点击地图后绘制并编辑圆形区域的功能。通过监听地图点击事件,计算点击点为中心的坐标,并利用数学公式生成360个点来模拟圆形。然后创建多边形并设置编辑器,允许用户调整圆形的边界。
摘要由CSDN通过智能技术生成
//初始化地图
initMap() {
  let _this = this
  var map = new AMap.Map("mapContainer", {
    resizeEnable: true
  });
  map.on('click', function (e) {
    let centerpoint = e.lnglat
    let radius = 5000;
    const r = 6371000;   //地球的平均半径
    const numpoints = 360;
    const phase = 2 * Math.PI / numpoints;
    let pointArr = []
    //画点
    for (let i = 0; i < numpoints; i += 90) {
      // 计算坐标点
      let dx = (radius * Math.cos(i * phase));
      let dy = (radius * Math.sin(i * phase));
      // 转换成经纬度
      let dlng = dx / (r * Math.cos(centerpoint.lat * Math.PI / 180) * Math.PI / 180);
      let dlat = dy / (r * Math.PI / 180);
      let newlng = centerpoint.lng + dlng;
      let newlag = centerpoint.lat + dlat;
      pointArr.push([newlng, newlag])
    }
    var polygon = new AMap.Polygon ({
      path: pointArr,
      borderWeight: 2, // 线条宽度,默认为 1
      strokeColor: 'red', // 线条颜色
      lineJoin: 'round' // 折线拐点连接处样式
    });
    map.add(polygon);
    map.setFitView()
    let polyEditor = new AMap.PolyEditor(map, polygon);
    polyEditor.open();
    polyEditor.on('adjust', function(event) {
      _this.ruleForm.position=JSON.stringify(event.target.getPath())
    })
  });
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值