Соедините геомаркеры с двумя слоями данных с линиями

Question

Я создаю карту leaflet.js с двумя различными слоями данных JSON, сохраненными как js-файлы.

Первый файл данных содержит геолокации некоторых редакций и идентификационный номер редакции, второй содержит геолокации некоторых статей, а также идентификационный номер редакции.

Я хочу, чтобы построить эти места и соединить все статьи с идентификатором X с помощью линий редакций с идентификатором X.

Оба слоя данных сохраняется в качестве переменных. Я знаю, как строить геолокации, но я не могу понять, как соединить геодезические слои 2 с соответствующими геоданными слоя 1 с линиями. Какие-либо предложения?

Это то, что я сделал до сих пор:

function myFunction() { 

var map = L.map('map').setView([51.101516, 10.313446], 6); 
    // improve experience on mobile 
    if (map.tap) map.tap.disable(); 
    L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', { 
    attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ', 
    maxZoom: 16 
}).addTo(map); 
    map._layersMinZoom=5; 


for (var i in artikeldaten){ 
     data = artikeldaten[i]; 

     L.circleMarker([data.lat, data.long], { 
      radius: 4, 
      color: '#000', 
      fillColor: '#000', 
      fillOpacity: 1, 
     }).addTo(map) 

     } 

for (var i in blogdaten){ 
     data = blogdaten[i]; 

    L.circleMarker([data.lat, data.long], { 
      radius: 5, 
      color: '#000', 
      fillColor: '#000', 
      fillOpacity: 1, 
     }).addTo(map)    
     } 
} 

И вот как выглядит данные, как:

var artikeldaten = [ 
{ 
    "ID": 12, 
    "long": 6.7667818, 
    "lat": 51.2135308, 
}, 
{ ... and so on 

Answer 1

Если я понимаю проблему хорошо, вы должны поставить одну из сначала ваши списки в ассоциативном массиве.

var newsroomsById = {}; // key: ID 

for(i=0; i<newsrooms.length; i++) { 
    newsroomsById[newsrooms[i].ID] = newsrooms[i]; 
} 

Затем вы можете сделать полилинии в то время как вы перебор Ваших статей

for(i=0; i<articles.length; i++) { 
    // retrieve newsroom 
    var newsroom = newsroomsById[articles[i].ID]; 
    // draw your polyline 
    var latlngs = [ 
     [articles[i].lat, articles[i].lng], 
     [newsroom .lat, newsroom.lng] 
    ]; 
    var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map); 
}