Leaflet: ํŠน์ • ๋ ˆ์ด์–ด๋ฅผ ํ†ต๊ณผํ•˜์ง€ ์•Š๊ณ  ๋ชจ๋“  ํ™œ์„ฑ ๋ ˆ์ด์–ด๋ฅผ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ์ง€์›๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2015๋…„ 02์›” 18์ผ  ยท  2์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: Leaflet/Leaflet

๋ชจ๋“  ํ™œ์„ฑ ๋ ˆ์ด์–ด๋ฅผ ์ง€์šฐ๊ฑฐ๋‚˜ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ํŠน์ • ๋ ˆ์ด์–ด๋ฅผ ํ†ต๊ณผํ•˜์ง€ ์•Š๊ณ  ํ™œ์„ฑ ๋ ˆ์ด์–ด๋ฅผ ๋ชจ๋‘ ์ œ๊ฑฐํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์–ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜๋‚˜์š”?

์ด ๋ชฉ์ ์„ ์œ„ํ•ด 2๊ฐ€์ง€ ์ฃผ์š” ๊ธฐ๋Šฅ์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.
map.removeLayer(๋งˆ์ปค);
Markers.clearLayers();

ํ•˜์ง€๋งŒ ์ด ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋Š” ๋™์•ˆ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค... ์‹ค์ œ๋กœ๋Š” ํ•œ ๋ฒˆ๋งŒ ์ž‘๋™ํ•˜๋ฏ€๋กœ ๋งˆ์ปค์˜ ํ•œ ๋ ˆ์ด์–ด๋งŒ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ๋‚ด๊ฐ€ ๋ญ”๊ฐ€ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

var map = new L.Map('์ง€๋„');

ํ•จ์ˆ˜ getMarker(){
var ํžˆํŠธ๋งต = "";
if(๋งˆ์ปค) {
map.removeLayer(Membersx);
map.removeLayer(map._layers);
}
$.ajax({
์œ ํ˜•: "๊ฒŒ์‹œ๋ฌผ",
URL: "app_lib->FOLDER['admin'].$this->router->class ?>/buscador",
๋ฐ์ดํ„ฐ ์œ ํ˜•: "json",
๋ฐ์ดํ„ฐ: {๊ณ„์ธต:=$json_encode(๊ณ„์ธต);?>}
์„ฑ๊ณต: ํ•จ์ˆ˜(๊ฒฐ๊ณผ){
$.each(๊ฒฐ๊ณผ, ํ•จ์ˆ˜(์ธ๋ฑ์Šค, ๋ ˆ์ด์–ด) {
var ๋งˆ์ปค = L.geoJson(layer.data,{
pointToLayer: ๊ธฐ๋Šฅ(๊ธฐ๋Šฅ, ์œ„๋„) {
if(feature.geometry.type == 'ํฌ์ธํŠธ'){
return L.marker(latlng, {icon: L.ExtraMarkers.icon({ icon: feature.marker_icon, markerColor: feature.marker_color, ๋ชจ์–‘: feature.marker_type, ์ ‘๋‘์‚ฌ: 'fa' }) })
}
},
oneEachFeature: ํ•˜๋‚˜์˜EachFeature
});
map.addLayer(๋งˆ์ปค);
});
}

์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ €๋ฅผ ๋„์™€์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ...?

๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ง€๋„์—์„œ ๋ ˆ์ด์–ด๋ฅผ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ๊ทธ๋ฃนํ™”๋œ ๋ ˆ์ด์–ด์—์„œ ์ œ๊ฑฐ/์ง€์šฐ๊ธฐ์— ์ถฉ๋ถ„ํ•œ ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. L.Map ์—๋Š” eachLayer ํ•จ์ˆ˜์™€ ํ•จ๊ป˜ ์ž˜ ์ž‘๋™ํ•˜๋Š” removeLayer ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

map.eachLayer(function (layer) {
    map.removeLayer(layer);
});

http://leafletjs.com/reference.html#map -eachlayer
http://leafletjs.com/reference.html#map -removelayer

ํ•ด๋‹น ๊ธฐ๋Šฅ์ด ๋งŽ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ L.Map ์‰ฝ๊ฒŒ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

L.Map.include({
  'clearLayers': function () {
    this.eachLayer(function (layer) {
      this.removeLayer(layer);
    }, this);
  }
});

์ด๊ฒƒ์ด L.Map ํฌํ•จ๋˜์ง€ ์•Š์€ ์ด์œ (์—ฌ๊ธฐ์„œ ์ถ”์ธกํ•˜๊ณ  ์žˆ์Œ)๋Š” ๊ทธ๊ฒƒ์„ ํ•„์š”๋กœ ํ•˜๋Š” ์‚ฌ๋žŒ์ด ๊ฑฐ์˜ ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ตฌํ˜„์—์„œ๋Š” L.LayerGroup , L.FeatureGroup ๋˜๋Š” L.GeoJSON ์™€ ๊ฐ™์€ ๊ทธ๋ฃนํ™”๋œ ๋ ˆ์ด์–ด ์œ ํ˜• ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ ˆ์ด์–ด ์ปฌ๋ ‰์…˜์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ ˆ์ด์–ด์—๋Š” clearLayers ๋ฉ”์„œ๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

http://leafletjs.com/reference.html#layergroup -clearlayers

ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์ด ์ด๋ฏธ ๊ฑฐ๊ธฐ์— ์žˆ์œผ๋ฏ€๋กœ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ตฌํ˜„ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ตฌํ˜„์— ๋ฌธ์ œ๊ฐ€ ์žˆ๊ฑฐ๋‚˜ ๋„์›€์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ด ๋ฌธ์ œ ์ถ”์ ๊ธฐ์— ๊ฒŒ์‹œํ•˜๋Š” ๊ฒƒ์€ ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ด ์•„๋‹™๋‹ˆ๋‹ค. Leaflet์˜ Google ๊ทธ๋ฃน ๊ณผ ๊ฐ™์€ ์ ์ ˆํ•œ ์ฑ„๋„์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Stackoverflow์— ์งˆ๋ฌธ์„ ๊ฒŒ์‹œํ•˜๋ฉด ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›๊ณ  ํ›จ์”ฌ ๋” ๋นจ๋ฆฌ ๋„์›€์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  2 ๋Œ“๊ธ€

์ง€๋„์—์„œ ๋ ˆ์ด์–ด๋ฅผ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ๊ทธ๋ฃนํ™”๋œ ๋ ˆ์ด์–ด์—์„œ ์ œ๊ฑฐ/์ง€์šฐ๊ธฐ์— ์ถฉ๋ถ„ํ•œ ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. L.Map ์—๋Š” eachLayer ํ•จ์ˆ˜์™€ ํ•จ๊ป˜ ์ž˜ ์ž‘๋™ํ•˜๋Š” removeLayer ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

map.eachLayer(function (layer) {
    map.removeLayer(layer);
});

http://leafletjs.com/reference.html#map -eachlayer
http://leafletjs.com/reference.html#map -removelayer

ํ•ด๋‹น ๊ธฐ๋Šฅ์ด ๋งŽ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ L.Map ์‰ฝ๊ฒŒ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

L.Map.include({
  'clearLayers': function () {
    this.eachLayer(function (layer) {
      this.removeLayer(layer);
    }, this);
  }
});

์ด๊ฒƒ์ด L.Map ํฌํ•จ๋˜์ง€ ์•Š์€ ์ด์œ (์—ฌ๊ธฐ์„œ ์ถ”์ธกํ•˜๊ณ  ์žˆ์Œ)๋Š” ๊ทธ๊ฒƒ์„ ํ•„์š”๋กœ ํ•˜๋Š” ์‚ฌ๋žŒ์ด ๊ฑฐ์˜ ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ตฌํ˜„์—์„œ๋Š” L.LayerGroup , L.FeatureGroup ๋˜๋Š” L.GeoJSON ์™€ ๊ฐ™์€ ๊ทธ๋ฃนํ™”๋œ ๋ ˆ์ด์–ด ์œ ํ˜• ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ ˆ์ด์–ด ์ปฌ๋ ‰์…˜์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ ˆ์ด์–ด์—๋Š” clearLayers ๋ฉ”์„œ๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

http://leafletjs.com/reference.html#layergroup -clearlayers

ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์ด ์ด๋ฏธ ๊ฑฐ๊ธฐ์— ์žˆ์œผ๋ฏ€๋กœ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ตฌํ˜„ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ตฌํ˜„์— ๋ฌธ์ œ๊ฐ€ ์žˆ๊ฑฐ๋‚˜ ๋„์›€์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ด ๋ฌธ์ œ ์ถ”์ ๊ธฐ์— ๊ฒŒ์‹œํ•˜๋Š” ๊ฒƒ์€ ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ด ์•„๋‹™๋‹ˆ๋‹ค. Leaflet์˜ Google ๊ทธ๋ฃน ๊ณผ ๊ฐ™์€ ์ ์ ˆํ•œ ์ฑ„๋„์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Stackoverflow์— ์งˆ๋ฌธ์„ ๊ฒŒ์‹œํ•˜๋ฉด ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›๊ณ  ํ›จ์”ฌ ๋” ๋นจ๋ฆฌ ๋„์›€์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

^^ :+1:
๋งˆ์ปค ๋ ˆ์ด์–ด๋ฅผ ๊ธฐ์–ตํ•˜๊ณ  ์ œ๊ฑฐํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰