如何在传单geoJSON上加上标题？

Question

我有一个 geoJSON object 像这样添加到地图中：

L.geoJSON(seine_mar).addTo(map)

创建以下内容：

我想在悬停此区域时添加文本。可以使用标记，例如：

L.marker([value.lat, value.lon], { title: "Hi there"}).addTo(map);

如何使用 geoJSON 实现同样的效果，从而在悬停时显示文本？根据docs，没有属性如title或label。

期望结果示例（担心我的绘画技巧）：

Answer 1

您可以使用L.geoJSON()的onEachFeature功能循环遍历所有图层，然后添加一个带有layer.bindTooltip("HI")的工具提示。

L.geoJSON(seine_mar,{
 onEachFeature: function(feature, layer){
   layer.bindTooltip('Hi there', {permanent: true}).openTooltip(); 
   // or over a feature property layer.bindTooltip(feature.properties.customTitle)
 }
}).addTo(map)

Answer 2

尝试使用 bindTooltip() 和 permanent 选项

https://leafletjs.com/reference-1.7.1.html#tooltip

var map = L.map('map').setView([39.74739, -105], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox/light-v9',
  tileSize: 512,
  zoomOffset: -1
}).addTo(map);

var campus = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [-105.00432014465332, 39.74732195489861],
        [-105.00715255737305, 39.74620006835170],
        [-105.00921249389647, 39.74468219277038],
        [-105.01067161560059, 39.74362625960105],
        [-105.01195907592773, 39.74290029616054],
        [-105.00989913940431, 39.74078835902781],
        [-105.00758171081543, 39.74059036160317],
        [-105.00346183776855, 39.74059036160317],
        [-105.00097274780272, 39.74059036160317],
        [-105.00062942504881, 39.74072235994946],
        [-105.00020027160645, 39.74191033368865],
        [-105.00071525573731, 39.74276830198601],
        [-105.00097274780272, 39.74369225589818],
        [-105.00097274780272, 39.74461619742136],
        [-105.00123023986816, 39.74534214278395],
        [-105.00183105468751, 39.74613407445653],
        [-105.00432014465332, 39.74732195489861]
      ]
    ]
  }
};

L.geoJSON(campus)
  .bindTooltip('Hi there', {
    permanent: true,
    direction: 'center'
  })
  .addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<div id='map'></div>

如何在传单geoJSON上加上标题？

How to put a title on a leaflet geoJSON?

javascript

leaflet