CODEWITHSUNDEEP
javascriptopenstreetmapopenlayers-3
admiral
admiral

Reputation: 163

Openlayers 3 bad coordinates

I am using Openlayers 3. In order to open the map i use OpenStreetMap generated tiles. When i try to get coordinates using polyFeature.getGeometry().getCoordinates() it provides me bad coordinates , the numbers are way too big . Something like this : "X": 3151594, "Y": 5953506.5

How to get normal coordinates ???

<html>
<head>
    <title>Draw and modify features example</title>
    <script src="jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <script src="ol.js"></script>

</head>
<body>
    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>
            </div>
            <form class="form-inline">
                <label>Geometry type &nbsp;</label>
                <select id="type">
                    <option value="Point">Point</option>
                    <option value="LineString">LineString</option>
                    <option value="Polygon">Polygon</option>
                </select>
            </form>
        </div>
        <input type="button" value="Save Coordinates" onclick="SaveCoordinates()">

    </div>
    <script type="text/javascript">
            var icons = [
                "stop_sign.png",
                "Argentina_P-32.svg.png"
            ];

            var source = new ol.source.XYZ({
                    url : 'tiles/{z}/{x}/{y}.png'
                });

            var map = new ol.Map({
                    layers : [new ol.layer.Tile({
                            source : source
                        })],
                    target : 'map',
                    view : new ol.View({
                        center : [3300000, 6000000],
                        zoom : 9
                    })
                });

            var features = new ol.Collection();
            var featureOverlay = new ol.layer.Vector({
                    source : new ol.source.Vector({
                        features : features
                    }),
                    style : new ol.style.Style({
                        fill : new ol.style.Fill({
                            color : 'rgba(255, 255, 255, 0.2)'
                        }),
                        stroke : new ol.style.Stroke({
                            color : '#ffcc33',
                            width : 2
                        }),
                        image : new ol.style.Icon({
                            anchor : [0.5, 0.5],
                            offset : [0, 0],
                            opacity : 1,
                            scale : 1,
                            src : icons[1]
                        })
                    })
                });
            featureOverlay.setMap(map);

            var modify = new ol.interaction.Modify({
                    features : features,
                    deleteCondition : function (event) {
                                    return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
                    },
                });

            map.addInteraction(modify);

            var draw; // global so we can remove it later
            function addInteraction() {
                draw = new ol.interaction.Draw({
                        features : features,
                        type : /** @type {ol.geom.GeometryType} */
                        (typeSelect.value)

                    });
                map.addInteraction(draw);
            }

            var typeSelect = document.getElementById('type');

            typeSelect.onchange = function (e) {
                map.removeInteraction(draw);
                addInteraction();
            };

            addInteraction();

            function SaveCoordinates() {
                var polyFeatures = featureOverlay.getSource();

                var coordsPoligon = [];
                var coordsPoints = [];
                var coordsLine = [];
                var i = 0;
                var j = 0;
                var z = 0;
                polyFeatures.forEachFeature(function (polyFeature) {
                    if (polyFeature.getGeometry().getType() === 'Polygon') {
                        coordsPoligon[i] = polyFeature.getGeometry().getCoordinates();
                        i++;
                    } else if (polyFeature.getGeometry().getType() === 'Point') {
                        coordsPoints[j] = polyFeature.getGeometry().getCoordinates();

                        j++;
                    } else if (polyFeature.getGeometry().getType() === 'LineString') {
                        coordsLine[z] = polyFeature.getGeometry().getCoordinates();
                        z++;
                    }
                });

                console.log(coordsPoligon);
                console.log(coordsLine);
                console.log(coordsPoints);

                var markers = {
                    "points" : coordsPoints,
                    "lines" : coordsLine,
                    "polygons" : coordsPoligon
                };
                $.ajax({
                    url : 'http://localhost:54823/LayerDataNew',
                    type : 'POST',
                    dataType : 'application/json',
                    data : markers
                });
}
</script>
</body>
</html>

Upvotes: 0

Views: 876

Answers (1)

oterral
oterral

Reputation: 471

Your map is in EPSG:3857 so the coordinates you get are in meters. If you want coordinates in degrees use :

var lonlat = ol.proj.toLonLat([3151594, 5953506.5]);

Link to api

Upvotes: 2

Related Questions