Suite

Comment ajouter des données GeoJSON distantes à une carte Leaflet en tant que nouvelle couche ?

Comment ajouter des données GeoJSON distantes à une carte Leaflet en tant que nouvelle couche ?


Je semble avoir un problème pour analyser le GeoJson et ajouter la couche à une carte Leaflet.

var terrain = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', { id: 'terrain-layer ', attribution : 'Tuiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC', maxZoom : 16 }) ; var unitsurl = 'https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=text/javascript&format_Joptions;EPS=nameRS:get26 var unitsGeoJson = new L.GeoJSON(); $.ajax({ jsonp : false, url : unitsurl, type : 'GET', dataType : 'jsonp', jsonpCallback : 'getJson', success : function(data) { console.log(data); unitsGeoJson.addData(data ); map.fitBounds(unitsGeoJson.getBounds()); } }); /* initialise la carte */ var map = L.map('map', { center: [39.0646,-105.3272], zoom: 7, minZoom: 6, scrollWheelZoom: false, layer: [terrain, unitsGeoJson] }); /* ajouter un contrôle des couches */ var baseMaps = { "Terrain": terrain }; var overlayMaps = { "Unit": unitsGeoJson }; /* charger les couches */ setTimeout(function () { L.control.layers(baseMaps, overlayMaps).addTo(map); }, 3000);

Leaflet s'attend à ce que les objets GeoJSON soient dans EPSG : 4326 (WGS 84) et l'ensemble de l'API utilise 4326, vous devez donc d'abord essayer de reprojeter votre couche côté serveur avant de les rendre sur la carte.

Essayez d'utiliser cette URL ci-dessous pourURL d'unitévariable, j'ai ajouté laNom SRSparamètre à la fin pour spécifier que EPSG : 4326 est le système de référence spatiale souhaité pour la couche geojson en sortie.

https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=text/javascript&format_options=callback:getJson:43RSname=EP


Leasync : fauxdans votre requête AJAX ne la rend pas réellement synchrone, car vous utilisezType de données : "jsonp". Voir http://api.jquery.com/jquery.ajax/

Requêtes inter-domaines etType de données : "jsonp"les requêtes ne prennent pas en charge le fonctionnement synchrone.

Par conséquent, votrefitBoundsarrive encore avantunitésGeoJsoncontient des données et ne peut pas renvoyer de limites valides. Pourquoi ne pas simplement appeler votrefitBoundsau sein de votre fonction de réussite ?

Votre serveur WMS ne semble pas renvoyer de réponse JSONP valide.


Quelques choses qui peuvent vous aider : activer jsonp dans le géoserveur : demander JSONP à partir du géoserveur à l'aide de la requête AJAX dans Openlayers 3

Et un exemple de travail : GeoServer Callback Function Undefended

Et encore une chose. Si vous remplacez simplement le wms par ows dans votre code, cela peut également vous aider. Vous ne pouvez pas utiliser wms via jsonp.

var unitsurl = 'https://maps.huntscore.com/geoserver/**wms?**service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=text/javascript&:getJoptions=callback;

Vous pouvez définir le système de référence de coordonnées dans lequel vous souhaitez que la sortie soit lorsque vous faites des demandes à Geoserver. Leaflet utilise le système de référence de coordonnées EPSG:3857 Web Mercator pour gérer les données spatiales. Je pense qu'il peut également gérer EPSG: 4326 (alias WGS "Lat Long")

Ajoutez simplement le paramètre "SRS=EPSG:3857" ou "srs=EPSG:4325" à votre unitsURL afin que Geoserver renvoie les données GeoJSON qui se trouvent dans le bon système de référence de coordonnées.

var unitsurl = 'https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=text/javascript&format_options=Json=callback:EP57'

ou alors

var unitsurl = 'https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=text/javascript&format_options=Json=43RS'S'EP

Voir la vidéo: Data Types - Ajouter des données géographiques dans Excel