Más

Openlayers 3 círculos de geojson no funciona con una fuente de mosaico de capa diferente de TileWMS

Openlayers 3 círculos de geojson no funciona con una fuente de mosaico de capa diferente de TileWMS


Estoy trabajando con openlayers 3 con una capa de mapbox o openstreetmap y necesito dibujar algunos círculos en ella.

Puedo imprimir los círculos con una vista con una proyección EPSG: 4326, pero luego no tengo mapa. Al cambiar la proyección con una transformación, se muestra el mapa, pero los puntos están todos juntos. La única forma en que lo hago funcionar es usando TileWMS como fuente, pero no puedo usarlo en el entorno de producción

Aquí está mi código:

versión 1: trabajar con TileWMS

var source = new ol.source.GeoJSON ({url: 'geojson url'}); var pointsLayer = new ol.layer.Vector ({source: source, style: new ol.style.Style ({image: new ol.style.Circle ({radio: 15, fill: new ol.style.Fill ({color : 'rgba (170,33,33, 0.8)'}), trazo: new ol.style.Stroke ({color: 'rgba (170,33,33, 0.3)', ancho: 8})})}) }); var map = new ol.Map ({target: 'map', layer: [new ol.layer.Tile ({title: "Global Imagery", source: new ol.source.TileWMS ({url: 'http: // maps.opengeo.org/geowebcache/service/wms ', params: {LAYERS:' bluemarble ', VERSION:' 1.1.1 '}})}), pointsSource], view: new ol.View ({proyección:' EPSG : 4326 ', centro: [-82,3, -10,65], zoom: 3})});

Este es el resultado

Usando mapbox u osm, fallando:

var map = new ol.Map ({destino: 'mapa', capas: [nueva ol.layer.Tile ({fuente: nueva ol.source.XYZ ({url: 'http://api.tiles.mapbox.com /v4/XXXXX.kcp9cpdn/{z} / {x} / {y} .png ">

Y finalmente, al cambiar la vista, se muestra el mapa pero los círculos

var map = new ol.Map ({destino: 'mapa', capas: [nueva ol.layer.Tile ({fuente: nueva ol.source.XYZ ({url: 'http://api.tiles.mapbox.com /v4/XXXXX.kcp9cpdn/{z} / {x} / {y} .png ">

¿Hay alguna forma de hacer que esto funcione?


Encontré la solución, aquí está para ayudar a cualquiera

Después de esta respuesta / a / 118818/42868 Hay una opción inestable para el objeto ol.source.GeoJSON, por lo que agregarlo de esta manera lo hizo funcionar

var source = new ol.source.GeoJSON ({url: 'geojson url', projection: 'EPSG: 3857'});

Ver el vídeo: TRENCADÍS MOSAICO CON TESELAS DE AZULEJO