地图控件
自定义控件
控制必须实现onAdd和onRemove方法,onAdd必须返回一个dom元素,它常常是一个div元素。使用map.addControl()方法添加控件到地图。
// 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;
}
}
// Control implemented as ES5 prototypical class
function HelloWorldControl() { }
HelloWorldControl.prototype.onAdd = function(map) {
this._map = map;
this._container = document.createElement('div');
this._container.className = 'mapboxgl-ctrl';
this._container.textContent = 'Hello, world';
return this._container;
};
HelloWorldControl.prototype.onRemove = function () {
this._container.parentNode.removeChild(this._container);
this._map = undefined;
};
| 类名 | 说明 |
|---|---|
xtal.NavigationControl |
控件包含缩放按钮和一个指南针。 |
xtal.GeolocateControl |
提供了使用浏览器的地理位置API,以在地图上定位用户的按钮。 并非所有浏览器都支持地理位置,并且某些用户可能会禁用该功能。对包括Chrome在内的现代浏览器的地理位置支持要求通过HTTPS提供网站。如果地理定位支持不可用,则GeolocateControl将不可见。 |
xtal.ScaleControl |
控制显示的比例尺等控件。 |
xtal.FullscreenControl |
控制进入全屏模式地图的按钮 |