单击时添加带有脉冲动画的标记半径

Question

我试图向mapbox-gl-js 添加标记。每个标记都需要有自己的图标。 代码：

// General params
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [28.834527783897784, 45.340983787852906],
    zoom: 16,
    pitch: 60,
    bearing: 7,
    antialias: true
});

// Language
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
map.addControl(new MapboxLanguage({
  defaultLanguage: 'ru'
}));
// On load
map.on('load', () => {

    // Insert the layer beneath any symbol layer.
    const layers = map.getStyle().layers;
    const labelLayerId = layers.find(
        (layer) => layer.type === 'symbol' && layer.layout['text-field']
    ).id;

    // Places JSON
    const geojson = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'properties': {
                    'iconSize': [40, 40],
                    'icon': 'house',
                    'url': '1',
                    'description':
                        `
                        <div class="text ff--open-sans">
                            <h5 class="mb-1 fw--700">Продажа квартиры</h5>
                            <img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
                            <p class="mb-2 mt-1">
                                Продается с мебелью и техникой,заходи и живи.
                            </p>
                            <span class="fs--14 color--dark">Характеристики</span>
                            <div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
                                <div class="d-flex mb-0">
                                    <span>Агенство</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark">Капитал</span>
                                </div>
                                <div class="d-flex mb-0">
                                    <span>Комнаты</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark"> 2 </span>
                                </div>
                                <div class="d-flex mb-0">
                                    <span>Этаж</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark"> 3 </span>
                                </div>
                                <div class="d-flex mb-0">
                                    <span>Ремонт</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark"> Евро </span>
                                </div>
                            </div>
                        </div>
                        `
                },
                'geometry': {
                    'type': 'Point',
                    'coordinates': [28.83342580788326, 45.3389572391001]
                },
            },
            {
                'type': 'Feature',
                'properties': {
                    'icon': 'flat',
                    'description':
                        `
                        <div class="text ff--open-sans">
                            <h5 class="mb-1 fw--700">Продажа квартиры</h5>
                            <img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
                            <p class="mb-2 mt-1">
                                Продается с мебелью и техникой,заходи и живи.
                            </p>
                            <span class="fs--14 color--dark">Характеристики</span>
                            <div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
                                <div class="d-flex mb-0">
                                    <span>Агенство</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark">Капитал</span>
                                </div>
                                <div class="d-flex mb-0">
                                    <span>Комнаты</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark"> 2 </span>
                                </div>
                                <div class="d-flex mb-0">
                                    <span>Этаж</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark"> 3 </span>
                                </div>
                                <div class="d-flex mb-0">
                                    <span>Ремонт</span>
                                    <span class="mx-2">—</span>
                                    <span class="color--dark"> Евро </span>
                                </div>
                            </div>
                        </div>
                        `
                },
                'geometry': {
                    'type': 'Point',
                    'coordinates': [28.820403408543825, 45.35615240244837]
                }
            },

        ]
    };

    // Add places on map
    map.addSource('places', {
        'type': 'geojson',
        'data': geojson
    });

    // Add 3D 'building' layer
    map.addLayer(
        {
            'id': 'add-3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',

                // Use an 'interpolate' expression to
                // add a smooth transition effect to
                // the buildings as the user zooms in.
                'fill-extrusion-height': [
                    'interpolate',
                    ['linear'],
                    ['zoom'],
                    15,
                    0,
                    15.05,
                    ['get', 'height']
                ],
                'fill-extrusion-base': [
                    'interpolate',
                    ['linear'],
                    ['zoom'],
                    15,
                    0,
                    15.05,
                    ['get', 'min_height']
                ],
                'fill-extrusion-opacity': 0.6
            }
        },
        labelLayerId
    );

    // Set building number labels color
    map.setPaintProperty('building-number-label', 'text-color', 'black');

    // Set building number labels size
    map.setLayoutProperty('building-number-label', 'text-size', 16);

    // Custom html for places on the map.
    for (const marker of geojson.features) {

        // Create a DOM element for each marker.
        const el = document.createElement('div');
        const ico = marker.properties.icon;

        // console.log(marker.geometry.coordinates)
        // var circle = mapboxgl.circleMarker(marker.geometry.coordinates, {radius: 100}).addTo(map);

        el.className = `map-marker marker-icon-${ico}`;
        el.style.width = `30px`;
        el.style.height = `30px`;

        // Add markers to the map.
        new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);

        // Custom html marker
        $(el).each(function(){
            $(this).html('<div class="js-show-property marker-content" data-url="'+marker.properties.url+'"><div class="pin bounce"><div class="icon"></div></div><div class="pulse"></div></div>');
        });

        // Add active marker
        el.addEventListener('click', () =>{
            $(el).toggleClass("active");
        });
    }

});

但这一切都在 CSS 上。当我缩放地图时，标记的圆圈没有真实大小。我尝试使用 Mapbox js 选项。

问题是通过单击标记内的脉冲动画和图标来添加到每个标记半径圆。

请帮忙！

Answer 1

我建议您使用图层来创建标记。下面是一个使用此原理和脉动效应的标记示例。
https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/

您可以为脉搏添加一个图层，在同一位置为图标添加另一个图层。您不必担心标记的大小。

// ...
map.addLayer({
  'id': 'layer-with-pulsing-dot',
  'type': 'symbol',
  'source': 'dot-point',
  'layout': {
    'icon-image': 'pulsing-dot',
    'icon-allow-overlap': true // important for display
  }
});        
map.addLayer({
  'id': 'myicon2',
  'type': 'symbol',
  'source': 'dot-point',
  'layout': {
    'icon-image': 'bicycle-15',
    'icon-allow-overlap': true // important for display
  }
});
//...

---

示例更新

我已经改进了示例以更精确地满足需求。我为一个非常有用的示例添加了第二点。

查看代码：https://codepen.io/cladjidane/pen/GRErYqO

---