mapbox gl js 上的自定义滑块缩放条？

Question

我正在尝试在 mapbox gl js 中实现缩放栏，但我唯一发现的是他们文档中的代码，其中添加了 +、- 和重置。无论如何我可以添加一个滑块缩放级别栏吗？（像这样的酒吧https://www.w3schools.com/howto/howto_js_rangeslider.asp）

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

Answer 1

是的，你可以，它需要创建一个自定义控件并手动添加事件来更新地图缩放...但这只是几行代码。我在 css 样式方面没有做太多工作。

这是我用示例 How to create a custom zoom control

创建的 fiddle

这是相关的脚本代码

<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>

mapbox gl js 上的自定义滑块缩放条？

Custom slider zoom bar on mapbox gl js?

javascript

mapbox

mapbox-gl-js