1 Тема від vladpdp

  • vladpdp
  • Користувач
  • Поза форумом
  • Дата реєстрації: 20.08.2018
  • Повідомлень: 6
    • Репутація: 0

Тема: Кастомізація слайдера шарів

Всім привіт народ
Я хочу зробити кнопку яка буде викликати форму
В цій формі буду два списка (лівий і правий) кожен буде відповідно відповідати за ліву частину екрана і праву
В цих списках повинні бути групи шарів для відображення(зліва і справа відповідно)
Маю код який створює просто слайдер для двох вибраних мною шарів
Та кнопку яка викливає цю функцію і включає або виключає слайдер на карті
Також чи можливо ці змінні(шари) зробити глобальними, саме ті які вибрала людина
В мене є кнопка виведення функції
[code=HTML]<input class="push" value="Push me" onclick="Swipe()" type="button">[/code]
та сама функція яка викликає слайдер шарів
[code=JavaScript]var ctrl = new ol.control.Swipe();
function Swipe()
{
    if(window.isSwipe)
    {
        window.isSwipe = false;
        map.removeControl(ctrl);
        ctrl.removeLayer(osm, true);     
        ctrl.removeLayer(stamen); 
    }
    else
    {   
        window.isSwipe = true;
        map.addControl(ctrl);
        ctrl.addLayer(osm, true);
        ctrl.addLayer(stamen);
    }
}[/code]
Порадою, кодом або посилання на щось схоже, за все дякую

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Кастомізація слайдера шарів

що мається на увазі під шарами? намалюйте іллюстрацію (бажано в стилі аніме), як то все повинно виглядати

3 Відповідь від vladpdp

  • vladpdp
  • Користувач
  • Поза форумом
  • Дата реєстрації: 20.08.2018
  • Повідомлень: 6
    • Репутація: 0

Re: Кастомізація слайдера шарів

Це форма яка має викликатися при натисканні на кнопку
Шари це звичайні змінні var тільки вони відображаються на карті
Також в мене є група шарів(змінна var) - layers в якій 

var layers = [  stamen2, stamen, osm, rastre, cadastre, MyWMS,  rast];
Post's attachments

wwww.PNG 129.48 kb, 106 downloads since 2018-08-21 

4 Відповідь від vladpdp

  • vladpdp
  • Користувач
  • Поза форумом
  • Дата реєстрації: 20.08.2018
  • Повідомлень: 6
    • Репутація: 0

Re: Кастомізація слайдера шарів

Ось наприклад як об'являється шар
[code=JavaScript]var stamen = new ol.layer.Tile({
    title: "Watercolor",
    baseLayer: true,
    visible: false,
    source: new ol.source.Stamen({
        layer: 'watercolor'
    })
});[/code]

5 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Кастомізація слайдера шарів

то ці шари - просто дані, котрі тре змінювати в одному якомусь div'і, чи окремі div'и?

6 Відповідь від vladpdp Востаннє редагувалося vladpdp (21.08.2018 15:03:32)

  • vladpdp
  • Користувач
  • Поза форумом
  • Дата реєстрації: 20.08.2018
  • Повідомлень: 6
    • Репутація: 0

Re: Кастомізація слайдера шарів

Я спробую об'яснити максимально детально що мені потрібно
Минулий код трохи доробив, але не до кінця ще
[code=HTML]<a href="#win1" class="btn btn-default btn-lg" role="button">Open</a>
    <!-- <button value="Push me" onclick="layer_slider"> -->
      <a href="#x" class="overlay" id="win1"></a>
      <div class="popup">

        <form id="layer_slid" name="layer_slider" >
          <p>Left</p>
          <input list="list_lay" type="text" >
          <datalist id="list_lay">
            <option value="rasd" >First</option>
            <option value="cadastre" >Second</option>
            <option value="dqwddwqd" >Third</option>
            <option value="fourth">Fourth</option>
          </datalist><br>
          <p>Right</p>
          <input list="list_lay" type="text" >
        </form>
        <a class="close"title="Close" href="#close"></a>
      </div>[/code]
Це виглядає отак
Мені потрібно що б значення змінної якої виберуть в списках
"cadastre" - зліва
"dqwddwqd" - справа
після натискання кнопки Ok(яку я ще добавлю в модульне вікно)
передалося в функцію в такому вигляді
[code=JavaScript]function Swipe()
{
    if(window.isSwipe)
    {
        window.isSwipe = false;
        map.removeControl(ctrl);
        ctrl.removeLayer(cadastre);     
        ctrl.removeLayer(dqwddwqd); 
    }
    else
    {   
        window.isSwipe = true;
        map.addControl(ctrl);
        ctrl.addLayer(cadastre);
        ctrl.addLayer(dqwddwqd);
    }
}[/code]
Ось все, далі функція має зробити своє діло
http://replace.org.ua/misc.php?action=pun_attachment&amp;item=1879

Post's attachments

qazwsx.PNG 34.59 kb, 95 downloads since 2018-08-21 

7 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Кастомізація слайдера шарів

ну ок, а в чому проблема?

8 Відповідь від vladpdp

  • vladpdp
  • Користувач
  • Поза форумом
  • Дата реєстрації: 20.08.2018
  • Повідомлень: 6
    • Репутація: 0

Re: Кастомізація слайдера шарів

В тому як передавати вибрані шари користувачем в JS функцію
[code=JavaScript]function Swipe()
{
    if(window.isSwipe)
    {
        window.isSwipe = false;
        map.removeControl(ctrl);
        ctrl.removeLayer(cadastre);     
        ctrl.removeLayer(dqwddwqd); 
    }
    else
    {   
        window.isSwipe = true;
        map.addControl(ctrl);
        ctrl.addLayer(cadastre);
        ctrl.addLayer(dqwddwqd);
    }
}[/code]
От сюда

9 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Кастомізація слайдера шарів

ну от коли кляцає на шари, то додавайте їх в якийсь масив, а потім передавайте цей масив в функцію

10 Відповідь від vladpdp

  • vladpdp
  • Користувач
  • Поза форумом
  • Дата реєстрації: 20.08.2018
  • Повідомлень: 6
    • Репутація: 0

Re: Кастомізація слайдера шарів

Якщо можна скиньте приклад чи хоча б яка технологія використовується для того що б передати масив, або щось інше в js

11 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Кастомізація слайдера шарів

[code=JavaScript]
const arr = ['elem1', 'elem2', 'elem3'];

function myFunc(someArray) {
    console.log(someArray);
}

myFunc(arr);
[/code]