javascript 如何在Marker中实现mapbox表达式?

vddsk6oq  于 2023-09-29  发布在  Java
关注(0)|答案(3)|浏览(83)

如何在mapboxgl.Marker()中添加Mapbox表达式,如下所示:
"icon-size": ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 0.5]
(我从这里复制了这个表达式:https://stackoverflow.com/a/61036364/5220885

byqmnocz

byqmnocz1#

标记不支持表达式。它们是HTML元素,并且行为完全不同。
你必须沿着这些路线伪造它:
1.向Map的zoom事件添加一个处理程序,以便在Map放大和缩小时进行更新。
1.使用常规的旧JavaScript计算大小。
1.使用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

n6lpvg4x

n6lpvg4x2#

正如@SteveBennett所说:
标记不支持表达式。它们是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'); }
        }
      });
ovfsdjhp

ovfsdjhp3#

如果你有一个mapboxgl.Markers的列表,你可以像这样得到HTMLElement:

for (const el of markers.current) {
    if (zoom <= 10) { el.getElement().classList.remove('zoom-10'); } else { el.getElement().classList.add('zoom-10'); }
    if (zoom <= 11) { el.getElement().classList.remove('zoom-11'); } else { el.getElement().classList.add('zoom-11'); }
    if (zoom <= 12) { el.getElement().classList.remove('zoom-12'); } else { el.getElement().classList.add('zoom-12'); }
    if (zoom <= 13) { el.getElement().classList.remove('zoom-13'); } else { el.getElement().classList.add('zoom-13'); }
    if (zoom <= 14) { el.getElement().classList.remove('zoom-14'); } else { el.getElement().classList.add('zoom-14'); }
    if (zoom <= 15) { el.getElement().classList.remove('zoom-15'); } else { el.getElement().classList.add('zoom-15'); }
    if (zoom <= 16) { el.getElement().classList.remove('zoom-16'); } else { el.getElement().classList.add('zoom-16'); }
  }
});

由于el变量中没有html元素,因此必须使用getElemet()来获取相应的元素

相关问题