Leaflet.js 来自 LatLng 点数组的折线 - remove/hide 基于距离的点连接的一部分

Question

我是 Leaflet 的新手，我需要使用 LatLng 点数组添加一条红色折线，例如

var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

悬停时变为蓝色：

polyline.on("mouseover", function (e) {
        polyline.setStyle({ color: 'blue' });
});
polyline.on("mouseout", function (e) {
        polyline.setStyle({ color: 'red' })
    });

有没有办法不连接距离大于 x 米的点？还是隐藏连接线？它还应该在悬停时将显示的多段线颜色更改为蓝色，即使某些点未连接（未连接的点保持该状态，只有颜色发生变化）。根据我的搜索，我可以使用 map.distance(firstPoint, secondPoint) 计算坐标之间的距离，但我不知道是否可以将其作为折线选项的条件添加

例如：当页面加载时，我收到一个 4 点数组：A、B、C 和 D，A->B 的距离为 2 米，B->C 为 6 米，C->D 3 米。如果我的最大距离是 5m，那么我应该只在 A->B 和 C->D 之间建立连接。当鼠标悬停在 A->B 之间的线上时，它会变为蓝色，同时也会变为 C->D。与悬停时的 C->D 连接相同。 C->D 变为蓝色，A->B 也是如此。当鼠标不在线上时变回红色

Answer 1

使用 multiOptionsPolyline 插件

方案一：Js方式

polyline.on("mouseover", function(e) {
  this.eachLayer(function (layer) {
    if (layer.options.className == 'polyline-fill') {
      layer.setStyle({ color: 'blue' });
    }
  });
});

polyline.on("mouseout", function(e) {
  this.eachLayer(function (layer) {
    if (layer.options.className == 'polyline-fill') {
      layer.setStyle({ color: 'red' });
    }
  });
});

解决方案 2：仅 CSS

*:hover>.polyline-fill {
  stroke: blue;
}

var DISTANCE = 250000;

var map = L.map('map', {
  center: [11.566742, 78.150499],
  zoom: 6
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var latlngs = [
  [10.969056, 76.979598],
  [9.921057, 78.087968],
  [11.910503, 79.819732],
  [13.095084, 80.266020]
];

var polyline = L.multiOptionsPolyline(latlngs, {
  multiOptions: {
    optionIdxFn: function(latLng, prevLatLng, index) {
      if (index == 0) return 0;
      return map.distance(latLng, prevLatLng) > DISTANCE ? 0 : 1;
    },
    options: [{
        color: 'red',
        className: 'polyline-fill'
      },
      {
        color: 'transparent',
        className: 'polyline-nofill',
        interactive: false
      }
    ]
  },
  weight: 8
}).addTo(map);

polyline.on("mouseover", function(e) {
  this.eachLayer(function (layer) {
    if (layer.options.className == 'polyline-fill') {
      layer.setStyle({ color: 'blue' });
    }
  });
});

polyline.on("mouseout", function(e) {
  this.eachLayer(function (layer) {
    if (layer.options.className == 'polyline-fill') {
      layer.setStyle({ color: 'red' });
    }
  });
});

#map {
  height: calc(100vh - 16px);
}

/* CSS ONLY SOLUTION */

/* *:hover>.polyline-fill {
  stroke: blue;
} */

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512- xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512- gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

<script src="https://cdn.jsdelivr.net/gh/hgoebl/Leaflet.MultiOptionsPolyline/Leaflet.MultiOptionsPolyline.js"></script>

<div id="map"></div>

Leaflet.js 来自 LatLng 点数组的折线 - remove/hide 基于距离的点连接的一部分

Leaflet.js Polyline from an array of LatLng points - remove/hide part of points connection based on distance

javascript

leaflet

polyline