Suite

OpenLayers 3 : regroupement de fonctionnalités GeoJSON


J'ai essayé d'utiliser l'exemple de base du site Web OpenLayers pour créer une carte de regroupement simple pour mes données GeoJSON. Cependant, je n'ai pas de chance de générer des clusters.

Ci-dessous mon code :

var baseLayer = new ol.layer.Tile({ source: source: new ol.source.OSM() }); var view = new ol.View ({ center : [19425838, -4409677], // la projection est en EPSG : 3857 zoom : 6, maxZoom : 28, minZoom : 1 }); var source = new ol.source.GeoJSON({object: geojson_jobs}); // fichier .js local passant les fonctionnalités geoJSON dans une variable var clustersSource = new ol.source.Cluster({ distance: 10, source: source }); var styleCache = {}; var clusters = new ol.layer.Vector({ source: clustersSource, style: function(feature, resolution) { var size = feature.get('features').length; var style = styleCache[size]; if (true) { style = [ new ol.style.Style({ image: new ol.style.Circle({ radius: resolution, stroke: new ol.style.Stroke({ color: "#fff" }), fill: new ol. style.Fill({ color: '#3399CC' }) }), text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }) }) })] ; styleCache[taille] = style ; } style de retour ; } }); var couches = [baseLayer, clusters]; var map = new ol.Map({ contrôles : ol.control.defaults().extend([new ol.control.ScaleLine({})]), cible : 'map', renderer : 'canvas', view : view , calques : calques });

Cela ne fonctionne pas avec geoJSON comme ça, il m'a fallu une journée pour comprendre cela, vous devez vous assurer que :

  • Votre geoJSON ne contient que des points, pas des LineStrings etc. même s'il contient 1, la couche de cluster ne s'affichera pas sans erreurs js.
  • assurez-vous de transformer où nécessaire en ce qui concerne les projections.

Si vous chargez geoJSON à partir d'un fichier contrairement à l'exemple où il est généré dans un tableau, vous devez suivre cette astuce ci-dessous.

L'exemple de code

nombre de variables = 20000 ; var features = new Array(count); var e = 4 500 000 ; for (var i = 0; i < count; ++i) { var coordonnées = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; features[i] = new ol.Feature(new ol.geom.Point(coordinates)); } //console.log(fonctionnalités); //

Le geoJSON du fichier

var caractéristiques = []; $.ajax({ url: 'data/shopssmalln.geojson', dataType: 'json', async: false, success: function(json1) { $.each(json1, function (key, data) { if (key == 'features') { $.each(data, function (k, v) { if (v.type=='Feature') { //console.log(v.geometry.coordinates); if (v.geometry.coordinates .length>1) { features[k] = new ol.Feature(new ol.geom.Point(ol.proj.transform(v.geometry.coordinates, 'EPSG:4326', 'EPSG:3857'))); } } }); } }); } }); //console.log(fonctionnalités);

Le reste

var source = new ol.source.Vector({ fonctionnalités : fonctionnalités, projection : 'EPSG:3857' }); var clusterSource = new ol.source.Cluster({ distance : 20, projection : 'EPSG:3857', source : source });

Le clustering ol3 est un peu pénible…

Consultez ces liens :


J'ai revérifié la géométrie du fichier geoJSON, étrangement, c'est en multipoint plutôt qu'en point unique. Le fichier geoJSON est exporté avec QGIS à partir d'un fichier de formes qui n'a que des caractéristiques géométriques ponctuelles. Je m'attendrais à ce que le nouveau geoJSON soit en géométrie à point unique plutôt qu'en multipoint.


Voir la vidéo: GIS with #Openlayers part3. Add Point #GeoJSON with #PopupTemplate (Octobre 2021).