百度離線地圖根據角度畫扇形區域

項目中有需要在百度地圖上根據座標和角度畫扇形圖的需求,因爲離線地圖API暫時沒有此方法和功能,所以就在離線地圖的基礎上,加入了此方法,代碼擁有較爲詳細的註釋:

/*
 * 離線地圖擴展功能函數
 *
 * 拓展功能基於 map.js 。
 */

/**
 * 畫扇形,實際返回一個多邊形。最後要通過全局的地圖組件 map的addOverlay方法添加。(部分參數可缺省)
 * 終止角度缺省,則在起始角度上+60
 * @param {Object} lng 經度
 * @param {Object} lat 緯度
 * @param {Object} sDegree 起始角度(方向:正東到正北)
 *
 */
function drawSectorOmit(lng, lat, sDegree) {
    var radius = 100; //單位米
   //對傳入的角度從減去90度,由從正東起始,轉爲正北起始
    sDegree = sDegree - 90;
    eDegree = sDegree + 60;
    var color = "blue";
    return drawSector(lng, lat, radius, sDegree, eDegree, color);
}

/**
 * 畫扇形,實際返回一個多邊形。最後要通過全局的地圖組件 map的addOverlay方法添加
 * @param {Object} lng 經度
 * @param {Object} lat 緯度
 * @param {Object} radius 半徑
 * @param {Object} sDegree 起始角度(方向:正東到正北)
 * @param {Object} eDegree 終止角度
 * @param {Object} color 顏色
 *
 */
function drawSector(lng, lat, radius, sDegree, eDegree, color) {
    if (eDegree < sDegree) {
        console.log("drawSector() ----> 終止角度應大於起始角度");
        return "-1";
    }

    var point = new BMap.Point(lng, lat);

    var strokeColor = color; //邊線顏色
    var strokeWeight = 1; //邊線寬度
    var strokeOpacity = 0.8; //邊線透明度,取值範圍0 - 1。
    var strokeStyle = 'solid'; //邊線的樣式,solid或dashed。
    var fillColour = color; //填充顏色
    var fillOpacity = 0.4; //填充透明度


    var points = []; //創建構成多邊形的點數組
    var step = ((eDegree - sDegree) / 1000) || 1000; //根據扇形的總夾角確定每步夾角度數,最大爲1000

    points.push(point); //設置第一點(原點)

    //根據步長計算,循環獲取每步的圓弧上點的座標,存入點數組
    for (var i = sDegree; i < eDegree + 0.001; i += step) {
        points.push(EOffsetBearing(point, radius, i));
    }

    points.push(point); //設置最後一點(原點)

    //根據構成的點數組以及其他參數畫多邊形
    var polygon = new BMap.Polygon(
        points, {
            strokeColor: strokeColor,
            strokeWeight: strokeWeight,
            strokeOpacity: strokeOpacity,
            strokeStyle: strokeStyle,
            fillColor: fillColour,
            fillOpacity: fillOpacity
        });

    return polygon;
}

//使用數學的方法計算需要畫扇形的圓弧上的點座標
//point:原點; dist:半徑距離; angle:角度 (方向:緯度差爲180時,逆時針;緯度差爲-180時,順時針 )
function EOffsetBearing(point, dist, angle) {
    var lngConv = map.getDistance(point, new BMap.Point(point.lng + 0.1, point.lat)) * 10; //計算1經度與原點的距離
    var latConv = map.getDistance(point, new BMap.Point(point.lng, point.lat + 0.1)) * 10; //計算1緯度與原點的距離
    var lat = dist * Math.sin(angle * Math.PI / 180) / latConv; //正弦計算待獲取的點的緯度與原點緯度差
    var lng = dist * Math.cos(angle * Math.PI / 180) / lngConv; //餘弦計算待獲取的點的經度與原點經度差
    return new BMap.Point(point.lng + lng, point.lat + lat);
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章