地图框动态添加不同图标

Question

我正在尝试从 json 属性中的路径动态加载不同的图标。

Mapbox 加载相同的图标两次。到目前为止，我已尝试以某种方式绕过 map.addimage 函数的异步功能。目标是显示 url 来自属性的不同图标。

这是代码

    specialevents.forEach(function (special) {
            var imageurl =   special.properties.specialevent.pin['0'].originalResource.publicUrl;
            console.log(imageurl)
            map.loadImage(
                imageurl,
                (error, image) => {
                        if (error) throw error;
                        var mapid = 'image'+special.properties.uid;
                        console.log(mapid);
                        map.addImage(mapid, image);
                        // Add a data source containing one point feature.
                    map.addSource('specialevents'+special.properties.uid, {
                        'type': 'geojson',
                        'data': {
                            "type": "Feature",
                            "features": specialevents
                        },
                        'cluster': true,
                        'clusterRadius': 100,
                    });
                    map.addLayer({
                        id: 'unclustered-point2'+special.properties.uid,
                        type: 'symbol',
                        source: 'specialevents'+special.properties.uid,
                        filter: ['!', ['has', 'point_count']],
                        'layout': {
                            'icon-image': 'image'+special.properties.uid, // reference the image
                            'icon-size': 0.6,
                        }
                    });
                }
            );

            map.on('mouseenter', 'unclustered-point2'+special.properties.uid, () => {
                map.getCanvas().style.cursor = 'pointer'
            })
            map.on('mouseleave', 'unclustered-point2'+special.properties.uid, () => {
                map.getCanvas().style.cursor = ''
            })
            map.on('click', 'unclustered-point2'+special.properties.uid, (e) => {
                let image = '/_assets/0ce6325557ade3b5d880bcd31df382b4/assets/PNG/404.png';
                const coordinates = e.features[0].geometry.coordinates.slice();
                const img = e.features[0].properties.mediaReferences;
                const imageobj = JSON.parse(img);

                if (imageobj.length) {
                    image = imageobj[0].originalResource.publicUrl;
                    image = image.replace(/\/+$/, '');
                }

                const eventid = e.features[0].properties.uid;
                var category = e.features[0].properties.categories;
                category = JSON.parse(category);
                categorytitle = category[0].title;
                var location = JSON.parse(e.features[0].properties.location);
                location = location.title
                const eventtitle = e.features[0].properties.title;
                const datestart = e.features[0].properties.dateStart;

                // Ensure that if the map is zoomed out such that
                // multiple copies of the feature are visible, the
                // popup appears over the copy being pointed to.
                while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                }

                new mapboxgl.Popup()
                    .setLngLat(coordinates)
                    .setHTML(
                        '<div class="i_map__marker" id="i_map__mapmarker" onclick="eventPageFunction(' + eventid + ')">' +
                        '<div class="i_map__image"><img src="' + image + '" width="180" height="180" /></div>' +
                        '<div class="i_map__popuptext">' +
                        '<div class="i_map__graytext">' + categorytitle + '</div>' +
                        '<b style="font-size: 16px; padding-top: 10px; display: block">' + eventtitle + '</b><div style="font-size: 16px; padding-top: 5px">' + datestart + '</div><div class="i_map__location">' + location + '</div>' +
                        '</div>' +
                        '</div>',
                    )
                    .addTo(map);
            });

        })

Answer 1

唯一的问题是 addSource 中的功能，它需要是一个数组。

map.addSource('specialevents'+special.properties.uid, {
                    'type': 'geojson',
                    'data': {
                        "type": "Feature",
                        "features": [special]
                    },
                    'cluster': true,
                    'clusterRadius': 100,
                });