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

我试图在mapbox gl js中实现一个缩放栏，但我发现的唯一一件事是他们文档中的这段代码，它添加了一个+，-和一个重置。我是否可以添加滑块缩放水平条？（像这样的酒吧）

---

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

这是我用一个例子制作的小提琴

下面是相关的脚本代码

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

mapboxgl.accessToken='将您的MAPBOX标记放在这里'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
缩放：3，//开始缩放
中心：[-95,40]，//起始位置[lng，lat]
});
map.on（'load'，function（）{
让zoomControl=新的CustomZoomControl（）；
addControl（zoomControl，“右上角”）；
map.on（'zoom'，函数（）{
zoomControl.update（）；
});
});
类CustomZoomControl{
onAdd（地图）{
this.map=map；
this.container=document.createElement（'div'）；
this.container.className=“mapboxgl ctrl mapboxgl ctrl group”；
this.input=document.createElement（'input'）；
this.input.type=“范围”
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）；
//更新当前滑块值（每次拖动滑块控制柄时）
this.input.oninput=函数（）{
map.setZoom（此.value/10）；
}
退回这个集装箱；
}
onRemove（）{
this.container.parentNode.removeChild（this.container）；
this.map=未定义；
}
createAttribute（对象、属性名、属性值）{
var att=document.createAttribute（attrName）；
att.value=attr值；
目标设定属性节点（att）；
}
更新（）{
让zoom=map.getZoom（）*10；
如果（this.input.value！=zoom）this.input.value=zoom；
}
}

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