百度地圖GeoUtils示例
簡介
百度地圖JavaScript開源庫，是一套基於百度地圖API二次開發的開源的程式碼庫。目前提供多個lib庫，幫助開發者快速實現在地圖上新增Marker、自定義資訊視窗、標註相關開發、區域限制設定、幾何運算、實時交通、檢索與公交駕車查詢、滑鼠繪製工具等功能。
幾何運算
GeoUtils類提供若干幾何演算法，用來幫助使用者判斷點與矩形、 圓形、多邊形線、多邊形面的關係,並提供計算折線長度和多邊形的面積的公式。 主入口類是GeoUtils。
GeoUtils.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>GeoUtils示例</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<style type="text/css">
table{
font-size:14px;
}
</style>
</head>
<body>
<div style="float:left;width:600px;height:500px;border:1px solid gray" id="container">
</div>
<div style="float:left;width:300px;height:500px;border:1px solid gray" id="control">
<table style="width:100%;">
<tr>
<td colspan="2">
點與矩形的關係:
</td>
</tr>
<tr>
<td>
<input type="button" value="點在矩形內" onclick="ptInRect()"/>
</td>
<td>
<input type="button" value="點在矩形外" onclick="ptOutRect()"/>
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr>
<td colspan="2">
點與圓形的關係:
</td>
</tr>
<tr>
<td>
<input type="button" value="點在圓形內" onclick="ptInCircle()"/>
</td>
<td>
<input type="button" value="點在圓形外" onclick="ptOutCircle()"/>
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr>
<td colspan="2">
計算折線長度:
</td>
</tr>
<tr>
<td>
<input type="button" value="引數為折線" onclick="computeLenByPolyine()"/>
</td>
<td>
<input type="button" value="引數為點陣列" onclick="computeLenByArray()"/>
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr>
<td colspan="2">
計算多邊形面積:
</td>
</tr>
<tr>
<td>
<input type="button" value="引數為多邊形" onclick="computeAreaByPolygon()"/>
</td>
<td>
<input type="button" value="引數為點陣列" onclick="computeAreaByArray()"/>
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr>
<td colspan="2">
判斷點是否在折線上:
</td>
</tr>
<tr>
<td>
<input type="button" value="點在折線上" onclick="ptOnPolyline()"/>
</td>
<td>
<input type="button" value="點在折線外" onclick="ptOutPolyline()"/>
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr>
<td colspan="2">
判斷點是否在多邊形內:
</td>
</tr>
<tr>
<td>
<input type="button" value="點在多邊形內" onclick="ptInPolygon()"/>
</td>
<td>
<input type="button" value="點在多邊形外" onclick="ptOutPolygon()"/>
</td>
</tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var pt = new BMap.Point(116.404, 39.915);
map.centerAndZoom(pt, 16);
map.enableScrollWheelZoom();//開啟滾動縮放
map.enableContinuousZoom();//開啟縮放平滑
//點在矩形內
function ptInRect(){
var pt = new BMap.Point(116.404, 39.915);//測試點
var pt1 = new BMap.Point(116.400, 39.910);//西南腳點
var pt2 = new BMap.Point(116.410, 39.920);//東北腳點
var bds = new BMap.Bounds(pt1, pt2); //測試Bounds物件
var result = BMapLib.GeoUtils.isPointInRect(pt, bds);
if(result == true){
alert("點在矩形內");
} else {
alert("點在矩形外")
}
//演示：將點與矩形新增到地圖上
map.clearOverlays();
var mkr = new BMap.Marker(pt);
var pts = [];
//bds的四個腳點座標
var leftTop = new BMap.Point(pt1.lng, pt2.lat);
var rightTop = new BMap.Point(pt2.lng, pt2.lat);
var leftBottom = new BMap.Point(pt1.lng, pt1.lat);
var rightBottom = new BMap.Point(pt2.lng, pt1.lat);
pts.push(leftTop);
pts.push(rightTop);
pts.push(rightBottom);
pts.push(leftBottom);
var rect = new BMap.Polygon(pts);
map.addOverlay(mkr);//新增測試點
map.addOverlay(rect);//新增測試矩形
}
//點在矩形外
function ptOutRect(){
var pt = new BMap.Point(116.398, 39.915);//測試點
var pt1 = new BMap.Point(116.400, 39.910);//西南腳點
var pt2 = new BMap.Point(116.410, 39.920);//東北腳點
var bds = new BMap.Bounds(pt1, pt2); //測試Bounds物件
var result = BMapLib.GeoUtils.isPointInRect(pt, bds);
if(result == true){
alert("點在矩形內");
} else {
alert("點在矩形外")
}
//演示：將點與矩形新增到地圖上
map.clearOverlays();
var mkr = new BMap.Marker(pt);
var pts = [];
//bds的四個腳點座標
var leftTop = new BMap.Point(pt1.lng, pt2.lat);
var rightTop = new BMap.Point(pt2.lng, pt2.lat);
var leftBottom = new BMap.Point(pt1.lng, pt1.lat);
var rightBottom = new BMap.Point(pt2.lng, pt1.lat);
pts.push(leftTop);
pts.push(rightTop);
pts.push(rightBottom);
pts.push(leftBottom);
var rect = new BMap.Polygon(pts);
map.addOverlay(mkr);//新增測試點
map.addOverlay(rect);//新增測試矩形
}
//點在圓內
function ptInCircle(){
var pt = new BMap.Point(116.404, 39.915);//測試點
var c = new BMap.Point(116.404, 39.915); //圓心
var circle = new BMap.Circle(c, 500);//測試圓
var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);
if(result == true){
alert("點在圓形內");
} else {
alert("點在圓形外")
}
//演示：將點與圓形新增到地圖上
map.clearOverlays();
var mkr = new BMap.Marker(pt);
map.addOverlay(mkr);
map.addOverlay(circle);
}
//點在圓外
function ptOutCircle(){
var pt = new BMap.Point(116.396, 39.915);//測試點
var c = new BMap.Point(116.404, 39.915); //圓心
var circle = new BMap.Circle(c, 500);//測試圓
var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);
if(result == true){
alert("點在圓形內");
} else {
alert("點在圓形外")
}
//演示：將點與圓形新增到地圖上
map.clearOverlays();
var mkr = new BMap.Marker(pt);
map.addOverlay(mkr);
map.addOverlay(circle);
}
//計算長度，引數為折線
function computeLenByPolyine(){
var pts = [];
var pt1 = new BMap.Point(116.400,39.910);
var pt2 = new BMap.Point(116.402,39.912);
var pt3 = new BMap.Point(116.403,39.914);
var pt4 = new BMap.Point(116.404,39.917);
var pt5 = new BMap.Point(116.406,39.918);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var ply = new BMap.Polyline(pts);
var dis = BMapLib.GeoUtils.getPolylineDistance(ply);
alert("共" + dis.toFixed(2) + "米");
//演示：將線新增到地圖上
map.clearOverlays();
map.addOverlay(ply);
}
//計算長度，引數為點陣列
function computeLenByArray(){
var pts = [];
var pt1 = new BMap.Point(116.400,39.910);
var pt2 = new BMap.Point(116.402,39.912);
var pt3 = new BMap.Point(116.403,39.914);
var pt4 = new BMap.Point(116.404,39.917);
var pt5 = new BMap.Point(116.406,39.918);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var dis = BMapLib.GeoUtils.getPolylineDistance(pts);
alert("共" + dis.toFixed(2) + "米");
//演示：將線新增到地圖上
var ply = new BMap.Polyline(pts, {strokeColor: "red", strokeStyle:"dashed"});
map.clearOverlays();
map.addOverlay(ply);
}
//計算面積，引數為多邊形
function computeAreaByPolygon(){
var pts = [];
var pt1 = new BMap.Point(116.395, 39.910);
var pt2 = new BMap.Point(116.394, 39.918);
var pt3 = new BMap.Point(116.396, 39.919);
var pt4 = new BMap.Point(116.404, 39.920);
var pt5 = new BMap.Point(116.406, 39.913);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var ply = new BMap.Polygon(pts);
var area = BMapLib.GeoUtils.getPolygonArea(ply);
alert("共" + area.toFixed(2) + "平方米");
//演示：將面新增到地圖上
map.clearOverlays();
map.addOverlay(ply);
}
//計算面積，引數為陣列
function computeAreaByArray(){
var pts = [];
var pt1 = new BMap.Point(116.395, 39.910);
var pt2 = new BMap.Point(116.394, 39.918);
var pt3 = new BMap.Point(116.396, 39.919);
var pt4 = new BMap.Point(116.404, 39.920);
var pt5 = new BMap.Point(116.406, 39.913);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var area = BMapLib.GeoUtils.getPolygonArea(pts);
alert("共" + area.toFixed(2) + "平方米");
//演示：將面新增到地圖上
var ply = new BMap.Polygon(pts, {strokeColor: "red", strokeStyle:"dashed", fillColor:"gray"});
map.clearOverlays();
map.addOverlay(ply);
}
//點在折線上
function ptOnPolyline(){
var pts = [];
var pt1 = new BMap.Point(116.395, 39.910);
var pt2 = new BMap.Point(116.405, 39.920);
var pt3 = new BMap.Point(116.410, 39.920);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
var ply = new BMap.Polyline(pts);
var pt = new BMap.Point(116.400, 39.915);
var result = BMapLib.GeoUtils.isPointOnPolyline(pt, ply);
if(result == true){
alert("點在折線上");
} else {
alert("點在折線外")
}
map.clearOverlays();
var mkr = new BMap.Marker(pt);
map.addOverlay(mkr);
map.addOverlay(ply);
}
//點在折線外
function ptOutPolyline(){
var pts = [];
var pt1 = new BMap.Point(116.395, 39.910);
var pt2 = new BMap.Point(116.405, 39.920);
var pt3 = new BMap.Point(116.410, 39.920);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
var ply = new BMap.Polyline(pts);
var pt = new BMap.Point(116.401, 39.915);
var result = BMapLib.GeoUtils.isPointOnPolyline(pt, ply);
if(result == true){
alert("點在折線上");
} else {
alert("點在折線外")
}
map.clearOverlays();
var mkr = new BMap.Marker(pt);
map.addOverlay(mkr);
map.addOverlay(ply);
}
//點在多邊形內
function ptInPolygon(){
var pts = [];
var pt1 = new BMap.Point(116.395, 39.910);
var pt2 = new BMap.Point(116.394, 39.914);
var pt3 = new BMap.Point(116.403, 39.920);
var pt4 = new BMap.Point(116.402, 39.914);
var pt5 = new BMap.Point(116.410, 39.913);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var ply = new BMap.Polygon(pts);
var pt =new BMap.Point(116.400, 39.914);
var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
if(result == true){
alert("點在多邊形內");
} else {
alert("點在多邊形外")
}
//演示：將面新增到地圖上
map.clearOverlays();
var mkr = new BMap.Marker(pt);
map.addOverlay(mkr);
map.addOverlay(ply);
}
//點在多邊形外
function ptOutPolygon(){
var pts = [];
var pt1 = new BMap.Point(116.395, 39.910);
var pt2 = new BMap.Point(116.394, 39.914);
var pt3 = new BMap.Point(116.396, 39.919);
var pt4 = new BMap.Point(116.406, 39.920);
var pt5 = new BMap.Point(116.410, 39.913);
pts.push(pt1);
pts.push(pt2);
pts.push(pt3);
pts.push(pt4);
pts.push(pt5);
var ply = new BMap.Polygon(pts);
var pt =new BMap.Point(116.410, 39.915);
var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
if(result == true){
alert("點在多邊形內");
} else {
alert("點在多邊形外")
}
//演示：將面新增到地圖上
map.clearOverlays();
var mkr = new BMap.Marker(pt);
map.addOverlay(mkr);
map.addOverlay(ply);
}
</script>執行效果如圖:
相關文章
- 百度地圖之基礎地圖地圖
- 百度地圖介面地圖
- 百度地圖API入門——（5）百度地圖API的簡介地圖API
- 安卓百度地圖定位安卓地圖
- 百度地圖例項地圖
- 百度地圖開發-引入地圖SDK並配置 02地圖
- 地圖資料採集，包括百度地圖採集，高德地圖採集，360地圖採集地圖
- 對接百度地圖API地圖API
- 百度地圖軌跡(Andriod SDK)地圖
- 自定義百度地圖元件地圖元件
- 百度地圖-簡單整合地圖
- 百度地圖整合_定位功能地圖
- 百度地圖 ~ 覆蓋物地圖
- HTML呼叫百度地圖APIHTML地圖API
- 使用百度地圖問題地圖
- 百度地圖開發-實現離線地圖功能 05地圖
- 百度地圖開發-與地圖的互動功能 06地圖
- 百度地圖開發-在地圖上檢索資料 08地圖
- 百度地圖開發-顯示地圖預設介面 03地圖
- 百度離線地圖瓦片圖製作地圖
- 利用百度地圖實現支付寶 “到位” 功能（地圖模式）地圖模式
- 利用百度地圖進行地圖定位並實時上傳地圖
- 造“車輪”的百度地圖地圖
- 百度地圖反饋樣式地圖
- 百度地圖API基本使用（一）地圖API
- 百度地圖爬蟲(c#)地圖爬蟲C#
- 百度地圖API功能演示地圖API
- mapboxgl 糾偏百度地圖地圖
- 百度地圖開發步驟地圖
- 百度地圖POI抓取——python地圖Python
- Android載入百度地圖Android地圖
- 地圖開發筆記（一）：百度地圖介紹、使用和Qt內嵌地圖Demo地圖筆記QT
- 百度地圖API : 自定義標註圖示地圖API
- 百度地圖API圖示、文字、圖例與連線地圖API
- 淺談百度地圖API的坑地圖API
- vue 專案中引用百度地圖Vue地圖
- vue專案中使用百度地圖Vue地圖
- Vue百度地圖電子圍欄Vue地圖