百度地圖GeoUtils示例

博讯科技工作室發表於2024-09-05

簡介

百度地圖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>

執行效果如圖:

這裡寫圖片描述

百度地圖開發-引入地圖SDK並配置 02
2021-08-26
地圖
對接百度地圖API
2019-03-18
地圖API
自定義百度地圖元件
2020-10-22
地圖元件
百度地圖-課程安排
2024-10-31
地圖
mapboxgl 糾偏百度地圖
2021-10-11
地圖
地圖資料採集，包括百度地圖採集，高德地圖採集，360地圖採集
2024-04-28
地圖
百度地圖開發-顯示地圖預設介面 03
2021-08-27
地圖
百度地圖開發-與地圖的互動功能 06
2021-08-30
地圖
百度地圖開發-實現離線地圖功能 05
2021-08-29
地圖
百度離線地圖瓦片圖製作
2020-09-30
地圖
百度地圖開發-在地圖上檢索資料 08
2021-09-01
地圖
地圖開發筆記（一）：百度地圖介紹、使用和Qt內嵌地圖Demo
2021-01-10
地圖筆記QT
百度地圖軌跡(Andriod SDK)
2018-10-11
地圖
百度地圖爬蟲(c#)
2018-09-09
地圖爬蟲C#
百度地圖API功能演示
2018-09-05
地圖API
造“車輪”的百度地圖
2019-12-13
地圖
百度地圖反饋樣式
2019-03-21
地圖
百度地圖API基本使用（一）
2021-08-05
地圖API
Android Studio 百度地圖導航
2021-08-31
Android地圖
百度地圖API : 自定義標註圖示
2020-10-21
地圖API
百度地圖API圖示、文字、圖例與連線
2019-05-24
地圖API
vue 專案中引用百度地圖
2018-12-19
Vue地圖
淺談百度地圖API的坑
2018-10-15
地圖API
Vue百度地圖電子圍欄
2020-11-12
Vue地圖
vue專案中使用百度地圖
2020-12-10
Vue地圖
百度地圖開發-在地圖上實現路線導航 09
2021-09-02
地圖
百度地圖，您所使用的地圖JS API版本過低，解決方法
2024-07-23
地圖JSAPI
百度地圖sn驗證golang實現
2018-12-13
地圖Golang
百度地圖POI爬蟲(Python3)
2018-09-07
地圖爬蟲Python
百度地圖POI爬取寫入TXT
2018-09-08
地圖
百度地圖電子圍欄判斷
2018-09-05
地圖
前端 – 百度地圖 API 基礎入門
2019-03-04
前端地圖API
百度地圖，點聚合展示速度優化
2018-04-03
地圖優化
百度地圖、高德地圖收藏夾位置資訊匯出小工具分享
2024-11-15
地圖
百度地圖JavaScript API 學習之地址解析
2019-04-06
地圖JavaScriptAPI
百度地圖-大資料量點實時更新
2019-04-15
地圖大資料
在 HTTPS 專案中使用百度地圖 API
2019-04-09
HTTP地圖API
百度地圖新增懸浮窗搜尋功能
2018-12-14
地圖

百度地圖GeoUtils示例

簡介

幾何運算

GeoUtils.html

執行效果如圖:

相關文章