5

我第一次使用传单/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() 中删除图层，但没有出现任何内容>

如果有人可以帮助我……</p>

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

4

2 回答 2

5

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

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

但是如果你想定期刷新数据，基于边界框，你可以使用leaflet-ajax插件中的刷新方法：

您还可以添加一组 url 而不仅仅是一个，请记住“addUrl”会将新 url(s) 添加到当前列表中，但如果要替换它们，请使用刷新，例如：

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(...)
于 2013-03-17T13:09:25.177 回答
0

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

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 请求。有关更多文档，请参阅源代码注释。

于 2013-09-04T16:24:11.270 回答