【Mapbox GL JS 入门】（4）Markers and controls 标记和控件

简介

可以添加到地图的用户界面元素。此部分位于地图的画布元素之外。
 

分类

AttributionControl

该控件显示地图的属性信息

名称	类型	默认值	描述
compact	boolean?		若true，则鼠标悬停时将强制显示一个简洁版的属性信息，若false，则强制显示完整属性控件。默认为一个响应属性控件，当地图宽度低于640像素的时候该控件会折叠起来
customAttribution	(string or Array string )?		额外的地图属性显示内容

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

FullscreenControl

该控件包含用于在全屏模式下切换地图的按钮

名称	类型	默认值	描述
container	HTMLElement?		全屏显示的元素，默认是地图容器元素

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

GeolocateControl

该控件提供了可以使用浏览器的地理定位API在地图上定位用户的按钮

名称	类型	默认值	描述
fitBoundsOptions	Object	{maxZoom:15}	当地图平移并缩放到用户的位置时要使用的 fitBounds
geolocation	Object	window.navigator.geolocation	提供具有相同形状的对象来自定义
positionOptions	Object	{enableHighAccuracy:false,timeout:6000}
showAccuracyCircle	Object	true
showUserHeading	Object	false
showUserLocation	Object	true
trackUserLocation	Object	false

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

IControl

添加到地图的交互式控件的接口，控件必须实现onAdd和onRemove，并且必须拥有一个元素，该元素通常是div元素。要使用MapboxGLJS的默认控件样式，请将mapboxgl-ctrl类添加到控件的节点。

// Control implemented as ES6 class
class HelloWorldControl {
    onAdd(map) {
        this._map = map;
        this._container = document.createElement('div');
        this._container.className = 'mapboxgl-ctrl';
        this._container.textContent = 'Hello, world';
        return this._container;
    }

    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = undefined;
    }
}

Marker

创建标记组件。

名称	类型	默认值	描述
anchor	string	‘center’	标记对齐方式的字符串，选项为“center”、“top”、“bottom”、“left”、“right”、“top-left”、“top-right”、“bottom-left和“bottom-right”
clickTolerance	number	0	用户在标记上单击时可以移动鼠标指针的最大像素数，以便将其视为有效的单击（与标记拖动相反）。默认值是继承地图的clickTolerance
color	string	‘#3FB1CE’	如果element没提供的话，默认标记颜色，淡蓝色
draggable	boolean	false	标记是否可以拖拽到地图的其他位置
element	HTMLElement?		标记的DOM元素，默认设置为浅蓝色的水滴形SVG标记
occludedOpacity	number	0.2	被三维地形遮挡的标记的不透明度
offset	PointLike?		PointLike对象相对于元素中心的像素偏移量，负数表示左和上
pitchAlignment	string	‘auto’	“map”将标记与地图平面对齐。“视口”将标记与视口平面对齐。“auto”自动匹配rotationAlignment的值。
rotation	number	0	标记旋转角度（以°为单位），正值代表顺时针旋转
rotationAlignment	string	‘auto’	标记旋转的对齐方式。“map”与地图平面对齐，与地图旋转时的基本方向一致。“viewport”与屏幕空间对齐。“horizon”根据最近的地平线对齐，在非地球投影上，它相当于“视口”。“auto”等同于“viewport”。
scale	number	1	如果element没提供的话，默认标记尺寸，默认：41*27px

const marker = new mapboxgl.Marker()
    .setLngLat([30.5, 50.5])
    .addTo(map); // add the marker to the map

const marker = new mapboxgl.Marker().addTo(map);
marker.remove();

// Store the marker's longitude and latitude coordinates in a variable
const lngLat = marker.getLngLat();
// Print the marker's longitude and latitude values in the console
console.log(`Longitude: ${lngLat.lng}, Latitude: ${lngLat.lat}`);

const element = marker.getElement();

const marker = new mapboxgl.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>")) // add popup
    .addTo(map);

console.log(marker.getPopup()); // return the popup instance
const marker = new mapboxgl.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>"))
    .addTo(map);

marker.togglePopup(); // toggle popup open or closed

const offset = marker.getOffset();
marker.setOffset([0, 1]);

marker.setDraggable(true);
const isMarkerDraggable = marker.isDraggable();

marker.setRotation(45);
const rotation = marker.getRotation();

marker.setRotationAlignment('viewport');
const alignment = marker.getRotationAlignment();

marker.setPitchAlignment('map');
const alignment = marker.getPitchAlignment();

marker.setOccludedOpacity(0.3);
const opacity = marker.getOccludedOpacity();

NavigationControl

该控件显示地图的属性信息

名称	类型	默认值	描述
showCompass	boolean	true	若true，则包含指南针按钮
showZoom	boolean	true	若true，则包括放大和缩小按钮
visualizePitch	boolean	false	若true，则通过旋转罗盘的X轴来显示俯仰

const nav = new mapboxgl.NavigationControl({
    visualizePitch: true
});
map.addControl(nav, 'bottom-right');

Popup

该控件显示地图的属性信息

名称	类型	默认值	描述
anchor	string?		若true，则，若false，则
className	string?		用空格分隔的CSS类名添加到弹出容器中
closeButton	boolean	true	若true，则关闭按钮将出现在弹出窗口的右上角
closeOnClick	boolean	true	若true，则单击地图时，弹出窗口将关闭
closeOnMove	boolean	false	若true，则当地图移动时，弹出窗口将关闭
focusAfterOpen	boolean	true	若true，则弹出窗口将尝试聚焦弹出窗口中的第一个可聚焦元素
maxWidth	string	‘240px’	设置弹出窗口最大宽度的CSS属性的字符串（例如，“300px”）。要确保弹出窗口的大小适合其内容，请将此属性设置为“none”
offset	(number or PointLike or Object)?		PointLike对象相对于元素中心的像素偏移量，负数表示左和上

const markerHeight = 50;
const markerRadius = 10;
const linearOffset = 25;
const popupOffsets = {
    'top': [0, 0],
    'top-left': [0, 0],
    'top-right': [0, 0],
    'bottom': [0, -markerHeight],
    'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'left': [markerRadius, (markerHeight - markerRadius) * -1],
    'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};
const popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
    .setLngLat(e.lngLat)
    .setHTML("<h1>Hello World!</h1>")
    .setMaxWidth("300px")
    .addTo(map);

ScaleControl

该控件显示地图的属性信息

名称	类型	默认值	描述
maxWidth	number	‘100’	缩放控件的最大长度（以像素为单位）
unit	string	‘metric’	距离单位：( ‘imperial’ , ‘metric’ or ‘nautical’ )

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

scale.setUnit('metric');

 

方法

addControl(control, position?)

向地图中添加一个IControl控件，调用control.onAdd(this)

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

removeControl(control)

从地图中移除控件

// Define a new navigation control.
const navigation = new mapboxgl.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Remove zoom and rotation controls from the map.
map.removeControl(navigation);

hasControl(control)

检查某个控件是否在地图上

// Define a new navigation control.
const navigation = new mapboxgl.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Check that the navigation control exists on the map.
const added = map.hasControl(navigation);
// added === true

getContainer()

返回地图的HTML元素

const container = map.getContainer();

getCanvasContainer()

返回地图canvas元素的容器

const canvasContainer = map.getCanvasContainer();

getCanvas()

返回地图的canvas元素

const canvas = map.getCanvas();