Mapbox GL如何创建自定义控件？

Question

我想使用Mapbox gl Api创建自定义控件.我正在尝试扩展Control类并添加我自己的功能.它似乎不起作用.我得到TypeError:"x"不是我控制台中的构造函数错误.即使在扩展了类之后,我在构造函数中使用了super().我做错了,有没有其他方法如何创建自定义控件？

Answer 1

这是 \xd0\x90\xd1\x80\xd1\x82\xd1\x91\xd0\xbc \xd0\x9e\xd1\x89\xd0\xb5\xd0\xbf\xd0\xba\xd0 的完整版本\xbe\xd0\xb2\'s 答案创建一个主页按钮。

\n

const homePosition = {\n  center: [144, -37],\n};\n\nfunction addHomeButton(map) {\n  class HomeButton {\n    onAdd(map) {\n      const div = document.createElement("div");\n      div.className = "mapboxgl-ctrl mapboxgl-ctrl-group";\n      div.innerHTML = `<button>\n        <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" style="font-size: 20px;"><title>Reset map</title><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>\n        </button>`;\n      div.addEventListener("contextmenu", (e) => e.preventDefault());\n      div.addEventListener("click", () => map.flyTo(homePosition));\n\n      return div;\n    }\n  }\n  const homeButton = new HomeButton();\n  map.addControl(homeButton, "bottom-right");\n}\n

\n

Answer 2

您对Mapbox的自定义控件应实现下一个接口：

• onAdd(map)—接受地图对象并应返回控制对象的函数。当您的控件添加到地图时，它将被调用。

• onRemove(map)—带有地图对象的函数，当从地图中删除控件时将调用该函数。您可以使用此方法取消绑定事件侦听器。

这是一个CodePen 示例。只需使用您的访问令牌即可。

Answer 3

类似于 Mapbox 的控件的代码是：

  onAdd(map) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
    this._container.addEventListener('contextmenu', (e) => e.preventDefault());
    this._container.addEventListener('click', (e) => this.onClick());

    this._container.innerHTML =
      '<div class="tools-box">' +
      '<button>' +
      '<span class="mapboxgl-ctrl-icon my-image-button" aria-hidden="true" title="Description"></span>' +
      '</button>' +
      '</div>';

    return this._container;
  }

cssmy-image-button是

.my-image-button {
  background: url("data:image/png;base64 etc...");
}

使用“主页”图标时，它看起来像这样：