javascript - 使用边界框内的数据更新 Leaflet GeoJSON 层

Question

我是第一次使用 leaflet/JavaScript，我想显示一张 map ，其中有一个 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 事件中删除图层，但出现语法错误......

如果有人能帮助我……

抱歉我的英语不好，法国人有法语函数名

Answer 1

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

让 map 正常工作的最简单方法是在开始时下载所有可用数据，提供一个巨大的边界框，然后将其添加到 map 中一次。这可能会工作得很好，除非有非常多的小屋和东西要下载。

---

但是如果你希望定期刷新数据，基于边界框，你可以使用the leaflet-ajax plugin中的refresh方法:

you can also add an array of urls instead of just one, bear in mind that "addUrl" adds the new url(s) to the list of current ones, but if you want to replace them use refresh e.g.:

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

或者，您可以将图层设置为 map 的属性，而不是 var:

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

以后引用如下:

map.geoJsonLayer.refresh(...)