Javascript Girl
  1. Javascript Girl
  3. Comment charger la couche de vecteur de couche 3 de couches ouvertes avec bbox?
Intereting Posts
Le contrôleur n'est pas une fonction, n'a pas défini, tout en définissant des contrôleurs à l'échelle mondiale Facebook OAuth "Non pris en charge" dans Chrome sur iOS HTTP POST en utilisant Angular.js Le nom et la description du point GeoJSON ne s'affichent pas lors de l'utilisation de Google Map API V3 CORS / xhr.getRequestHeaders Comment détecter une réponse négative des utilisateurs pour la géolocalisation Les collections de backbone représentant les données arborescentes Killing applet par javascript Envoyer un tableau via la requête GET avec le service $ http de AngularJS Vérifiez les autorisations étendues avec le nouveau javascript de Facebook sdk Conversion vers Base64 en JavaScript sans appel évité 'Escape' ChangeDetectionStrategy.OnPush et Observable.subscribe dans Angular 2 Envoyer des variables javascript aux rails? Comment faire pour que les astuces bootstrap Twitter contiennent plusieurs lignes? JQuery – élément de défilement au milieu de l'écran au lieu d'en haut avec un lien d'ancrage

Comment charger la couche de vecteur de couche 3 de couches ouvertes avec bbox?

Je suis en difficulté avec la construction de la couche de vecteur OL3 de la stratégie BBOX. Jusqu'à présent, je peux facilement charger le fichier Geojson avec une syntaxe json valide, mais c'est une stratégie ponctuelle. Ma autre approche était d'utiliser ol.ServerVector qui, à mon insu, renvoie Javascript avec rappel, mais je ne peux pas le faire fonctionner.

Travailler la couche simple de Geojson: 

var vectorSource = new ol.source.GeoJSON( ({ projection: 'EPSG:3857', preFeatureInsert: function(feature) { feature.geometry.transform('EPSG:4326', 'EPSG:3857'); }, url: 'geojson2.json' }));

var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: styleFunction });

BBOX tentative (Ceci retourne json en cours de déplacement, mais les fonctionnalités ne sont pas en cours de chargement sur la carte): 

  var vectorSource = new ol.source.ServerVector({ format: new ol.format.GeoJSON(), loader: function(extent, resolution, projection) { var url = 'geojson2.php?p='+ extent.join(','); $.ajax({ url: url }); }, strategy: ol.loadingstrategy.bbox, projection: 'EPSG:3857', }); // callback ? var loadFeatures = function(response) { vectorSource.addFeatures(vectorSource.readFeatures(response)); };

Exemple de réponse JSON: 

 {"type":"FeatureCollection","features":[ {"type":"Feature","geometry":{"type":"Point","coordinates":[0,0]},"properties":{"label":"122.234-10/163"}}, {"type":"Feature","geometry":{"type":"Point","coordinates":[1,1],"properties":{"label":"132.222-1126"}}} ]}

Vous devez ajouter un rappel Ajax qui ajoute les fonctionnalités à la source du vecteur: 

 var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), loader: function(extent, resolution, projection) { var url = 'geojson2.php?p=' + extent.join(','); $.ajax({ url: url, success: function(data) { vectorSource.addFeatures(vectorSource.readFeatures(data)); } }); }, projection: 'EPSG:3857', strategy: ol.loadingstrategy.bbox });

Pour que cela fonctionne avec la version la plus récente d'OL3 (v3.7.0), j'ai dû lire les fonctionnalités en utilisant la classe de format GeoJSON. 

 var geoJSONFormat = new ol.format.GeoJSON(); var vectorSource = new ol.source.Vector({ loader: function(extent, resolution, projection) { var url = 'geojson2.php?p=' + extent.join(','); $.ajax({ url: url, success: function(data) { var features = geoJSONFormat.readFeatures(data); vectorSource.addFeatures(features); } }); }, strategy: ol.loadingstrategy.bbox });