1

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

Всім привіт народ
Я хочу зробити кнопку яка буде викликати форму
В цій формі буду два списка (лівий і правий) кожен буде відповідно відповідати за ліву частину екрана і праву
В цих списках повинні бути групи шарів для відображення(зліва і справа відповідно)
Маю код який створює просто слайдер для двох вибраних мною шарів
Та кнопку яка викливає цю функцію і включає або виключає слайдер на карті
Також чи можливо ці змінні(шари) зробити глобальними, саме ті які вибрала людина
В мене є кнопка виведення функції
[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

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

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

3

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

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

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

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

4

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

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

5

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

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

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

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, 84 downloads since 2018-08-21 

7

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

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

8

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

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

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

10

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

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

11

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

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

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

myFunc(arr);
[/code]