最近在做一個大資料人員分布的系統，需要能夠在地圖上自定義劃磁區域，并能夠獲取該區域內的坐標點資訊，也是搞了很久才做出來，特此記錄一下
1、百度地圖API
首先我們需要去百度地圖申請一個應用，得到密鑰
http://lbsyun.baidu.com/
2、自定義區域
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取自定義區域內的坐標點 - 百度地圖</title>
<!-- 加載滑鼠繪制樣式 -->
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
<style>
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;
}
</style>
</head>
<body>
<div style="position: fixed;top: 0;right: 0;height: 100vh;background: rgba(0,0,0,0);width: 125px;z-index: 9999999;display: flex;justify-content: center;align-items: center;">
<div class="tools" style="width: 100%;height: 100%">
<div class="btn-contrail" style="height: 100%;background: rgba(0,0,0,.5);width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<button type="button" class="layui-btn btn-click" data-model="0">查看點</button>
<button type="button" class="layui-btn" data-model="1">標新點</button>
<button type="button" class="layui-btn" data-model="2">洗掉點</button>
<button type="button" class="layui-btn" data-model="3">畫區域</button>
<button type="button" class="layui-btn" data-model="4">清除域</button>
<button type="button" class="layui-btn" data-model="5">計算點</button>
</div>
</div>
</div>
<!-- 地圖容器 -->
<div id="container" style="height: 100vh;width: 100%"></div>
<!-- jquery -->
<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
<!-- 百度地圖api -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>
<!-- 點聚合工具 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<!-- 點聚合工具 -->
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<!--加載滑鼠繪制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript">
// 工具列模式：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 < e.overlay.getPath().length; i++) {
let coordinate = new Object();
coordinate.lng = e.overlay.getPath()[i].lng;
coordinate.lat = e.overlay.getPath()[i].lat;
position.push(coordinate);
}
// 清空上一區域內的點
areaPoint.length = 0;
// 重新添加區域內的點
points.forEach(v => {
// 計算點是否在區域內
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 < overlays.length; i++) {
mp.removeOverlay(overlays[i]);
}
// 區域坐標置空
overlays.length = 0
}
// 計算點是否在坐標內
function isInsidePolygon(point, pts) {
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 <= N; ++i) {
// p是一個邊上的點
if(p.lat === p1.lat && p.lng === p1.lng){
return true
}
// 右頂點
p2 = pts[i % N]
// 射線與我們無關
if(p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) {
p1 = p2;
// 下一個射線左點
continue;
}
if(p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) {
if(p.lng <= Math.max(p1.lng, p2.lng)) {
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) < precision)
return true
if(p.lng < xInters)
++intersectCount
}
}
} else {
if(p.lat === p2.lat && p.lng <= p2.lng) {
// 下一個頂點
let p3 = pts[(i + 1) % N];
if(p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat))
++intersectCount
else
intersectCount += 2
}
}
// 下一個射線左點
p1 = p2
}
// 偶數在多邊形外, 奇數在多邊形內
return 0 !== intersectCount % 2
}
</script>
</body>
</html>
3、JSON 資料格式
{
"code": 200,
"msg": "操作成功",
"data": [{
"lng": "109.19151",
"lat": "27.73559"
},
{
"lng": "106.67668",
"lat": "26.559734"
}
]
}
如您在閱讀中發現不足，歡迎留言！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230312.html
標籤：其他