|
最近在做一个大数据人员分布的系统，需要能够在地图上自定义划分区域，并能够获取该区域内的坐标点信息，也是搞了很久才做出来，特此记录一下
1、百度地图API
首先我们需要去百度地图申请一个应用，得到密钥
http://lbsyun.baidu.com/
2、自定义区域
 代码如下：
获取自定义区域内的坐标点 - 百度地图
html,
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
/* 隐藏百度地图logo */
.anchorBL {
display: none;
}
.btn-contrail button {
margin-bottom: 30px;
margin-left: 0px!important;
background-color: #FFFFFF;
color: rgba(0, 0, 0, .5);
padding: 10px;
}
.layui-btn:hover {
background-color: #1890ff!important;
color: #FFFFFF!important;
}
.btn-click {
background-color: #1890ff!important;
color: #FFFFFF!important;
}
.BMapLib_Drawing {
position: absolute!important;
right: 150px!important;
display: none;
}
/* 隐藏工具栏 */
.BMapLib_marker {
display: none;
}
查看点
标新点
删除点
画区域
清除域
计算点
// 工具栏模式：0-查看点1-标新点2-删除点3-画区域4-清除域5-计算点
var model = 0;
// 地图上所有的点
var points = [];
// 区域内的点
var areaPoint = [];
// 切换模式
$('body').on('click', '.layui-btn', function() {
// 样式改变
$('.btn-contrail').find('.layui-btn').removeClass('btn-click');
$(this).addClass('btn-click');
// 事件监听
model = $(this).data('model');
if(3 == model) {
$('.BMapLib_Drawing').show();
} else {
$('.BMapLib_Drawing').hide();
}
// 清除域
if(4 == model) {
clearAll();
}
// 计算点
if(5 == model) {
alert('所选区域点数：' + areaPoint.length);
}
});
// 定义地图
var mp = new BMap.Map("container");
// 鼠标滚动缩放
mp.enableScrollWheelZoom(true);
// 地图中心点，并设置级别
mp.centerAndZoom(new BMap.Point(106.908, 28.1744), 10);
// 地图类型，卫星地图
mp.setMapType(BMAP_HYBRID_MAP);
// 地图缩放级别
mp.setZoom(10)
// 请求数据，并渲染地图
init();
function init() {
// 获取数据
$.get("json/data.json", function(res) {
points = res.data;
renderMap();
});
}
// 渲染地图坐标点
function renderMap() {
var markers = [];
points.forEach(v => {
// 创建新的坐标点
const marker = new BMap.Marker(new BMap.Point(v['lng'], v['lat']), {
icon: ''
})
// 为每一个点添加点击事件
marker.addEventListener('click', function() {
showPoint(v, marker);
});
markers.push(marker)
})
// 点聚合
new BMapLib.MarkerClusterer(mp, {
markers: markers
});
}
// 监听地图点击事件
mp.addEventListener("click", function(e) {
var point = e.point;
// 标新点
if(1 == model) {
// 创建新的坐标点
const marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
// 添加点击事件
marker.addEventListener('click', function() {
showPoint(point, marker);
});
// 添加坐标点到地图中
mp.addOverlay(marker);
// 将坐标点添加到我们的坐标带你集合中
points.push(point);
}
});
// 坐标点的点击事件监听
function showPoint(point, marker) {
// 查看点
if(0 == model) {
var lng = parseFloat(point.lng).toFixed(5);
var lat = parseFloat(point.lat).toFixed(5);
alert('经度：' + lng + '，纬度：' + lat);
}
// 删除点
if(2 == model) {
mp.removeOverlay(marker);
}
}
// 区域坐标点范围
var overlays = [];
// 区域划分后触发事件
var overlaycomplete = function(e) {
var position = [];
overlays.push(e.overlay);
// 获取多边形端点坐标
for(var i = 0; i
// 计算点是否在区域内
if(isInsidePolygon(v, position)) {
areaPoint.push(v)
}
})
// 关闭绘制模式
drawingManager.close();
};
// 绘制样式
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
};
// 实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(mp, {
// 是否开启绘制模式
isOpen: false,
// 是否显示工具栏
enableDrawingTool: true,
drawingToolOptions: {
// 位置
anchor: BMAP_ANCHOR_TOP_RIGHT,
// 偏离值
offset: new BMap.Size(5, 5),
// 画覆盖物工具栏上显示的可选项
drawingModes: [
BMAP_DRAWING_MARKER,
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_RECTANGLE
]
},
// 圆的样式
circleOptions: styleOptions,
// 线的样式
polylineOptions: styleOptions,
// 多边形的样式
polygonOptions: styleOptions,
// 矩形的样式
rectangleOptions: styleOptions
});
// 添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
/// 清除区域
function clearAll() {
for(var i = 0; i
const N = pts.length
let intersectCount = 0
let precision = 2e-10
// 邻界顶点
let p1, p2
let p = point
// 左顶点
p1 = pts[0]
// 检查所有射线
for(let i = 1; i
return true
}
// 右顶点
p2 = pts[i % N]
// 射线与我们无关
if(p.lat Math.max(p1.lat, p2.lat)) {
p1 = p2;
// 下一个射线左点
continue;
}
if(p.lat > Math.min(p1.lat, p2.lat) && p.lat
if(p1.lat === p2.lat && p.lng >= Math.min(p1.lng, p2.lng))
return true
if(p1.lng === p2.lng) {
if(p1.lng === p.lng) {
return true
} else {
++intersectCount
}
} else {
let xInters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;
if(Math.abs(p.lng - xInters)
// 下一个顶点
let p3 = pts[(i + 1) % N];
if(p.lat >= Math.min(p1.lat, p3.lat) && p.lat
"lng": "109.19151",
"lat": "27.73559"
},
{
"lng": "106.67668",
"lat": "26.559734"
}
]
}
如您在阅读中发现不足，欢迎留言！！！
|