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

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

来源

2017-03-16 Jozef

已解决。布局中没有特殊属性，但可以手动生成字符串，然后传递给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);    
    })

来源

2017-03-17 05:48:54 Jozef

你正在寻找text-field。 Here是text-field的使用示例。

来源

2017-03-16 20:36:36

你好，那不正是我所期待的。 “text-field”会通过标记影响文本，但我希望对悬停时显示的弹出框使用类似的内容。我知道我可以在添加标记时通过一些Html，但是它取自各个功能，并且我不知道如何为所有弹出窗口设置常用样式，这些样式只能使用标题，持续时间，难度，图像路径或描述等单独属性。 – Jozef

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

回答

相关问题