更新Leaflet包含边界框中的数据的GeoJSON图层

Question

我第一次使用传单/ JavaScript，并且想要显示地图，并且GeoJSON图层在每次移动时都会发生变化......仅显示该区域上的点。

这是我的代码源：

// 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); 

我试图在我的第一功能除去该层，但GeoJSONlayer没有定义 我试图在onMove（）除去该层，但没有出现 我试图删除moveend事件层，但我有一个语法错误...

如果有人能帮助我...

对不起，我英文不好，法国人第i个弗伦ch函数名称

Answer 1

我看到您正在使用传单ajax插件。

让您的地图工作的最简单方法是在开始时下载所有可用的数据，提供一个巨大的边界框，并将其添加到地图一次。这可能会工作得很好，除非有疯狂的许多小木屋和东西下载。

---

但是，如果你希望定期刷新数据的基础上，边界框，您可以使用the leaflet-ajax plugin的刷新方法：

你也可以添加网址，而不是一个数组，牢记 说，“addUrl”，增加了新的网址，以当前者的名单，但如果 要更换他们使用刷新例如：

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 

所以最初：

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); 

然后，每次更新：

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() + '']); 
} 

或者，你可以把该层设置为地图的属性，而不是作为一个var：

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

后来提到它如下：

map.geoJsonLayer.refresh(...) 

Answer 2

该小册子插件更适合您的目的，管理地图事件和缩放。 缓存远程请求等等。

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 })); 

扩展与更多的功能和支持AJAX或JSONP请求L.GeoJSON。查看源代码注释以获取更多文档。