经纬度坐标转像素坐标

// 经纬度坐标转像素坐标
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); // {x: 4.5365515139625126e-7, y: 0.6712974463173231}
PS:写作不易,如要转裁,请标明转载出处。
%{ comment.page.total }条评论

猜你想看

微信小程序:前端开发宝典

最近文章
工具操作
  • 内容截图
  • 全屏
登录
注册
回顶部