如何在Marker中实现Mapbox表达式? [英] How to implement mapbox expression inside Marker?

问题描述

如何在这样的 mapboxgl.Marker()内添加Mapbox表达式:

How can I add Mapbox expressions inside mapboxgl.Marker() like this one:

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

(我从此处复制了此表达式: https://stackoverflow.com/a/61036364/5220885 )

(I copied this expression from here: https://stackoverflow.com/a/61036364/5220885)

推荐答案

标记不支持表达式.它们是HTML元素，其行为完全不同.

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

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

You would have to fake it, along these lines:

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

1. Add a handler to the map's zoom event so you can update as the map zooms in and out.
2. Calculate a size, using regular old JavaScript.
3. Apply that size using 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?编辑者= 1001

Codepen here: https://codepen.io/stevebennett/pen/MWyXjmR?editors=1001

这篇关于如何在Marker中实现Mapbox表达式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！