Más

¿Cargando GeoJSON a través de AJAX después de agregar Layer a OpenLayers 3?


Estoy tratando de agregar una nueva capa GeoJSON a OpenLayers 3 que tengo que buscar a través de AJAX. Quiero que el usuario haga clic en una lista de capas, que agregue una capa vectorial vacía y luego haga una llamada AJAX y cargue las características en la capa. Esta es la función que se llama cuando el usuario hace clic en la capa:

function () {var styles = {'Point': [new ol.style.Style ({image: new ol.style.Circle ({radio: 10, fill: null, stroke: new ol.style.Stroke ({color : 'magenta'}), cursor: "pointer"})})], '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': [nuevo ol.style.Style ({imagen: nuevo ol.style.Circle ({radio: 10, relleno: nulo, trazo: nuevo ol.style.Stroke ({color: 'magenta'})})})], 'MultiPolygon ': [new ol.style.Style ({trazo: nuevo ol.style.Stroke ({color:' amarillo ', ancho: 1}), relleno: nuevo ol.style.Fill ({color:' rgba (255, 255, 0, 0.1) '})})],' Polígono ': [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.Fi ll ({color: 'magenta'}), imagen: nuevo ol.style.Circle ({radio: 10, fill: null, stroke: new ol.style.Stroke ({color: 'magenta'})})}) ], 'Círculo': [new ol.style.Style ({trazo: nuevo ol.style.Stroke ({color: 'rojo', ancho: 2}), relleno: nuevo ol.style.Fill ({color: ' rgba (255,0,0,0.2) '})})]}; var styleFunction = función (característica, resolución) {devolver estilos [feature.getGeometry (). getType ()]; }; var layer = new ol.layer.Vector ({source: new ol.source.GeoJSON ({defaultProjection: "EPSG: 4326", projection: "EPSG: 3857"})}); $ .getJSON (global_config.services.getLayers + "? lname = fences", function (layerJSON) {if (layerJSON.features.length> 0) {var features = new ol.format.GeoJSON ({dataProjection: "EPSG: 4326 ", featureProjection:" EPSG: 3857 "}). readFeatures (layerJSON); layer.getSource (). addFeatures (características); layer.setStyle (styleFunction);}}); capa de retorno; }

El GeoJSON está en EPSG: 4326 y el mapa está en EPSG: 3857. Las características se están cargando bien en la capa, pero no se muestran y no puedo entender por qué. Creo que tiene que ver con la proyección, aunque tengo las proyecciones adecuadas configuradas en todas las características, así como en la capa de origen de GeoJSON. También intenté tener la proyección predeterminada en la capa de origen de GeoJSON configurada en EPSG: 3857, porque las características deben leerse en esa proyección:

var layer = new ol.layer.Vector ({source: new ol.source.GeoJSON ({defaultProjection: "EPSG: 3857"})});

Pero todavía no aparece nada.


No estoy seguro de por qué, cambiar la función ajax para volver a crear la fuente en lugar de agregar características a la fuente funcionó:

$ .getJSON (global_config.services.getLayers + "? lname = fences", function (layerJSON) {if (layerJSON.features.length> 0) {var layerSource = new ol.source.GeoJSON ({style: styleFunction, defaultProjection: 'EPSG: 4326', proyección: "EPSG: 3857", objeto: layerJSON}); layer.setSource (layerSource);}});