如何在Marker中实现mapbox表达式？

Question

如何在 mapboxgl.Marker() 中添加 Mapbox 表达式，如下所示：

"icon-size": ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 0.5]

（我从这里复制了这个表达式：）

Answer 1

标记不支持表达式。它们是 HTML 个元素，并且行为完全不同。

您必须按照以下方式伪造它：

向地图的 zoom 事件添加处理程序，以便您可以在地图放大和缩小时进行更新。
计算大小，使用常规旧 JavaScript。
使用CSS应用该尺寸。

像这样：

map.on('zoom', () => {
    const scalePercent = 1 + (map.getZoom() - 8)  * 0.4;
    const svgElement = marker.getElement().children[0];
    svgElement.style.transform = `scale(${scalePercent})`;
    svgElement.style.transformOrigin = 'bottom';
});

Codepen 在这里：https://codepen.io/stevebennett/pen/MWyXjmR?editors=1001

Answer 2

正如@SteveBennett 所说：

Markers don't support expressions. They are HTML elements, and behave completely differently.

假设您使用 html 本机元素作为标记，有一些类并在样式标记中使用它们，您可以在将标记添加到地图后使用此代码：

      for (const el of yourMarkerElements) {
        let lat = ...;
        let long = ...;

        new Marker({ element: el, anchor: 'bottom-right' })
          .setLngLat(new LngLat(long, lat))
          .addTo(map);
      }

      // use following:
      const that = this;
      map.on('zoom', () => {
        const zoom = map.getZoom();
        for (const el of yourMarkerElements) {
          if (zoom <= 10) { el.classList.remove('zoom-10'); } else { el.classList.add('zoom-10'); }
          if (zoom <= 11) { el.classList.remove('zoom-11'); } else { el.classList.add('zoom-11'); }
          if (zoom <= 12) { el.classList.remove('zoom-12'); } else { el.classList.add('zoom-12'); }
          if (zoom <= 13) { el.classList.remove('zoom-13'); } else { el.classList.add('zoom-13'); }
          if (zoom <= 14) { el.classList.remove('zoom-14'); } else { el.classList.add('zoom-14'); }
          if (zoom <= 15) { el.classList.remove('zoom-15'); } else { el.classList.add('zoom-15'); }
          if (zoom <= 16) { el.classList.remove('zoom-16'); } else { el.classList.add('zoom-16'); }
        }
      });

如何在Marker中实现mapbox表达式？

How to implement mapbox expression inside Marker?

javascript

mapbox

mapbox-gl-js