如何在Marker中實現mapbox表達式？

Question

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

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

（我從這里復制了這個表達式： https://stackoverflow.com/a/61036364/5220885 ）

Answer 1

標記不支持表達式。 它們是 HTML 元素，行為完全不同。

你將不得不偽造它，沿着這些路線：

1. 將處理程序添加到地圖的zoom事件，以便您可以在地圖放大和縮小時進行更新。
2. 使用常規的舊 JavaScript 計算大小。
3. 使用 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

正如@SteveBe.nett 所說：

標記不支持表達式。 它們是 HTML 個元素，並且表現完全不同。

假設您使用 html 本機元素作為標記，擁有一些類並在樣式標記中使用它們，您可以在將標記添加到 map 后使用此代碼：

      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'); }
        }
      });