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() でレイヤーを削除しようとしましたが、何も表示されません moveend イベントでレイヤーを削除しようとしましたが、構文エラーが発生しました…</p >

誰か助けてくれたら…</p>

英語が下手で申し訳ありませんが、フランス人はフランス語の関数名を使用しています

4

2 に答える 2

5

リーフレット ajax プラグインを使用しているようです。

マップを機能させる最も簡単な方法は、利用可能なすべてのデータを最初にダウンロードして巨大な境界ボックスを提供し、それをマップに一度だけ追加することです。非常に多くのキャビンやダウンロードするものがない限り、これはおそらく問題なく機能します。

ただし、バウンディング ボックスに基づいて定期的にデータを更新する場合は、leaflet-ajax プラグインで更新メソッドを使用できます。

1 つだけではなく、URL の配列を追加することもできます。「addUrl」は新しい URL を現在の URL のリストに追加することに注意してください。ただし、それらを置き換えたい場合は、refresh を使用します。

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 に答える