Openlayers 3 circles from geojson not working with layer tile source different from T

[المشرف العام]

I am working with openlayers 3 with a layer from mapbox or openstreetmap and I need to draw some circles on it.

I am able to print the circles with a view with a projection EPSG:4326, but then I have no map. Changing the projection with a transform the map is displayed, but the points are all together. The only way I am made it work is using TileWMS as a source, but I am not able to use it in production environment

Here is my code:

version 1: working with 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({ radius: 15, fill: new ol.style.Fill({color: 'rgba(170,33,33, 0.8)'}), stroke: new ol.style.Stroke({color: 'rgba(170,33,33, 0.3)', width: 8}) }) }) }); var map = new ol.Map({ target: 'map', layers: [ 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({ projection: 'EPSG:4326', center: [-82.3, -10.65], zoom: 3 })});This is the result

Using mapbox or osm, failing:

var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token' }) }), /* new ol.layer.Tile({ source: new ol.source.OSM() }),*/ pointsSource ], view: new ol.View({ projection: 'EPSG:4326', center: [-82.3, -10.65], zoom: 3 })});This is the result

And finally, changing the view the map is displayed but the circles

var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token' }) }), /* new ol.layer.Tile({ source: new ol.source.OSM() }),*/ pointsSource ], view: new ol.View({ center: ol.proj.transform([-82.3, -10.65], 'EPSG:4326', 'EPSG:3857'), zoom: 3 })});And the result

Is there a way to make this work?



أكثر...