Mise à jour du Dépliant de GeoJSON couche avec des données à l'intérieur de la boîte englobante

Je suis en utilisant dépliant/JavaScript pour la première fois et je veux afficher une carte, avec un GeoJSON couche qui changent à chaque mouvement... Pour ne montrer que les points sur la zone.

C'est mon code source:

//Function to refresh points to display
function actualiseGeoJSON() {
//Default icon for my points
var defaultIcon = L.icon({
iconUrl: '../images/icones/cabane.png',
iconSize: [16, 16],
iconAnchor: [8, 8],
popupAnchor: [0, -8]
});
//We create each point with its style (from GeoJSON file)
function onEachFeature(feature, layer) {
var popupContent = '<a href="' + feature.properties.url + '">' + feature.properties.nom + "</a>";
layer.bindPopup(popupContent);
var cabaneIcon = L.icon({
iconUrl: '../images/icones/' + feature.properties.type + '.png',
iconSize: [16, 16],
iconAnchor: [8, 8],
popupAnchor: [0, -8]
});
layer.setIcon(cabaneIcon);
}
//We download the GeoJSON file (by using ajax plugin)
var GeoJSONlayer = L.geoJson.ajax('../exportations/exportations.php?format=geojson&bbox=' + map.getBounds().toBBoxString() + '',{
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: defaultIcon});
}
}).addTo(map);
}
//We create the map
var map = L.map('map');
L.tileLayer('http://maps.refuges.info/hiking/{z}/{x}/{y}.png', {
attribution: '&copy; Contributeurs d\'<a href="http://openstreetmap.org">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
//An empty base layer
var GeoJSONlayer = L.geoJson().addTo(map);
//Used to only show your area
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map);
actualiseGeoJSON();
}
function onLocationError(e) {
alert(e.message);
actualiseGeoJSON();
}
function onMove() {
//map.removeLayer(GeoJSONlayer);
actualiseGeoJSON();
}
map.locate({setView: true, maxZoom: 14});
//Datas are modified if
map.on('locationerror', onLocationError);
map.on('locationfound', onLocationFound);
map.on('moveend', onMove);

J'ai essayé de supprimer le calque dans ma première fonction, mais GeoJSONlayer n'est pas défini
J'ai essayé de supprimer le calque dans onMove() mais rien ne s'affiche
J'ai essayé de supprimer le calque dans moveend événement, mais j'ai une erreur de syntaxe...

Si quelqu'un peut m'aider...

Désolé pour mon mauvais anglais, le français guy ith français les noms de fonction

faut apprendre l'anglais mec ! 🙂
et vous n'avez pas besoin du rayon variable puisque vous ne semblez pas dessiner un cercle de la précision de la position 😉

OriginalL'auteur leosw | 2013-03-15

  1. 5

    Je vois que vous êtes à l'aide de la notice ajax plugin.

    La façon la plus simple pour obtenir votre carte de travail est de télécharger toutes les données disponibles, dès le début, en fournissant un géant de la boîte englobante, et l'ajouter à la carte, juste une fois. Ce sera probablement très bien, sauf quand il y a incroyablement beaucoup de cabines et les trucs à télécharger.

    Mais si vous souhaitez actualiser régulièrement les données, basé sur le cadre de sélection, vous pouvez utiliser la méthode d'actualisation dans le dépliant-ajax plugin:

    vous pouvez également ajouter un tableau d'url au lieu d'un seul, gardez à l'esprit
    "addUrl", ajoute la nouvelle url(s) à la liste de ceux en cours, mais si
    vous souhaitez remplacer l'utilisation de rafraîchissement par exemple:

    var geojsonLayer = L.geoJson.ajax("data.json");
geojsonLayer.addUrl("data2.json");//we now have 2 layers
geojsonLayer.refresh();//redownload those two layers
geojsonLayer.refresh(["new1.json","new2.json"]);//add two new layer replacing the current ones

    Donc d'abord:

    var defaultIcon = ...
function onEachFeature(feature, layer) ...
//Do this in the same scope as the actualiseGeoJSON function, 
//so it can read the variable
var GeoJSONlayer = L.geoJson.ajax(
'../exportations/exportations.php?format=geojson&bbox=' 
+ map.getBounds().toBBoxString() + '',{
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: defaultIcon});
}
}).addTo(map);

    Puis pour chaque mise à jour:

    function actualiseGeoJSON() {
//GeoJSONLayer refers to the variable declared
//when the layer initially got added
GeoJSONlayer.refresh(
['../exportations/exportations.php?format=geojson&bbox=' 
+ map.getBounds().toBBoxString() + '']);
}

    Vous pouvez également définir la couche comme une propriété de la carte, au lieu d'un var:

    map.geoJsonLayer = L.geoJson.ajax(...)

    Et ensuite vous y référer comme suit:

    map.geoJsonLayer.refresh(...)

    OriginalL'auteur flup

  2. 0

    cette notice plugin est plus adapté à votre objectif, de gérer la carte des événements et de zoom.
    La mise en cache les requêtes à distance et bien plus encore.

    http://labs.easyblog.it/maps/leaflet-layerjson/

    var ajaxUrl = "search.php?lat1={minlat}&lat2={maxlat}&lon1={minlon}&lon2={maxlon}";
map.addLayer( new L.LayerJSON({url: ajaxUrl }) );

    Étendre L. GeoJSON avec plus de fonctionnalités et d'appui à l'ajax ou jsonp demande. Voir les commentaires du code source pour plus de documentation.

    OriginalL'auteur StefanoCudini