Javascript 使用边界框内的数据更新传单GeoJSON层

我第一次使用传单/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);

//刷新要显示的点的函数
函数segeoJSON（）{
//我的点的默认图标
var defaultIcon=L.icon({
iconUrl:“../images/icones/cabane.png”，
iconSize:[16,16]，
iconAnchor:[8,8]，
popupAnchor:[0，-8]
});
//我们使用其样式创建每个点（来自GeoJSON文件）
功能onEachFeature（功能，图层）{
var popupContent='”；
layer.bindPopup（弹出内容）；
var cabaneIcon=L.icon({
iconUrl:'../images/icones/'+feature.properties.type+'.png'，
iconSize:[16,16]，
iconAnchor:[8,8]，
popupAnchor:[0，-8]
});
layer.setIcon（卡巴尼肯）；
}
//我们下载GeoJSON文件（使用ajax插件）
var GeoJSONlayer=L.geoJson.ajax（'../exportations/exportations.php？format=geoJson&bbox='+map.getBounds（）.toBBoxString（）+''{
onEachFeature:onEachFeature，
pointToLayer：功能（特性、latlng）{
返回L.marker（latlng，{icon:defaultIcon}）；
}
}).addTo（地图）；
}
//我们创建地图
var map=L.map（'map'）；
L.tileLayer（'http://maps.refuges.info/hiking/{z} /{x}/{y}.png'{
归属：“©；出资人d\”，
最大缩放：18
}).addTo（地图）；
//空的基层
var GeoJSONlayer=L.geoJson（）.addTo（map）；
//用于仅显示您的区域
函数onLocationFound（e）{
var半径=e.精度/2；
L.标记（如latlng）。添加到（地图）；
执行segeoson（）；
}
函数onLocationError（e）{
警报（e.message）；
执行segeoson（）；
}
函数onMove（）{
//map.removeLayer（GeoJSONlayer）；
执行segeoson（）；
}
locate（{setView:true，maxZoom:14}）；
//如果需要，则修改数据
map.on（'locationerror'，onLocationError）；
地图上（'locationfound'，onLocationFound）；
地图在（'moveend'，onMove'）；

我尝试在第一个函数中删除该层，但没有定义GeoJSONlayer 我试图删除onMove（）中的图层，但没有显示任何内容 我已尝试在moveend事件中删除该层，但出现语法错误

如果有人能帮我

---

对不起，我的英语不好，法语家伙，有法语函数名

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

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

---

但是，如果您希望定期刷新数据，则可以基于边界框使用以下中的刷新方法：

记住，您还可以添加URL数组，而不仅仅是一个URL 该“addUrl”将新url添加到当前url的列表中，但如果 您想使用刷新来替换它们，例如：

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(...)

---

此传单插件更适合您的目的，管理地图事件和缩放。 缓存远程请求等等

---

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

faut apprendre L'anglais mec！：）并且您不需要半径变量，因为您似乎不需要绘制位置精度的圆；-）

var ajaxUrl = "search.php?lat1={minlat}&lat2={maxlat}&lon1={minlon}&lon2={maxlon}";
map.addLayer( new L.LayerJSON({url: ajaxUrl }) );