Question

我有一个带有折线数据的传单地图。折线的样式是我想要的，但我想要的是在每条线的中心有一个标记。这可能吗？如果可能，我需要对以下内容进行哪些更改？

var pathstyling = {
  stroke: true,
  fillColor: "#b5b5b5",
  color: "#b5b5b5",
  weight: 5,
  opacity: 1,
  fillOpacity: 0.6,
  dashArray: 10,
};

const path = L.geoJSON(path_line, {
  style: pathstyling,
})
  .bindPopup(function (layer) {
    let cap_name = layer.feature.properties.name.replace(
      /(^\w{1})|(\s+\w{1})/g,
      (letter) => letter.toUpperCase()
    );
    return `<p>${cap_name}</p><a href="https://${layer.feature.properties.link}" target="_blank">View<a>`;
    /******/
  })
  .addTo(map);

Answer 1

您可以简单地使用传单核心执行此操作：

function calcMiddleLatLng(map, latlng1, latlng2) {
    // calculate the middle coordinates between two markers
    const p1 = map.project(latlng1);
    const p2 = map.project(latlng2);
    return map.unproject(p1._add(p2)._divideBy(2));
}
  
function createMiddleMarkers(line){
    var latlngs = line.getLatLngs();
  
  for(var i = 1; i < latlngs.length; i++){
    var left = latlngs[i-1];
    var right = latlngs[i];
    var newLatLng = calcMiddleLatLng(map,left,right);
    L.marker(newLatLng).addTo(map);
  }  
}

createMiddleMarkers(layer);

https://jsfiddle.net/falkedesign/g7e8w9tz/

将标记添加到传单中折线的中间

1 个答案: