mapbox去除logo控件和attribution控件

初始化mapbox地圖后，默認的地圖上是存在mapbox的logo和版權的聲明的。mapbox雖然是開源的，但是依然是公司的產品。源碼層面這兩個控件是寫死的，就是默認不能去掉，只能調整位置和部分的內容。不過，logo和版權聲明畢竟是網頁上的dom元素，放在我們手里還有什么不能更改的呢。

更改的方法有兩種：

1）CSS樣式隱藏

以logo控件為例，查找logo控件對應的dom元素

可以看到div.mapbox-ctrl這個元素就是logo控件元素，那么我們是不是設置下面樣式就可以了呢

.mapbox-ctrl{display: none !import}

答案是否定的，除非是地圖上一個控件都不要。.mapbox-ctrl樣式是針對所有控件的，所以要針對性的找到對應的控件才行。

如果左下角只有一個logo控件，那么可以

.mapboxgl-ctrl-bottom-left div{
  display:none !important;
}

或者

let logoDom = document.querySelector(".mapboxgl-ctrl-bottom-left").children[0];
logoDom.style.display = "none";

上面的兩種方法都可以實現隱藏Logo控件，第一種方法更優雅一點，因為第二種方法是在Logo出現之后再隱藏，會有閃爍的情況。

如果左下角包含多個控件，像這樣

logo控件並不是左下角的第一個控件，那么依然可以

.mapboxgl-ctrl-bottom-left>div:last-child{ 
  /* 這里的子節點序號是從1開始，2是第二個節點, last是最后一個控件*/
  display: none !important;
}

或者

let logoDom = document.querySelector(".mapboxgl-ctrl-bottom-left").children[1];
// 這里的子節點序號是從0開始，1是第二個節點
logoDom.style.display = "none";

2）源碼層面隱藏

我們知道，添加控件的方法是addControl, addControl將控件中的dom元素加載在頁面上的同時，該控件會被緩存在_controls中。

添加默認的控件后，打印緩存信息

console.log(map._controls)

可以看到添加的默認的控件列表，找到對應的控件則可以通過removeControl則可以去除對應的控件

let controls = map._controls;
controls.forEach(control => {
    // 去除logo控件
    if('_updateLogo' in control){
        map.removeControl(control)
    }
    
    // 去除attribute控件
    if('_attribHTML' in control){
        map.removeControl(control)
    }
})

通過比較，不管是修改css樣式，還是通過js動態修改控件，都可以隱藏控件。比較優雅的方式是使用css樣式。