Как я могу разместить информацию о геойсоне во всплывающем окне в листовке? - PullRequest
Новая
       8

Как я могу разместить информацию о геойсоне во всплывающем окне в листовке?

0 голосов
/ 27 января 2019

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

Github отображает эту скважину геоджона, и при нажатии всплывающие окна отображают свойства геоджона.

Вот мой пример.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()

1 Ответ

0 голосов
/ 28 января 2019

Вам необходимо следовать пошаговой инструкции здесь и создать 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, чтобы сделать ее более элегантной.Я просто хочу, чтобы вы поняли идею здесь.

В демоверсии 1016 * вы можете увидеть css, который я применил для получения аналогичного вида на примере

...