使用多段线对象数组作为图层

Question

我有一个问题，为什么我尝试将多段线添加为图层的方法不起作用。需要明确的是，我并不是要断言它应该有效，只是我很好奇为什么它在一种情况下有效，而在另一种情况下无效。考虑以下代码：

var oMbTiles = new L.tileLayer('/mbtiles/mbtiles.php?&z={z}&x={x}&y={y}', {
    tms: true,
    opacity: 0.7
  }),
  oUpIcon = new L.Icon({
    iconUrl: '/custom/css/themes/app/markers/up.png',
    iconSize: [24, 26]
  }),
  oMapTypes = {
    'Yakabox': oMbTiles
  },
  aFirstMarkers = [],
  aFirstLines = [],
  aFirstLatLng,
  oFirstLine,
  oFirstGroup,
  oLayersControl,
  oOverlayMaps,
  oMap,
  i;

aFirstLatLng = [
  [18.319026, -66.420557],
  [18.180555, -66.749961],
  [18.361945, -67.175597],
  [18.455183, -67.119887],
  [18.158345, -66.932911],
  [18.295366, -67.125135],
  [18.402253, -66.711397],
  [18.420412, -66.671979],
  [18.445147, -66.559696],
  [17.991245, -67.153993],
  [18.083361, -67.153897],
  [18.064919, -66.716683],
  [18.412600, -66.863926],
  [18.190607, -66.832041],
  [18.076713, -66.947389],
  [18.295913, -66.515588],
  [18.263085, -66.712985],
  [18.433150, -66.285875],
  [17.963613, -66.947127],
  [18.349416, -66.578079],
  [18.448452, -66.594127],
  [17.985033, -66.886536],
  [18.053539, -66.792931],
  [18.407226, -66.808999],
  [18.134695, -67.116199],
  [18.468320, -67.015781],
  [18.210330, -66.591616],
  [18.003422, -67.035810],
  [18.277102, -66.869645],
  [18.240187, -66.988776],
  [18.422908, -66.489337],
  [18.377637, -67.079574],
  [18.332568, -67.227022],
  [18.434099, -66.927384],
  [18.182055, -67.132502],
  [18.221464, -67.156039],
  [18.107800, -67.037263],
  [18.332929, -66.959689]
];

for (i = 0; i < aFirstLatLng.length; i++) {
  aFirstMarkers.push(L.marker(aFirstLatLng[i]).setIcon(oUpIcon).bindPopup('lat/lng : ' + aFirstLatLng[i].join(', ')))

  if (i === (aFirstLatLng.length - 1)) {
    aFirstLines.push(L.polyline([aFirstLatLng[i], aFirstLatLng[0]], {color: 'red', weight: 3, opacity: 0}));
  } else {
    aFirstLines.push(L.polyline([aFirstLatLng[i], aFirstLatLng[i + 1]], {color: 'red', weight: 3, opacity: 0}));
  }
}

oFirstLine = L.polyline(aFirstLatLng, {
  weight: 5,
  color: 'red'
});
oFirstLine.on('click', function () {
  console.log('Clicked First line', arguments);
});

oFirstGroup = L.layerGroup(aFirstMarkers, {});

// This works
oFirstGroup.addLayer(oFirstLine);

// These next two lines do not work

// Here I'm trying to just add an array of polyline objects as a layer
//oFirstGroup.addLayer(aFirstLines);

// Here I'm trying to add the array of polyline objects as a layer group
//oFirstGroup.addLayer(L.layerGroup(aFirstLines));

oOverlayMaps = {
  'First Group': oFirstGroup,
};
oMap = new L.map('map', {
  minZoom: 4,
  maxZoom: 10,
  zoom: 9,
  center: aFirstLatLng[7],
  layers: [oMbTiles, oFirstGroup]
});

oLayersControl = new L.Control.Layers(oMapTypes, oOverlayMaps, {
  collapsed: false
}).addTo(oMap);

所以在这里，我只是尝试遍历一些邮政编码，为每个位置创建标记，并使用折线连接标记。如果我仅使用 lat/lng 数组实例化多段线对象，那么当我将该多段线添加到标记图层组 (oFirstGroup) 时，这会起作用。但是，如果我传入一组折线对象（在开始/结束纬度/经度坐标中传递），那将不起作用。这些线不会显示在地图上。这是因为我收到一条错误消息，指出“提供的对象不是图层”。好的，所以我尝试使用该多段线对象数组显式创建一个图层组，虽然错误消失，但线条仍未添加到地图中。

所以我很好奇，这应该有效吗？或者是否正确创建多段线连接标记的唯一方法是在实例化单个多段线对象以添加到图层时将 lat/lng 坐标作为数组传递？为什么我可以传入一组标记对象（在实例化 oFirstGroup 时）并将该图层添加到地图中，但在传入多段线对象数组时却不能做同样的事情？

谢谢，
克里斯托夫

Answer 1

好吧，我并不羞于承认——我是个白痴。问题是opacity: 0。我从别处复制了代码（试图了解发生了什么）并且我没有删除它。我一做，瞧！

我真傻。

谢谢，
克里斯托夫