Переключение между слоями в листке тепловой карты

Я хочу динамически переключаться между слоями в листовке. Поэтому я думаю, что скрыть слои. Вот мой кодПереключение между слоями в листке тепловой карты

<div id="map"></div> 
    <div> 
     <button onclick='fun1()'>yellowhide</button> 
     <button onclick='fun2()'>redhide</button> 
    </div> 

    <script> 
    //same lat long means overlapping 
    addressPoints1= [  [-37.8210922667, 175.2209316333, "2"],  [-37.8210819833, 175.2213903167, "3"],  [-37.8210881833, 175.2215004833, "3"],  [-37.8211946833, 175.2213655333, "1"]]  addressPoints2= [  [-37.8210922667, 175.2209316333, "2"],  [-37.8210819833, 175.2213903167, "3"],  [-37.8210881833, 175.2215004833, "3"],  [-37.8211946833, 175.2213655333, "1"]]  
    var tiles=L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {  attribution: '',  id: 'examples.map-20v6611k'  }) var map = L.map('map', {  center: [-37.87, 175.475],  zoom: 16,  layers: [tiles]  });  var heat1 = L.heatLayer(addressPoints1,{  gradient: {1:"red"}   }).addTo(map); var heat2 = L.heatLayer(addressPoints2,{  gradient: {1:"yellow"} }).addTo(map);  



    function fun1(){ console.log("hide yellow layer"); 
     $('.heat2').hide(); } function fun2(){ console.log("hide red layer"); 
     $('.heat1').hide(); 
    }

но это не работает.

источник

2015-01-17 kalyani

Нет необходимости использовать jQuery и запрос для этих слоев, потому что вы уже объявили ранее переменные heat1 и heat2. Вы можете использовать их, чтобы удалить их с карты или добавить их снова. На данный момент вы используете addTo метод слоя, чтобы добавить слой к карте:

var heat1 = L.heatLayer().addTo(map);

Что в фоновом режиме выполняет addLayer метод экземпляра карты:

map.addLayer(heat1);

Карта экземпляр также removeLayer метод удаления слоев с карты:

map.removeLayer(heat1);

Таким образом, вы можете использовать, что в обработчике OnClick:

function fun1() { 
    map.removeLayer(heat1); 
}

Вот ссылка со всеми методами слоя L.Map: http://leafletjs.com/reference.html#map-stuff-methods

источник

2015-01-17 10:01:56 iH8

я не хочу добавлять или удалять слой. просто переключаемся между слоями .. как у нас есть две кнопки 1 для красного слоя и 2-й для желтого слоя ... когда я нажимаю красную кнопку, красный слой отображается поверх желтого слоя. И когда я нажимаю желтую кнопку, желтый слой отображается на верх красного слоя .. – kalyani

В вашем вопросе вы сказали «спрятаться», что означает «убрать с глаз долой, скрыть от взгляда». Вы должны были упомянуть об этом в своем вопросе. – iH8

@ iH8 да, u r right (вид) .. но разница между hide() и remove() такова: - hide() устанавливает свойство отображения элементов совпадающих элементов равным none. remove() полностью удаляет согласованные элементы из DOM. – kalyani

, если вы не нашли решение для этого, есть взгляд в Leaflet Layer Controls.

С помощью элементов управления вы можете изменять видимые слои карты.

var baseLayers = { 
    "Mapbox": tiles 
}; 

var overlays = { 
    "Fancy Heatmap": heat1, 
    "Another fancy Heatmap": heat2 
}; 

L.control.layers(baseLayers, overlays).addTo(map);

НТН,
Meykel

источник

2016-07-19 14:36:04 Meykel

Переключение между слоями в листке тепловой карты

ответ

Смежные вопросы