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

Question

我第一次使用leaflet/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事件中删除图层，但出现了语法错误...

如果有人能帮助我...

对不起，我的英语不好，我是个法国人，使用的是法国函数名称

- leosw

---

你需要学习英语，伙计！ :) - George Katsanos

你不需要radius变量，因为你似乎没有绘制位置精度的圆形;-) - Rmatt

Answer 1

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

让地图正常工作的最简单方法是一开始就下载所有可用数据，提供一个巨大的边界框，并仅将其添加到地图中一次。这可能非常有效，除非需要下载的小屋和其他东西太多了。

---

但是，如果您希望根据边界框定期刷新数据，则可以使用leaflet-ajax插件中的刷新方法：

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

或者，您可以将图层设置为地图的属性，而不是作为var：

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

之后可以按照如下方式引用它：

map.geoJsonLayer.refresh(...)

- flup

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

扩展 L.GeoJSON 的功能，支持 ajax 或 jsonp 请求。有关更多文档，请参阅源代码注释。

- stefcud