高德地图绘制多边形

官方示例地址：https://lbs.amap.com/api/javascript-api/example/overlayers/overlay-draw
draw事件比较坑，需要

结束时触发
怎么结束呢？
那就是点击鼠标右键。

我的需求是在画点之前要判断能不能画，所以这个就用不了。
于是自己开始写
具体的实现就是充分利用这段代码

• 根据path创建一个多边形

const polygon = new AMap.Polygon({
          path: path,
          isOutline: true,
          borderWeight: 3,
          strokeColor: "#FF33FF",
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          // 线样式还支持 'dashed'
          fillColor: '#1791fc',
          zIndex: 50,
        })

• 将多边形放到高德地图上去

polygon.setMap(map)

• 销毁的话是设置为null，还有隐藏等操作具体参考文档：https://lbs.amap.com/api/javascript-api/reference/overlay#polygon

polygon.setMap(null)

• 每次画一个点，就重新创建一个多边形，销毁之前的多边形

          // 重建一个多边形
          this.currentDrawPolygon.setMap(null)
          this.currentDrawPolygon = this.createPolygon([...this.path, this.mousePoint])
          this.currentDrawPolygon.setMap(this.map)

这样就具有了和官方绘制多边形一样的行为

接下来的是自己的需求了，要判断这个点能不能画
现在只需要在点击的时候，判断一下，控制path数组的数据就行了
我的要求是相交不能添加
相交判定

      // 判断两条线段是否有交点
      segmentsIntr(a, b, c, d) {

        //快速排斥实验
        if ((a.lng > b.lng ? a.lng : b.lng) < (c.lng < d.lng ? c.lng : d.lng) ||
          (a.lat > b.lat ? a.lat : b.lat) < (c.lat < d.lat ? c.lat : d.lat) ||
          (c.lng > d.lng ? c.lng : d.lng) < (a.lng < b.lng ? a.lng : b.lng) ||
          (c.lat > d.lat ? c.lat : d.lat) < (a.lat < b.lat ? a.lat : b.lat)) {
          return false;
        }
        //跨立实验
        if ((((a.lng - c.lng) * (d.lat - c.lat) - (a.lat - c.lat) * (d.lng - c.lng)) *
          ((b.lng - c.lng) * (d.lat - c.lat) - (b.lat - c.lat) * (d.lng - c.lng))) > 0 ||
          (((c.lng - a.lng) * (b.lat - a.lat) - (c.lat - a.lat) * (b.lng - a.lng)) *
            ((d.lng - a.lng) * (b.lat - a.lat) - (d.lat - a.lat) * (b.lng - a.lng))) > 0) {
          return false;
        }
        return true;

      },

差不多就是这样