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坐标中传递），那就不起作用了。这些线条不会显示在地图上。这是因为我收到错误说＃34;提供的对象不是图层＆＃34;。好的，所以我尝试使用该折线对象数组显式创建一个图层组，当错误消失时，这些线仍然没有添加到地图中。

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

日Thnx，
克里斯托弗

Answer 1

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

我是dumm。

日Thnx，
克里斯托弗

使用折线对象数组作为图层

1 个答案: