如何从openlayers map获取lat / lng值

时间:2014-11-23 14:49:43

标签: javascript openlayers

我想在openlayers地图上获得标记的lat / lon:

...
var dragVectorC = new OpenLayers.Control.DragFeature(vectorLayer, {
            onComplete: function (feature) {
        var lonlat = new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y);
                alert(lonlat.lat + ', ' + lonlat.lon);

但我得到的价值是:

5466016.2318036, 2328941.4188153

我尝试了不同的方法来改变它,但我总是遗漏一些东西 我做错了什么?

var map = new OpenLayers.Map('map');
    var layer = new OpenLayers.Layer.OSM("Simple OSM Map");
    var vector = new OpenLayers.Layer.Vector('vector');
    map.addLayers([layer, vector]);

    map.setCenter(
        new OpenLayers.LonLat(-71.147, 42.472).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        ), 12
    );

    var pulsate = function (feature) {
        var point = feature.geometry.getCentroid(),
            bounds = feature.geometry.getBounds(),
            radius = Math.abs((bounds.right - bounds.left) / 2),
            count = 0,
            grow = 'up';

        var resize = function () {
            if (count > 16) {
                clearInterval(window.resizeInterval);
            }
            var interval = radius * 0.03;
            var ratio = interval / radius;
            switch (count) {
                case 4:
                case 12:
                    grow = 'down'; break;
                case 8:
                    grow = 'up'; break;
            }
            if (grow !== 'up') {
                ratio = -Math.abs(ratio);
            }
            feature.geometry.resize(1 + ratio, point);
            vector.drawFeature(feature);
            count++;
        };
        window.resizeInterval = window.setInterval(resize, 50, point, radius);
    };

    var geolocate = new OpenLayers.Control.Geolocate({
        bind: false,
        geolocationOptions: {
            enableHighAccuracy: false,
            maximumAge: 0,
            timeout: 7000
        }
    });


    map.addControl(geolocate);
    var firstGeolocation = true;
    geolocate.events.register("locationupdated", geolocate, function (e) {

        vector.removeAllFeatures();

        var circle = new OpenLayers.Feature.Vector(
            OpenLayers.Geometry.Polygon.createRegularPolygon(
                new OpenLayers.Geometry.Point(e.point.x, e.point.y),
                e.position.coords.accuracy / 2,
                40,
                0
            ),
            {},
            style
        );

        vector.addFeatures([
            new OpenLayers.Feature.Vector(
                e.point,
                {},
                {
                    graphicName: '', // cross
                    strokeColor: '', // #f00
                    strokeWidth: 2,
                    fillOpacity: 0,
                    pointRadius: 10
                }
            ),
            circle
        ]);

        if (firstGeolocation) {
            map.zoomToExtent(vector.getDataExtent());
            pulsate(circle);
            firstGeolocation = false;
            this.bind = true;
        }
        // create marker
        var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
        var feature = new OpenLayers.Feature.Vector(
         new OpenLayers.Geometry.Point(e.point.x, e.point.y),
         { some: 'data' },
         { externalGraphic: 'http://opportunitycollaboration.net/wp-content/uploads/2013/12/icon-map-pin.png', graphicHeight: 48, graphicWidth: 48 });
        vectorLayer.addFeatures(feature);
        map.addLayer(vectorLayer);
        var dragVectorC = new OpenLayers.Control.DragFeature(vectorLayer, {
            onComplete: function (feature) {

                alert('x=' + feature.geometry.x + ', y=' + feature.geometry.y);

            }
        });

        map.addControl(dragVectorC);
        dragVectorC.activate();

    });
    geolocate.events.register("locationfailed", this, function () {
        OpenLayers.Console.log('Location detection failed');
    });

    var style = {
        fillColor: '#000',
        fillOpacity: 0,
        strokeWidth: 0
    };

    $(window).load(function () {

        initMap();

    });


    function initMap() {

        vector.removeAllFeatures();
        geolocate.deactivate();

        geolocate.watch = false;
        firstGeolocation = true;
        geolocate.activate();

    }

1 个答案:

答案 0 :(得分:1)

您需要将点几何体的X,Y转换为LonLat,然后将其从地图的投影转换为WGS84,即EPSG:4326,以获得“传统的”lon / lat:

   var dragVectorC = new OpenLayers.Control.DragFeature(vectorLayer, {
        onComplete: function (feature) {
            var lonlat = new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y).transform(
                map.getProjectionObject(),
                new OpenLayers.Projection("EPSG:4326")
            ))
            alert(lonlat.lat + ', ' + lonlat.lon)