Question

函数ol.proj.transform（）根据用户输入返回错误的坐标。出于测试目的，我设置了50.7712078,9.6679688。当它们按值传递给函数（add_marker（y，x））时，结果为：

1076233.3638212564，-4754497.267923687

但是，当我创建表示与用户输入相同的纬度和经度的局部变量时这让我：

1076233.3638212564,6580922.381627579

ol3中的这个功能有问题吗？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; carset=utf-8">
        <link rel="stylesheet" href="./_css_II.css" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js" type="text/javascript"></script>
        <script src="./_script.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" class="map"></div>
        <div id="geo-marker" class="marker"></div>

        <div id="inputForm">
            Latitude:
        <input id="latitude" type="text" value="50.7712078"/>//default
            Longitude:
        <input id="longitude" type="text" value="9.6679688"/>//default
        <input id="btn_addmarker" type="button" value="Add Marker" />
        </div>
    </body>
</html>

_script.js

var map, marker;

$(document).ready(function(){

    init_map();
    $("#btn_addmarker").on("click",function(){

        var lat = $("#latitude").val();
        var lon = $("#longitude").val();

        add_marker(lon,lat);    

    });
});

function init_map(){

    var OSM = new ol.layer.Tile({

        source: new ol.source.OSM()
    });

    var v_OSM = new ol.View({

        center:[2061969,7281059],
        zoom: 14
    });

    var map = new ol.Map({

        layers: [OSM],
        target: "map",
        renderer: "canvas",
        view: v_OSM
    });

    var markerHwnd = document.getElementById("geo-marker");

    marker = new ol.Overlay({

        position: [2061961,7281059],
        positioning: "bottom-center",
        offset: [0,0],
        element: markerHwnd,
        stopEvent: false        
    });

    map.addOverlay(marker);
}

function add_marker(y,x){

    var goodLat = 50.7712078;
    var goodLon = 9.6679688;


    var newCoord = ol.proj.transform([y,x],"EPSG:4326","EPSG:3857");    

    console.log(newCoord); //[1076233.3638212564, -4754497.267923687] <- Should be: [1076233.3638212564, 6580922.381627579]

    /* 
        var newCoord = ol.proj.transform([goodLon,goodLat],"EPSG:4326","EPSG:3857");    
        console.log(newCoord);//[1076233.3638212564, 6580922.381627579] <- OK!
    */

    marker.setPosition(newCoord);

}

Answer 1

您将文本作为参数传递。在调用方法时明确地解析参数以使其正确： add_marker(parseFloat(lon),parseFloat(lat));

ol3 ol.proj.transform错误的转换

1 个答案: