mapbox-gl | 1.9 地图控件地图控件，是在地图上添加一些DOM元素，辅助我们获取地图上的信息，最常见的是指北

简述

地图控件，是在地图上添加一些DOM元素，辅助我们获取地图上的信息，最常见的是指北针，缩放比例等，本节将讲述如何添加这些控件。

// 添加一个导航控件
map.addControl(new mapboxgl.NavigationControl());

addControl 这个方法有两个参数，第一个参数为控件实例，第二则是该控件要放到屏幕的哪里，有四个选项，左上左下，右上右下，默认在右上

移除控件

const navigation = new mapboxgl.NavigationControl();

map.addControl(navigation);
// 移除
map.removeControl(navigation);

是否已有某控件

const navigation = new mapboxgl.NavigationControl();
map.addControl(navigation);
const added = map.hasControl(navigation);
//  true

官方提供了几个地图控件，本节只详细讲常用的

说叫导航，但并不能解释这个控件的作用，它主要由两个功能，指北针，以及使地图放大缩小的两个按钮

const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');

默认情况下，他是一个指北针和地图放大缩小的空间，也可以在初始化时传参配置控件。

const nav = new mapboxgl.NavigationControl({
visualizePitch: true,
showCompass: true,
showZoom: true,
});

visualizePitch,控制在我们倾斜地图时（pitch变化），指北针也会跟着倾斜，默认是不倾斜的（false) showCompass 是否显示指北针，默认为显示（true) showZoom 是否显示缩放按钮，默认为显示（true)


map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}));

加一个让地图全屏显示的按钮，FullscreenControl即便你传值，也可以实现全屏功能，传的这个参数，只有在特定情况下才去传，平时是不需要传的

const scale = new mapboxgl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);

增加一个地图比例尺，可以设置其最大长度和单位

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

可以获取你当前的位置（需要浏览器允许），这个不准备多介绍，用的不是很多

const map = new mapboxgl.Map({attributionControl: false})
.addControl(new mapboxgl.AttributionControl({
customAttribution: 'Map design by me'
}));

在地图角落写上一句话，一般很少用到。

以上便是官网提供的控件了，当然，这些并不能完全满足我们的需求，官方也提供了这些控件的父类 IControl，允许其他人对控件进行封装开发，只不过，这并不是入门章节的重点，接下来我再介绍几个非官方提供的控件

绘制控件，提供了在地图上绘制点线面的基础能力，功能十分完善，有时间的同学可以研究一下它的源码。

导出控件，将地图当前内容作为图片导出

地名搜索，这个控件我不是很推荐，毕竟是国外的搜索服务，数据可能不是最新的，建议采用国内的搜索服务。

地图图例，功能还可以，但样式大多数情况下是不符合项目需求的。

其实还有很多非官方控件，感兴趣的可以到这个网址上查看吧,这个网站不止控件，还有很多其他的插件。

作为初学者，学习并了解如何使用mapbox是最重要的，而这些非中心的功能（控件，插件）有时是我们发挥创造性的地方，我建议，如果在项目中要使用这些非官方控件，可以顺便阅读一下代码，有时间的话，自己去写一个，造造轮子，这样会对自己有很大的帮助。

接下来一节是本章的最后一节，将提供更多的示例。