自定义控件

左上角三个按钮：复位、放大、缩小。控件只是返回一个 DOM 元素， 加上约定的类名就能沿用内置样式。

说明

控件对象只需实现两个方法：onAdd(map) 返回要插入的元素， onRemove() 清理引用。类名写 maplibregl-ctrl maplibregl-ctrl-group， 圆角、阴影、按钮分隔线都会自动生效。

function ViewControl() { this._container = null; }

ViewControl.prototype.onAdd = function (map) {
  var div = document.createElement('div');
  div.className = 'maplibregl-ctrl maplibregl-ctrl-group';

  var btn = document.createElement('button');
  btn.type = 'button';
  btn.textContent = '+';
  btn.addEventListener('click', function () { map.zoomIn(); });

  div.appendChild(btn);
  this._container = div;
  return div;
};

ViewControl.prototype.onRemove = function () {
  if (this._container) this._container.remove();
  this._container = null;
};

复位按钮用 easeTo 而不是 jumpTo， 视角变化有过渡，用户能看清从哪里回到哪里。