Mapbox GL JS - 样式按钮

Question

我有一些简单的按钮（全屏控制和GPS位置），但我需要至少移动它们，如果可能的话，可以设置它们的样式。我无法在线找到文档来执行此操作。我希望能够像其他任何元素一样通过CSS来做到这一点。

我的两个按钮的代码：

topleftmapbox.addControl(new mapboxgl.FullscreenControl());   


topleftmapbox.addControl(new mapboxgl.GeolocateControl({  // 
positionOptions: {
    enableHighAccuracy: true
},
trackUserLocation: true
}));

除此之外，是否还可以使用CSS更改实际的GPS位置图标？ （蓝色圆圈显示你的位置？）这个问题不需要回答，因为它更像是我想到的一个非常可选的东西，但我必须以某种方式移动按钮，因为它们会干扰其他标签。

Answer 1

您可以通过position的addControl参数指定控件的一般位置：map.addControl(new mapboxgl.FullscreenControl(), 'top-right');

该控件将添加到：

<div class="mapboxgl-ctrl-top-right">
    <div class="mapboxgl-ctrl mapboxgl-ctrl-group">
        <button class="mapboxgl-ctrl-icon mapboxgl-ctrl-fullscreen" aria-label="Toggle fullscreen" type="button"></button>
    </div>
</div>

因此，您可以使用正确的类路径设置样式：

.mapboxgl-ctrl-top-right .mapboxgl-ctrl-fullscreen {
  background-color: red;
}

Answer 2

简单和最佳的解决方案CSS完美的北箭头。

.mapboxgl-ctrl-group{
    border-radius: 1px;
}
.mapboxgl-ctrl-group > .mapboxgl-ctrl-icon {
    width: 24px;
    height: 24px;
}
.mapboxgl-ctrl-group > .mapboxgl-ctrl-icon > button {
    width: 24px !important;
    height: 24px !important;
    border-radius: 2px !important;
}
.mapboxgl-ctrl-compass-arrow {
    margin: 0.1em 2px !important;
}

Image

如果要更改放大和缩小控件的图标，请修改这些类。

 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABjSURBVEhLYxgFtAQOQHwRStMMtAPxfyhNMzBqCUlg1BIU4AjEHXjwcSAGWQKiscnDsD0Q4wSXgRhkCKUYlGFxApALsLkMhqniE0Jg6EQ8ITBqCUlg+FgCqxkpygejAA9gYAAASnVG42Lr1P0AAAAASUVORK5CYII=");}


 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVEhLYxgFo2AUjALSwVEg/k8hPgLEOMFhIMamiRQMMmMUjIJRMAqIBwwMALVbIvDMYvl8AAAAAElFTkSuQmCC");}