如何在 mapboxgl.Marker()
中添加 Mapbox 表达式,如下所示:
"icon-size": ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 0.5]
(我从这里复制了这个表达式:https://stackoverflow.com/a/61036364/5220885)
最佳答案
标记不支持表达式。它们是 HTML 元素,并且行为完全不同。
您必须按照以下方式伪造它:
- 向 map 的
zoom
事件添加处理程序,以便您可以在 map 放大和缩小时进行更新。 - 使用常规的旧 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';
});
代码笔在这里:https://codepen.io/stevebennett/pen/MWyXjmR?editors=1001
关于javascript - 如何在Marker中实现mapbox表达式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63870324/