Question

我要添加一些简单的按钮（全屏控制和GPS位置），但是我需要最少移动它们，并尽可能设置样式。我找不到在线文档来做到这一点。我希望能够通过CSS像其他任何元素一样做到这一点。

两个按钮的代码：

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


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

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

Answer 1

您可以通过addControl的position参数指定控件的常规位置： 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非常适合向北箭头。

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class MyButton : Button
{

    public override void OnPointerDown(PointerEventData eventData)
    {
        base.OnPointerDown(eventData);
        Debug.Log("Down");
        //show text
    }

    public override void OnPointerUp(PointerEventData eventData)
    {
        base.OnPointerUp(eventData);
        Debug.Log("Up");
        //hide text
    }
}

Image

如果要更改图标以进行放大和缩小控制，请修改这些类。

.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;
}

Mapbox GL JS-样式按钮

2 个答案: