使用边界框内的数据更新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事件中删除图层但是我有语法错误...

如果有人可以帮助我......

抱歉,我的英语不好,法国人的法语函数名称

Answer 1

我看到你正在使用传单ajax插件.

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

但是,如果您希望基于边界框定期刷新数据,可以使用leaflet-ajax插件中的refresh方法:

您还可以添加一个网址数组而不只是一个,请记住"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(...)