Mapbox GL - 如何为复杂的弹出窗口设置通用样式

Question

我有一张带有许多标记的 Mapbox GL 地图。悬停时，应显示复杂的弹出窗口。我的问题是 - 我不想将这个复杂的代码复制到每个标记的描述中。理想情况下，我想在 "layout" 部分设置样式并且只调用参数。我已经将这种方法与图标标记一起使用。问题是 我不知道布局部分中影响弹出窗口文本的参数名称是什么 - 有人可以帮我解决这个问题吗？为了更好地理解，我附上了一段代码 - 可以看到布局部分的图标图像参数的用法

 map.addLayer({
                "id": "places",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {
                                "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>",
                                "icon": "yellow"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [45.702117, 42.395926]
                            }
                        }, {
                            "type": "Feature",
                            "properties": {
                                "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>",
                                "icon": "yellow"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [45.634342, 42.36961]
                            }
                        }]
                    }
                },
                "layout": {
                    "icon-image": "marker-{icon}",
                    "icon-allow-overlap": true,
                    "icon-size": 0.3,
                    "icon-offset": [0, -8],                        
                }

Answer 1

您正在寻找 text-field. Here 是 text-field 用法的示例。

Answer 2

已解决。布局中没有特殊的属性，但是可以手动生成字符串，然后将其传递给 SetHtml 函数。像这样...

map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

        if (!features.length) {
            popup.remove();
            return;
        }

        var feature = features[0];
        var popupHtml = '<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>' + feature.properties.trekname + '</em><br><br>Duration: </strong>' + feature.properties.duration + '<br><strong>Difficulty: </strong>' + feature.properties.difficulty + '<br>' + feature.properties.description + '</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"../../Images/Thumbnails/Treks/nahlad/' + feature.properties.imagepath + ' \" /></div>';
        // Populate the popup and set its coordinates
        // based on the feature found.
        popup.setLngLat(feature.geometry.coordinates)
            .setHTML(popupHtml)
            .addTo(map);            
    })

Mapbox GL - 如何为复杂的弹出窗口设置通用样式

Mapbox GL - how to setup common style for complex popups

javascript

mapbox

mapbox-gl

mapbox-marker