Suite

Les cercles Openlayers 3 de geojson ne fonctionnent pas avec une source de tuile de couche différente de TileWMS


Je travaille avec openlayers 3 avec un calque de mapbox ou openstreetmap et j'ai besoin de dessiner des cercles dessus.

Je suis capable d'imprimer les cercles avec une vue avec une projection EPSG:4326, mais alors je n'ai pas de carte. Changer la projection avec une transformation la carte est affichée, mais les points sont tous ensemble. La seule façon de le faire fonctionner est d'utiliser TileWMS comme source, mais je ne peux pas l'utiliser dans un environnement de production

Voici mon code :

version 1 : travailler avec 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)'}), trait : nouveau ol.style.Stroke({couleur : 'rgba(170,33,33, 0,3)', largeur : 8}) }) }) }); var map = new ol.Map({ cible : 'map', calques : [ new ol.layer.Tile({ title : "Global Imagery", source : new ol.source.TileWMS({ url : 'http:// maps.opengeo.org/geowebcache/service/wms', paramètres : {COUCHES : 'bluemarble', VERSION : '1.1.1'} }) }), pointsSource ], vue : new ol.View({ projection : 'EPSG :4326', centre : [-82.3, -10.65], zoom : 3 }) });

C'est le résultat

Utilisation de mapbox ou osm, échec :

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

Et enfin, en changeant la vue la carte s'affiche mais les cercles

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

Y a-t-il un moyen de faire fonctionner cela?


J'ai trouvé la solution, la voici car elle aide tout le monde

Suite à cette réponse /a/118818/42868 Il existe une option instable pour l'objet ol.source.GeoJSON, donc l'ajouter de cette manière l'a fait fonctionner

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


Voir la vidéo: Openlayers 6 Tutorial #9 - Interaction With Vector Features (Octobre 2021).