Question

https://github.com/mysidewalk/interview/blob/master/assets/kc-neighborhoods.json

Github可以很好地显示此geojson，并且单击时会弹出带有geojson属性的弹出窗口。

这是我的例子。 http://www.datafix.io/data-source/2/geojson-example/ 我只能看到多边形，而不能看到弹出窗口。 github是如何做到的？我对此很陌生。

我的代码：

function loadMap(){
    map = L.map('visualizations');
    osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});       
    map.addLayer(osm);

    $.getJSON(GData.csvURL, function(data){
        var feature = L.geoJson(data).addTo(map);
        map.fitBounds(feature.getBounds());
    });
}

loadMap()

Answer 1

您需要遵循逐步指南here，并在table内部构造p而不是popup。然后，您可以通过检查提供的示例中的每个元素来检查控制台，并获取确切的CSS。

onEachFeature提供了获取json元数据所需的所有信息。

const onEachFeature = (feature, layer) => {
  // eslint-disable-line no-use-before-define
  const popupContent = `
  <table>
  <tr>
    <th>id:</th>
    <td>${feature.properties.id}</td>
  </tr>
  <tr>
    <th>shid:</th>
    <td>${feature.properties.shid}</td>
  </tr>
  <tr>
    <th>area:</th>
    <td>${feature.properties.area}</td>
  </tr>
  <tr>
    <th>pop-commute-drive_alone:</th>
    <td>${feature.properties["pop-commute-drive_alone"]}</td>
  </tr>
  <tr>
    <th>pop-commute-drive_carpool:</th>
    <td>${feature.properties["pop-commute-drive_carpool"]}</td>
  </tr>
  <tr>
    <th>pop-commute-public_transit:</th>
    <td>${feature.properties["pop-commute-public_transit"]}</td>
  </tr>
  <tr>
    <th>pop-commute-drive_alone:</th>
    <td>${feature.properties["pop-commute-walk"]}</td>
  </tr>
</table>`;

  if (feature.properties && feature.properties.popupContent) {
    popupContent += feature.properties.popupContent;
  }

  layer.bindPopup(popupContent);
}

const feature = L.geoJSON(json, {
  onEachFeature: onEachFeature
}).addTo(map);
map.fitBounds(feature.getBounds());

您可以重构onEachFeature函数，使其更加美观。我只想让你在这里得到这个主意。

在demo中，您可以看到我为实现与示例相似的外观而应用的css

如何在传单的弹出窗口中显示geojson信息

1 个答案: