Question

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

 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 - 如何为复杂的弹出窗口设置常用样式

2 个答案: