将折线添加到 Leaflet 中的标记数组

Question

我对 Leaflet 和编码还很陌生，我基本上只是想看看我是否可以构建具有不同功能的随机地图。我遇到了一个问题，需要帮助。

我无法将多段线添加到数组（请参阅下面的尝试），其次，我无法使地图适合边界。

// Map settings
var map = L.map('map').setView([11.206051, 122.447886], 8);
mapLink =
  '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
  }).addTo(map);
  
// Icons -> https://github.com/pointhi/leaflet-color-markers
var myIcon = L.icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png'
});

// Icons2
var myIcon2 = L.icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png'
});

// Locations
var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

// Locations 2
var locations2 = [
  ["LOCATION_1", 9.8166, 122.0942],
  ["LOCATION_2", 9.9804, 121.9189]
];

// Add markers
for (var i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i][1], locations[i][2]], {icon: myIcon})
    .bindPopup(locations[i][0])
    .addTo(map);
}

// Add markers2
for (var i = 0; i < locations2.length; i++) {
  marker = new L.marker([locations2[i][1], locations2[i][2]], {icon: myIcon2})
    .bindPopup(locations[i][0])
    .addTo(map);
}

// Add polyline (NOT WORKING)
var polyline = L.polyline([locations[i][1], locations[i][2]], {color: 'red'}).addTo(map);

// Zoom the map to the polyline (NOT WORKING)
map.fitBounds(polyline.getBounds());

这里是 Fiddle：https://jsfiddle.net/Enounce/kcwngxe0/17/

提前致谢！

Answer 1

polyline 在循环之外，所以 i 只会取 locations2.length 的最后一个值，即 2

最好在 for 循环内部使用 let，这样您就不会最终将局部 for 循环变量暴露在 for 循环块之外

此外，如果我理解正确的话，您想在每个位置数组 locations 和 locations2

的标记之间添加一条折线

所以你需要有一个 latlngs 数组的数据格式，像这样：

var locations2 = [
  [9.8166, 122.0942],
  [9.9804, 121.9189]
];

能够创建折线

你可以通过映射两个数组并返回一个只有纬度和经度的数组来得到它。

var polyline = L.polyline(locations.map(location => [location[1], location[2]]), {
  color: 'red'
}).addTo(map);

您可以对 locations2 数组执行相同的操作

var polyline2 = L.polyline(locations2.map(location2 => [location2[1], location2[2]]), {
      color: 'red'
    }).addTo(map);

最后，为了使用两条多段线来拟合边界，您只需将这两条多段线实例放在一个 featureGroup 中，然后使用 getBounds 方法获取其边界。

const featureGroup = L.featureGroup();

featureGroup.addTo(map);

featureGroup.addLayer(polyline);
featureGroup.addLayer(polyline2);

map.fitBounds(featureGroup.getBounds());

// Map settings
var map = L.map('map').setView([11.206051, 122.447886], 8);
mapLink =
  '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
  }).addTo(map);

// Icons -> https://github.com/pointhi/leaflet-color-markers
var myIcon = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png'
});

// Icons2
var myIcon2 = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png'
});

// Locations
var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

// Locations 2
var locations2 = [
  ["LOCATION_1", 9.8166, 122.0942],
  ["LOCATION_2", 9.9804, 121.9189]
];

// Add markers
for (let i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i][1], locations[i][2]], {
      icon: myIcon
    })
    .bindPopup(locations[i][0])
    .addTo(map);

}

var polyline = L.polyline(locations.map(location => [location[1], location[2]]), {
  color: 'red'
}).addTo(map);

console.log(locations.map(location => [location[1], location[2]]))

// Add markers2
for (let i = 0; i < locations2.length; i++) {
  marker = new L.marker([locations2[i][1], locations2[i][2]], {
      icon: myIcon2
    })
    .bindPopup(locations[i][0])
    .addTo(map);
}

var polyline2 = L.polyline(locations2.map(location2 => [location2[1], location2[2]]), {
  color: 'red'
}).addTo(map);

const featureGroup = L.featureGroup();

featureGroup.addTo(map)

featureGroup.addLayer(polyline)
featureGroup.addLayer(polyline2)



map.fitBounds(featureGroup.getBounds());

#map {
  height: 700px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<div id='map'></div>

将折线添加到 Leaflet 中的标记数组

Add polyline to array of markers in Leaflet

leaflet