<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>
          

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>
          

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>
          

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>
                <ruby id="bdb3f"></ruby>
                
    


                
  
                                            
                            
        
                
          ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便！
          廣告
        
                        
                                                                        
  

                

                
    
                
        
                
                            ## 一、經緯度轉像素
~~~
function latlng2px(lat, lng) {
    var LatLng = (function(){
        function LatLng(lat, lng){
            this.lat = lat;
            this.lng = lng;
        }
        return LatLng;
    })();
    var Point = (function(){
        function Point(x, y){
            this.x = x;
            this.y = y;
        }
        return Point;
    })();
    var pointToLineDis = function(ps, pe, p){
        var a = pe.lat - ps.lat;
        var b = ps.lng - pe.lng;
        var c = pe.lng * ps.lat - ps.lng * pe.lat;
        var dis = (a * p.lng + b * p.lat + c) / Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
        return dis;
    };
    var lineDis = function(p1, p2){
        return Math.sqrt(Math.pow(p1.lat - p2.lat, 2) + Math.pow(p1.lng - p2.lng, 2))
    };
    var p = new LatLng(25.084816, 102.933879); // 左下
    var pl = new LatLng(25.102940, 102.911459); // 左上
    var pr = new LatLng(25.115624, 102.960745); // 右下
    var getScreenPoint = function(latLngPoint){
        var lineLeft = lineDis(pl, p);
        var lineRight = lineDis(p, pr);
        var leftDis = pointToLineDis(p, pl, latLngPoint);
        var rightDis = pointToLineDis(pr, p, latLngPoint);
        var leftPercent = rightDis / lineLeft;
        var rightPercent = leftDis / lineRight;
        var x = (1920) * rightPercent; // 1920：div容器的寬度
        var y = (964) * (1 - leftPercent); // 964：div容器的高度
        return new Point(x, y);
    };
    var latlng = new LatLng(lat, lng);
    return getScreenPoint(latlng);
}
// latlng2px(25.102940, 102.911459)
~~~

由于高德地圖 **map.lngLatToContainer([Lon, Lat])** 方法在 **<=IE11** 下縮放的時候有問題，所以可以考慮使用上面的方式處理，解決兼容性問題

~~~
function latlng2px(lat, lng) {
    var bounds = map.getBounds();
    var northeast = bounds.northeast,
        southwest = bounds.southwest;
    var LatLng = (function(){
        function LatLng(lat, lng){
            this.lat = lat;
            this.lng = lng;
        }
        return LatLng;
    })();
    var Point = (function(){
        function Point(x, y){
            this.x = x;
            this.y = y;
        }
        return Point;
    })();
    var pointToLineDis = function(ps, pe, p){
        var a = pe.lat - ps.lat;
        var b = ps.lng - pe.lng;
        var c = pe.lng * ps.lat - ps.lng * pe.lat;
        var dis = (a * p.lng + b * p.lat + c) / Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
        return dis;
    };
    var lineDis = function(p1, p2){
        return Math.sqrt(Math.pow(p1.lat - p2.lat, 2) + Math.pow(p1.lng - p2.lng, 2))
    };

    var p = new LatLng(southwest.lat, southwest.lng); // 左下
    var pl = new LatLng(northeast.lat, southwest.lng); // 左上
    var pr = new LatLng(southwest.lat, northeast.lng); // 右下

    var getScreenPoint = function(latLngPoint){
        var lineLeft = lineDis(pl, p);
        var lineRight = lineDis(p, pr);
        var leftDis = pointToLineDis(p, pl, latLngPoint);
        var rightDis = pointToLineDis(pr, p, latLngPoint);
        var leftPercent = rightDis / lineLeft;
        var rightPercent = leftDis / lineRight;
        var x = (window.innerWidth) * rightPercent; // 1920：div容器的寬度
        var y = (window.innerHeight) * (1 - leftPercent); // 964：div容器的高度
        return new Point(x, y);
    };
    var latlng = new LatLng(lat, lng);
    return getScreenPoint(latlng);
}
// console.log(latlng2px(25.102940, 102.911459))
~~~

## 二、計算兩點連線的角度(平面)

~~~
function calcAngle(px1, py1, px2, py2) {
    //兩點的x、y值
    var x = px2-px1;
    var y = py2-py1;
    var hypotenuse = Math.sqrt(Math.pow(x, 2)+Math.pow(y, 2));
    //斜邊長度
    var cos = x/hypotenuse;
    var radian = Math.acos(cos);
    //求出弧度
    var angle = 180/(Math.PI/radian);
    //用弧度算出角度
    if (y<0) {
        angle = -angle;
    } else if ((y == 0) && (x<0)) {
        angle = 180;
    }
    return angle;
}
// calcAngle(10, 10, 20, 20)
~~~

## 三、已知一個點、長度、角度求延長線的坐標點

~~~
// 繪制虛擬軌跡
function drawVirtualTrack() {
        if(orgDstCoord.orgLon && orgDstCoord.orgLat && orgDstCoord.dstLon && orgDstCoord.dstLat) {
                // 刪除上一次的虛擬軌跡
                if(vTrackLineArr.length > 0) {
                        vTrackCoordsArr = [];
                        map.remove(vTrackLineArr);
                        vTrackLineArr = [];
                }
                // 最后一點坐標
                var last = trackCoordsArr[trackCoordsArr.length-1];
                // 最后一點到目的地距離
                var distance = new AMap.LngLat(orgDstCoord.dstLon, orgDstCoord.dstLat).distance([last.lng, last.lat]);
                // 飛行角度
                var extData = planeMarkers[selectedPlaneNum].getExtData();
                var ang = extData.ang;
                var spd =  extData.spd/3600;
                // 計算偏移坐標
                var lengthen = spd*600000; // 延長10分鐘的距離
                var d = lengthen/6371004; // 6371004地球平均半徑
                var lng = (Math.PI/180)*last.lng;
                var lat = (Math.PI/180)*last.lat;
                var tc = (Math.PI/180)*ang;
                var y = Math.asin(Math.sin(lat)*Math.cos(d)+Math.cos(lat)*Math.sin(d)*Math.cos(tc));
                var dlng = Math.atan2(Math.sin(tc)*Math.sin(d)*Math.cos(lat), Math.cos(d)-Math.sin(lat)*Math.sin(y));
                var x = lng+dlng;
                var lon2 = (x*(180/Math.PI)+540%360-180).toFixed(5);
                var lat2 = (y*(180/Math.PI)).toFixed(5);
                // 虛擬線
                var offsetDistance = new AMap.LngLat(lon2, lat2).distance([last.lng, last.lat]);
                vTrackCoordsArr = [[last.lng, last.lat]];
                if(distance > 2*offsetDistance) {
                        vTrackCoordsArr.push([lon2, lat2]);
                }
                vTrackCoordsArr.push([orgDstCoord.dstLon, orgDstCoord.dstLat]);
                // 繪制線段
                var vpolyline = new AMap.Polyline({
                        path: vTrackCoordsArr,       
                        strokeColor: '#A4A9B1', 
                        strokeOpacity: 1,
                        strokeWeight: 2,
                        strokeStyle: "solid"
                });
                vTrackLineArr.push(vpolyline);
                vpolyline.setMap(map);
        }
}
~~~

## 四、計算兩點間的角度(地圖)

~~~ 
function calcAngle(start, end) {
    var p_start = map.lngLatToContainer(start),
        p_end = map.lngLatToContainer(end);
    var diff_x = p_end.x - p_start.x,
        diff_y = p_end.y - p_start.y;
    return 360*Math.atan2(diff_y, diff_x)/(2*Math.PI)+90;
}
// calcAngle([88.926756, 42.37309], [119.687036, 29.6309]);
~~~
注：如果在地圖canvas上使用rotate，還需要再 * Math.PI/180 才行

## 五、經緯度、高度轉成three.js的xyz

~~~
function getPosition(lng, lat, alt) {
    var phi = (90-lat)*(Math.PI/180),
        theta = (lng+180)*(Math.PI/180),
        radius = alt+200,
        x = -(radius * Math.sin(phi) * Math.cos(theta)),
        z = (radius * Math.sin(phi) * Math.sin(theta)),
        y = (radius * Math.cos(phi));
    return {x: x, y: y, z: z};
}
~~~

## 六、地球坐標系 (WGS-84)轉火星坐標系 (GCJ-02)

傳送門：https://github.com/hiwanz/wgs2mars.js ( 已有判斷是否在中國區 )

以上都是本人親測使用~
                    
                
        
                
            
        
                
    
                
    
                
        
                
    
                

                







                  <ruby id="bdb3f"></ruby>
                  <p id="bdb3f"><cite id="bdb3f"></cite></p>
                    

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>
                        

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>
                        

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>
                        

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>
                              <ruby id="bdb3f"></ruby>
                              

哎呀哎呀视频在线观看