javascript - Leaflet分隔的div元素交互

Question

我现在正在为这种互动而苦苦挣扎，并且就此问题找到正确的解决方案是一项相当困难的任务(目前)。

因此，我使用 GeoJSON 格式(使用 PHP 和 MySQL 创建)创建了包含一些基本点的 map 。我想知道，是否可以在 map 外部的单独 div 元素中显示红色点？

例子:

我的问题是？当我从右侧单击列表时是否可以自动打开 map 上相同的单击元素？ (如上图所示)？

这是我用来生成 map 和 GeoJSON 的代码，但它只在 map 面板上生成点。

var karta = L.tileLayer.wms("http://geoportal.dgu.hr/wms?", {
        layers: 'DOF', // možemo još dodati slojeve za 'TK25', 'DOF', 'HOK'
        attribution: "http://geoportal.dgu.hr/ "
});

rasvjeta_kvar_hum = new L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
  return L.marker(latlng, {
    icon: L.icon({
        iconUrl: "img/poweroutage_1.png",
        iconSize: [20, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      })
  });
},
onEachFeature: function (feature, layer) {
if (feature.properties) {
  var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Šifra trafostanice</th><td>" + feature.properties.ts_sifra + 
      "</td></tr>" + "<tr><th>Naziv trafostanice</th><td>" + feature.properties.ts_naziv + "</td></tr>" +  
      "<tr><th>Kod lampe</th><td>" + feature.properties.sifra_lampe + "</td></tr>" +
      "<tr><th>Tip/snaga lampe</th><td>" + feature.properties.tip_lampe + "</td></tr>" +
      "<tr><th>Vrsta stupa</th><td>" + feature.properties.vrsta_stupa + "</td></tr>" +
      "<tr><th>Naziv naselja</th><td>" + feature.properties.naziv_naselja + "</td></tr>" +
      "<tr><th>Adresa</th><td>" + feature.properties.adresa + "</td></tr>" 
      "</table>";
layer.bindPopup(content);}}
});

$.getJSON("php/rasvjeta_kvar.php", function (data) {
    rasvjeta_kvar_hum.addData(data);
  });


var map = L.map('map', {
    center: [46.205481, 15.666011],
    zoom: 14,
    layers: [karta, rasvjeta_kvar_hum]
  });

var baseLayers = {
    "Podloga": karta
  };

  var overlays = {
    "Rasvjetna tijela": rasvjeta_kvar_hum
  };

  L.control.layers(baseLayers, overlays,{
    collapsed: false
  }).addTo(map);

我一直在尝试解决 this 之后的问题回答，但现在没有任何运气。

一些指导或指示将不胜感激，谢谢。

更新

假设我离完成任务又近了一步(但还很远)。

使用下面的代码，我已经在右侧面板中成功创建了元素，但有一些限制。

// Create or retrieve the data
var DOF = L.tileLayer.wms(" http://geoportal.dgu.hr/wms?", {
    layers: 'DOF'
});

let people = [
    {
      name: 'FIRST POINT',
      latLng: [46.210888, 15.647540],
      id: '2342fc7'
    },
    {
      name: 'SECOND POINT',
      latLng: [46.211888, 15.647540],
      id: 'djf3892'
    },
    {
      name: 'THIRD POINT',
      latLng: [46.2120888, 15.647540],
      id: '2837hf3'
    }
];

// Create the group
let group = L.layerGroup(),
    list = document.getElementById('list')

// Create the map
var map = L.map('map',{
        center:[46.15796, 15.75336],
        zoom:13,
        layers: DOF
        });


// Loop through the data
people.forEach(person => {
  let marker = L.marker(person.latLng, {
    icon: L.icon({
        iconUrl: "img/power_green.png",
        iconSize: [20, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
        title: person.name,
        riseOnHover: true
      });

  // Add each marker to the group
  group.addLayer( marker );

  // Save the ID of the marker with it's data
  person.marker_id = group.getLayerId(marker);
})

// Add the group to the map
group.addTo(map);

// Click handler for handling
function onClick(data) {
  let { marker_id } = data,
      marker = group.getLayer(marker_id);

  map.panTo( marker.getLatLng() );
}

// Append list items
people.forEach(person => {
  let item = document.createElement('ul');

  item.innerHTML = `<a href="#" class="list-group-item">${person.name}<br><b>CODE: </b>${person.id}</a>`;
  item.addEventListener('click', onClick.bind(null, person));

  list.appendChild(item);
});

我想知道是否可以使用这段代码循环遍历 php 生成的 GeoJSON

var lampe_hum_150n = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/power_red.png",
        iconSize: [20, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.sifra_lampe,
      riseOnHover: false,
      riseOffset: 100
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {

      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Šifra trafostanice</th><td>" + feature.properties.ts_sifra + 
      "</td></tr>" + "<tr><th>Naziv trafostanice</th><td>" + feature.properties.ts_naziv + "</td></tr>" +  
      "<tr><th>Kod lampe</th><td>" + feature.properties.sifra_lampe + "</td></tr>" +
      "<tr><th>Tip/snaga lampe</th><td>" + feature.properties.tip_lampe + "</td></tr>" +
      "<tr><th>Vrsta stupa</th><td>" + feature.properties.vrsta_stupa + "</td></tr>" +
      "<tr><th>Adresa</th><td>" + feature.properties.adresa + "</td></tr>" +
      "<tr"+ (feature.properties.datum === 'Nema servisa' ? ' class="danger"' : '' || feature.properties.datum != 'Nema servisa' ? ' class="success"' : '') +"><th>Zadnji servis</th><td>" + feature.properties.datum + "</td></tr>" 
      "</table>";

      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.ts_sifra +'-'+ feature.properties.sifra_lampe+'<br>TS - '+feature.properties.ts_naziv);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {icon:ikonaClick_A}));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="'
      + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/power_red.png"></td><td class="feature-name">'
      + layer.feature.properties.sifra_lampe + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      rasvjetaSloj_150n.push({
        // pretražuje nam na topbaru po lokaciji
        // ako zamijenimo lokaciju i operator
        // onda će nam pretraživati po operatoru, a ne po lokaciji
        ts: layer.feature.properties.ts_sifra + '-',
        name: layer.feature.properties.sifra_lampe,
        tip: layer.feature.properties.tip_lampe,
        address: layer.feature.properties.adresa,
        source: "Lampe",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("php/rasvjeta_150n.php", function (data) {
  lampe_hum_150n.addData(data);
  map.addLayer(rasvjeta_sloj_150n);
});

而不是这个:

let people = [
    {
      name: 'FIRST POINT',
      latLng: [46.210888, 15.647540],
      id: '2342fc7'
    },
    {
      name: 'SECOND POINT',
      latLng: [46.211888, 15.647540],
      id: 'djf3892'
    },
    {
      name: 'THIRD POINT',
      latLng: [46.2120888, 15.647540],
      id: '2837hf3'
    }
];

当我尝试使用这段代码遍历 GeoJSON 时

let people = $.getJSON("php/rasvjeta_150n.php", function (data) {
});

而不是从上面阻止，我得到这个错误信息

Uncaught TypeError: people.forEach is not a function

这是从 MySQL 生成 GeoJSON 的 PHP 代码:

更新二

在 ghybs 同事的帮助下，我设法在外部项目和 map 标记之间创建了一些交互。但是当我点击外部列表中的元素时，它只会将我放大到同一个标记上。我希望(如果可能的话)当我点击外部列表上的项目时将我放大到 map 上的同一个标记上。

图片:

如果我点击带有代码 H12 的列表，它会放大 map 上带有不同代码的 map 标记。

代码如下:

function goTo(layer) {
    map.panTo(layer.getLatLng());
    layer.openPopup();
}

$.getJSON("php/rasvjeta_kvar.php", function(data) {
    geojson = L.geoJson(data, {
        pointToLayer: function(feature, latlng) {
            return L.marker(latlng, {
                icon: L.icon({
                    iconUrl: "img/power_red.png",
                    iconSize: [20, 28],
                    iconAnchor: [12, 28],
                    popupAnchor: [0, -25]
                }),
                title: feature.properties.sifra_lampe,
                riseOnHover: false,
                riseOffset: 100
            });
        },
        onEachFeature: function(feature, layer) {
            layer.bindPopup(feature.properties.tip_lampe +
                "<br>" + feature.properties.adresa + " u m<sup>2</sup>");

            $("#list").append('<a href="#" class="list-group-item">' + layer.feature.properties.sifra_lampe + ' - ' + layer.feature.properties.ts_sifra + '</a>');

            list.addEventListener("click", function() {
                goTo(layer);
            });
        }
    });
    geojson.addTo(map);
});

Answer 1

您描述的是一个常见用例。我很确定应该有大量资源(特别是在 SO 上)提供相同的功能。

至于您报告的TypeError，请注意jQuery 的$.getJSON返回一个 jqXHR 对象，而不是一个数组。

至于实现您的功能，您已经知道可以通过 onEachFeature 为每个 GeoJSON 功能执行指令。 L.geoJSON 构造函数的选项。因此，为什么不简单地在其中构建您的列表项，而不是尝试单独解析您的 people 数组？这实际上是您的代码所做的，通过将新行附加到 #feature-list 表中。

这种方法的最大优点是您可以直接将外部项目 “click” 事件监听器链接到适当的图层/标记，因为它可作为 onEachFeature< 的参数使用 功能:

function goTo(layer) {
    map.panTo(layer.getLatLng());
    layer.openPopup();
}

L.geoJSON(null, {
    onEachFeature: function (feature, layer) {
        // Whatever you want to add to your layer.

        // Build your external item.
        // Then attach the "click" event listener.
        item.addEventListener("click", function () {
            goTo(layer);
        });
    }
});