Map display at different OSM coordinates



  • I understand that OSM can initially only work with EPSG:3857, but geojson data are stored in EPSG:4326.

    var geojsonObject = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [[40, 52.70], [116.20, 70]]
          }
        }
      ]
    };
    

    var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
    });

    var vectorLayer = new ol.layer.Vector({
    source: vectorSource
    });

    var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
    });

    var map = new ol.Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new ol.View({
    projection: 'EPSG:3857',
    center: [37.61, 55.75],
    zoom: 4
    })
    });

    In this case, the map is displayed normally, but the line is painted at coordinates [0, 0] EPSG:3857

    If you change the EPSG project:4326

    var map = new ol.Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new ol.View({
    projection: 'EPSG:4326',
    center: [37.61, 55.75],
    zoom: 4
    })
    });

    The map starts to be horrific, long-lived, and the top is stretched, but the line is right.
    EPSG:4326

    Show me how to work with geojson in 4326.
    PS saw many posts about the use ol.source.GeoJSONBut I'm making a mistake. ol.source.GeoJSON is not a constructor



  • No. http://openlayers.org/en/latest/apidoc/ol.source.GeoJSON - Look at the documentation.

    I can offer some geometry options in a projection different from the map:

    1. http://openlayers.org/en/latest/apidoc/ol.proj.html#.transform Pre-establishment coordinates: ol.proj.transform

    2. http://openlayers.org/en/latest/apidoc/ol.geom.Geometry.html#transform Before adding: geomFeature.transform

    3. http://openlayers.org/en/latest/apidoc/ol.source.Vector.html#addFeature On the occasion of the addition in the layer: srcVector.on('addfeature'

    PS
    Learn to use documentation ;

    Your example is sufficient to read:

    var geojsonObject = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [[40, 52.70], [116.20, 70]]
                }
            }
        ]
    };
    

    var vectorSource = new ol.source.Vector({
    features: ( new ol.format.GeoJSON() ).readFeatures( geojsonObject ).map(
    function( feature ) {
    console.log( feature.getGeometry().getCoordinates()[0] );
    feature.getGeometry().transform( 'EPSG:4326', 'EPSG:3857' );
    console.log( feature.getGeometry().getCoordinates()[0] );
    return feature;
    }
    )
    });

    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>

    The consolation is added for visual purposes.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2