Пользовательская полоса масштабирования ползунка на mapbox gl js? - PullRequest
Новая
       24

Пользовательская полоса масштабирования ползунка на mapbox gl js?

0 голосов
/ 10 июля 2020

Я пытаюсь реализовать полосу масштабирования в mapbox gl js, но единственное, что я нашел, - это код из их документации, который добавляет +, - и сброс. Есть ли способ добавить ползунок уровня масштабирования слайдера? (Такой столбец https://www.w3schools.com/howto/howto_js_rangeslider.asp) 

var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'bottom-left');

1 Ответ

1 голос
/ 10 июля 2020

Да, можно, для этого требуется создать настраиваемый элемент управления и вручную добавить событие для обновления масштаба карты ... но это всего лишь несколько строк кода. Я не особо много работал со стилем css.

How to create a custom zoom control here's a fiddle I have created with an example Как создать настраиваемый элемент управления масштабированием

А вот соответствующий скриптовый код 

<script>

    mapboxgl.accessToken = 'PUT HERE YOUR MAPBOX TOKEN';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        zoom: 3, // starting zoom
        center: [-95, 40], // starting position [lng, lat]
    });
    map.on('load', function () {

        let zoomControl = new CustomZoomControl();
        map.addControl(zoomControl, 'top-right');

        map.on('zoom', function () {
            zoomControl.update();
        });
    });

    class CustomZoomControl {

        onAdd(map) {
            this.map = map;

            this.container = document.createElement('div');
            this.container.className = " mapboxgl-ctrl mapboxgl-ctrl-group";

            this.input = document.createElement('input');
            this.input.type = "range"
            this.input.min = 1;
            this.input.max = 220;
            this.createAttribute(this.input , "value", map.getZoom()*10)
            this.input.className = "slider";
            this.input.id = "myRange";

            this.container.appendChild(this.input);

            // Update the current slider value (each time you drag the slider handle)
            this.input.oninput = function () {
                map.setZoom(this.value/10);
            }

            return this.container;
        }
        onRemove() {
            this.container.parentNode.removeChild(this.container);
            this.map = undefined;
        }

        createAttribute(obj, attrName, attrValue) {
            var att = document.createAttribute(attrName);
            att.value = attrValue;
            obj.setAttributeNode(att);
        }

        update() {
            let zoom = map.getZoom() * 10;
            if (this.input.value != zoom) this.input.value = zoom;
        }

    }

</script>
...