更新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。查看源代碼註釋以獲取更多文檔。