경계 상자 안의 데이터가있는 전단지 GeoJSON 레이어 업데이트

Question

처음으로 리플릿/자바 스크립트를 사용하고 있으며 이동할 때마다 변경되는 GeoJSON 레이어가있는지도를 표시하고 싶습니다. 영역의 포인트 만 표시합니다. 내가 처음으로 함수에서 층을 제거하기 위해 시도했지만 GeoJSONlayer 내가 onMove()에서 층을 제거하기 위해 노력했다 를 정의하지 않고, 아무것도 I를 나타납니다

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

:

이 내 코드의 소스 moveend 이벤트에 층을 제거하려하지만 내 나쁜 영어, 프랑스어 남자 i 번째 fren 용

누군가가 나를 도울 수 있다면

...

죄송합니다 구문 오류가 있습니다 ch 함수 이름

Answer 1

리플렛 ajax 플러그인을 사용하고 있습니다.

지도를 작동시키는 가장 간단한 방법은 처음부터 모든 사용 가능한 데이터를 다운로드하고 거대한 경계 상자를 제공하고지도에 한 번만 추가하는 것입니다. 미친 듯이 많은 통나무 집과 물건을 다운로드하지 않는 한 이것은 아마도 잘 작동 할 것입니다.

---

하지만 당신은 경계 상자를 기반으로, 정기적으로 데이터를 갱신하고자하는 경우, 당신은 the leaflet-ajax plugin에서 새로 고침 방법을 사용할 수 있습니다 : 당신은 또한 URL을 대신 하나의 배열을 추가 할 수 있습니다

을 마음 곰은 "addUrl는"현재 사람들의 목록에 새 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); 

그리고 각 업데이트 :

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

: 또는

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

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

더 많은 기능과 지원 아약스 또는 JSONP 요청 L.GeoJSON을 확장합니다. 자세한 문서는 소스 코드 주석을 참조하십시오.