2025Mapbox零基础入门教程（13）常用控件-CSDN博客

本文链接：https://blog.csdn.net/2301_78220461/article/details/147624707

Mapbox中的常用控件主要包括attribution control、fullscreen control、geolocation control和navigation control等。

这些控件可通过简单配置实现添加，如自定义位置、全屏显示和获取当前位置等。

其中，geolocation control由于依赖浏览器地理定位API，在普通PC设备上可能无法正常使用，建议通过调用相关地图服务API实现定位功能。

此外，还可通过自定义控件实现更多功能。

常用控件概述

1.控件的定义：控件是地图上用于控制地图行为或显示信息的元素。

2.常用控件：包括归因控件、全屏控件、定位控件、导航控件、比例尺控件等。

归因控件Attribution control

1.归因控件的定义：用于显示地图数据的归因信息，通常包含地图提供商的logo或文本。

2.配置选项：包括compact（是否显示紧凑归因信息）和customAttribution（自定义归因文本）。

3.添加方法：使用map对象的attributionControl方法添加归因控件。

const attributionControl = new mapboxgl.AttributionControl({
  compact: true,
  customAttribution: "xdz-map",
});
map.addControl(attributionControl, 'top-left');

全屏控件（full screen）

1.全屏控件的定义：用于控制地图是否全屏显示。

2.配置选项：包括optionContainer（指定哪个元素应该被全屏）。

3.添加方法：使用map对象的全屏控件方法添加全屏控件。

const fullScreenControl = new mapboxgl.FullscreenControl({
  container: document.getElementById("map"),
});
map.addControl(fullScreenControl);

定位控件position control

1.定位控件的定义：用于获取用户当前位置信息。

2.配置选项：包括positionOptions（定位位置信息）、trackUserLocation（是否跟踪用户位置）、showUserHeadings（是否显示用户方向）。

3.添加方法：使用map对象的locateControl方法添加定位控件。

4.浏览器地理位置API：通过navigator.geolocation API获取位置信息。

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