Agregue la capa GeoJSON a OpenLayers 3

9

Tengo un archivo GeoJSON llamado mygeojson.json y quiero agregarlo como una capa en OpenLayers 3 en la parte superior de una capa openstreetmap. Hasta ahora pude mostrar el mundo de openstreetmap, incluido el zoom, etc., pero por alguna razón no puedo obtener mygeojson.json.

El geojson contiene muchos polígonos y se ve así:

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
      { "type": "Feature", "properties": { "DN": 2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 13.559093915055664, 52.545214330050563 ], [ 13.559633429050496, 52.545205649772548 ], [ 13.559633415380715, 52.545214636296755 ], [ 13.559093915055664, 52.545214330050563 ] ] ] } }
]
}

mi main.html:

<!doctype html>
<html lang="en">
  <head>
    <link rel='stylesheet' href='http://ol3js.org/en/master/css/ol.css'>
    <style>
      #map {
        height: 100%;
        width: 100%;
      }
    </style>
    <title>OpenLayers 3 example</title>
    <script src="ol3/ol.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>My Map</h1>
    <div id="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
           new ol.layer.Tile({
              source: new ol.source.OSM()
           }),
           new ol.layer.Vector({
              title: 'added Layer',
              source: new ol.source.GeoJSON({
                 projection : 'EPSG:4326',
                 url: 'mygeojson.json'
              })
           })
        ],
        view: new ol.View({
          center:[52.5243700 , 13.4105300],
          zoom:2

        })
      });
    </script>
  </body>
</html>

También intenté eliminar la información de la proyección pero fue inútil.

— Selphiron
fuente

8

Cuando defina su fuente de vector, coloque la configuración de proyección apuntando al sistema de referencia de coordenadas objetivo (vea los documentos ):

new ol.layer.Vector({
      title: 'added Layer',
      source: new ol.source.GeoJSON({
         projection : 'EPSG:3857',
         url: 'mygeojson.json'
      })
  })

Mire este ejemplo (usando sus datos de muestra): http://jsfiddle.net/zzahmbff/4/

Quizás este recurso pueda ayudarlo a ver diferentes formas de cargar datos vectoriales: http://acanimal.github.io/thebookofopenlayers3/chapter03_03_vector_source.html

— Germán Carrillo
fuente

gracias, funcionó! ¿Tendría que hacer eso si mygeojson.json estuviera en EPSG: 3857?

— Selphiron

1

No lo creo.

— Germán Carrillo

1

La sintaxis ha cambiado, vea la respuesta de @sevenboarder.

— jjmontes

16

FYI ... Creo que esto ha cambiado para OL3 V3.5.0, por lo que la respuesta de gcarrillo sería:

new ol.layer.Vector({
      title: 'added Layer',
      source: new ol.source.Vector({
         url: 'mygeojson.json',
         format: new ol.format.GeoJSON()
      })
  })

Puede ver los cambios aquí: https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350

— Sevenboarder
fuente

7

OpenLayers Vector API está cambiando mucho. Tengo una muestra de trabajo con OpenLayers 3.16.0.

Es importante que debe definir featureProjection: 'EPSG:3857'en las opciones de readFeaturesesta manera:

.readFeatures(_geojson_object, { featureProjection: 'EPSG:3857' })

Se puede encontrar la referencia en https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md#v350

Ejemplo:

_geojson_vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(_geojson_object, { featureProjection: 'EPSG:3857' })
});

_geojson_vectorLayer = new ol.layer.Vector({
  source: _geojson_vectorSource,
  style: styleFunction
});

map.addLayer(_geojson_vectorLayer);

Nota: styleFunction

var image = new ol.style.Circle({
  radius: 5,
  fill: null,
  stroke: new ol.style.Stroke({ color: 'red', width: 1 })
});

var styles = {
  'Point': new ol.style.Style({
    image: image
  }),
  'LineString': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 1
    })
  }),
  'MultiLineString': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 1
    })
  }),
  'MultiPoint': new ol.style.Style({
    image: image
  }),
  'MultiPolygon': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 0, 0.1)'
    })
  }),
  'Polygon': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      lineDash: [4],
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  }),
  'GeometryCollection': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'magenta',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'magenta'
    }),
    image: new ol.style.Circle({
      radius: 10,
      fill: null,
      stroke: new ol.style.Stroke({
        color: 'magenta'
      })
    })
  }),
  'Circle': new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.2)'
    })
  })
};

var styleFunction = function (feature) {
  return styles[feature.getGeometry().getType()];
};

— hoogw
fuente