创建leaflet地图以下省略...
引用 安装 使用
npm i leaflet.pm
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";
methods:{
mapInit(){
// this.map 为实例
// 创建插件的工具栏
this.map.pm.addControls({
position: "topleft",//工具栏位置 可选值'topleft'`, `'topright'`, `'bottomleft'`, `'bottomright'
drawMarker: false, // 是否显示添加点工具
drawCircleMarker:true,// 圆形
drawPolyline:true,
drawRectangle:true,
drawPolygon:true,
drawCircle:true,
editMode:true,
dragMode:true,
cutPolygon:true,
removalMode:true,
});
position默认为topleft 其余为true
👆👆👆👆
// 设置语言为中文
this.map.pm.setLang("zh");
// 监听绘制开始
this.map.on("pm:drawstart", (e) => {
});
// 监听绘制结束
this.map.on("pm:drawend", (e) => {
});
// 监听绘制完成
this.map.on("pm:create", (e) => {
// 如果需要自定义时那就记录下当前的 layer 用leaflet官方提供的方法进行清除
this.graphicslayerlist.push(e.layer);
});
}
// 自定义按钮绘制多边形
mapAddPolygon(){
//可选绘制图形类型
['Marker', 'CircleMarker', 'Line', 'Polygon', 'Rectangle', 'Circle', 'Cut']
this.map.pm.enableDraw("Polygon", {
snappable: true,
snapDistance: 20,
});
},
// 清除已有的图形
removePolygon(){
// 调用 leaflet 的 removeLayer 方法清除点
this.graphicslayerlist.forEach((layer) => {
this.map.removeLayer(layer);
});
}
}
我业务中有一个需求判断某一个点在不在绘制的图形里面
//判断一个点的经纬度是否在规划的区域内
var isPointInPolygon = function(point,pts){
var N = pts.length; //pts [{lat:xxx,lng:xxx},{lat:xxx,lng:xxx}]
var boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
var intersectCount = 0;//cross points count of x
var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
var p1, p2;//neighbour bound vertices
var p = point; //point {lat:xxx,lng:xxx}
p1 = pts[0];//left vertex
for(var i = 1; i <= N; ++i){//check all rays
if((p.lat==p1.lat)&&(p.lng==p1.lng)){
return boundOrVertex;//p is an vertex
}
p2 = pts[i % N];//right vertex
if(p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)){//ray is outside of our interests
p1 = p2;
continue;//next ray left point
}
if(p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)){//ray is crossing over by the algorithm (common part of)
if(p.lng <= Math.max(p1.lng, p2.lng)){//x is before of ray
if(p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)){//overlies on a horizontal ray
return boundOrVertex;
}
if(p1.lng == p2.lng){//ray is vertical
if(p1.lng == p.lng){//overlies on a vertical ray
return boundOrVertex;
}else{//before ray
++intersectCount;
}
}else{//cross point on the left side
var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;//cross point of lng
if(Math.abs(p.lng - xinters) < precision){//overlies on a ray
return boundOrVertex;
}
if(p.lng < xinters){//before ray
++intersectCount;
}
}
}
}else{//special case when ray is crossing through the vertex
if(p.lat == p2.lat && p.lng <= p2.lng){//p crossing over p2
var p3 = pts[(i+1) % N]; //next vertex
if(p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)){//p.lat lies between p1.lat & p3.lat
++intersectCount;
}else{
intersectCount += 2;
}
}
}
p1 = p2;//next ray left point
}
if(intersectCount % 2 == 0){//偶数在多边形外
return false;
} else { //奇数在多边形内
return true;
}
};
上面该方法转载于 blog.csdn.net/qilin001cs/…
// 使用
this.map.on("pm:create", (e) => {
this.isPointInPolygon(
{ lat: 43.85755411013405, lng:87.59742736816408},
e.layer._latlngs[0]
)
});
简单的记录自己学习过程 涉及到新功能会更新文章
