高德地图绘制多边形

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32768743/article/details/85704813

官方示例地址：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;

},

差不多就是这样