He estado luchando con mis proyecciones durante algunas semanas. Al principio pude mostrar mis facciones pero aparecen en jemen (se supone que están en Italia). Después de darme cuenta de que mis coordenadas se estaban invirtiendo, por ejemplo, mi coordenada [41.18702782291,15.450187402143] (que está en Italia) se mostraba en [15.450187402143, 41.18702782291] (que está en jemen), decidí invertir las coordenadas de los multipolígonos de mi geometrías para que ahora tenga el formato [15.450187402143, 41.18702782291]. No sé qué pasó, pero ahora no puedo ver mis características en el mapa.
Tengo un objeto geojson con mis características y este es mi código:
var myview = new View({ center: [15.450187402143, 41.18702782291], projection: 'EPSG:4326', zoom: 6 }) var mylayer = new TileLayer({ source: new OSM() }) var layer = [mylayer] const map = new Map({ target: 'map', layers: layer, view: myview }); const vectorSource = new VectorSource({ format: new ol.format.GeoJSON(), features: (new ol.format.GeoJSON()).readFeatures(geoJson, {dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection()}) //EPSG:32633 - WGS 84 / UTM zone 33N //features: new GeoJSON().readFeatures(geoJson, {dataProjection: 'EPSG:4326', FeatureProjection: map.getView().getProjection()}) }); console.log(geoJson); console.log(vectorSource.getFormat()); vectorSource.addFeatures((vectorSource.getFormat()).readFeatures(geoJson)); console.log("1"); const vectorLayer = new VectorLayer({ source: vectorSource }); map.addLayer(vectorLayer); const numFeatures = vectorLayer.getSource().getFeatures().length; console.log("Count right after construction: " + numFeatures);Las líneas finales muestran que las características están en la fuente y las está obteniendo correctamente.
const geoJson = { "type": "Feature", "properties": { "name": "Coors Field", "amenity": "Baseball Stadium", "popupContent": "This is where the Rockies play!" }, "geometry": { "type": "Point", "coordinates": [15.450187402143, 41.18702782291] } }; let map; $(document).ready(function() { // CREATE MAP map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM({ wrapX: false }), projection: 'EPSG:4326', visible: true }) ], target: 'map', view: new ol.View({ projection: 'EPSG:4326', center: [15.450187402143, 41.18702782291], zoom: 7, }) }); const vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), features: (new ol.format.GeoJSON()).readFeatures(geoJson, {dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection()}), //EPSG:32633 - WGS 84 / UTM zone 33N //features: new GeoJSON().readFeatures(geoJson, {dataProjection: 'EPSG:4326', FeatureProjection: map.getView().getProjection()}) }); vectorSource.addFeatures((vectorSource.getFormat()).readFeatures(geoJson)); const vectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({color: 'red'}) }) }) }); map.addLayer(vectorLayer); });