如何在Leaflet中制作2点的曲线？

Question

可以在传单中的 2 个附近点之间绘制一条曲线，例如使用以下坐标：

point_1 = (23.634501, -102.552783)

point_2 = (17.987557, -92.929147)

谢谢。

Answer 1

正如@Wrokar 暗示的那样，这可以使用Leaflet.curve库来实现。您可以简单地使用此要点提供的代码，并将您的坐标分别替换为变量 latlng1 和 latlng2 中定义的坐标。

var latlng1 = [LATITUDE, LONGTITUDE],
    latlng2 = [LATITUDE, LONGTITUDE];

这是一个工作示例：

var latlng1 = [LATITUDE, LONGTITUDE],
    latlng2 = [LATITUDE, LONGTITUDE];

var map = L.map('mapid').setView([51.505, -10], 1);

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 = [];

var latlng1 = [23.634501, -102.552783],
  latlng2 = [17.987557, -92.929147];

var offsetX = latlng2[1] - latlng1[1],
  offsetY = latlng2[0] - latlng1[0];

var r = Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)),
  theta = Math.atan2(offsetY, offsetX);

var thetaOffset = (3.14 / 10);

var r2 = (r / 2) / (Math.cos(thetaOffset)),
  theta2 = theta + thetaOffset;

var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
  midpointY = (r2 * Math.sin(theta2)) + latlng1[0];

var midpointLatLng = [midpointY, midpointX];

latlngs.push(latlng1, midpointLatLng, latlng2);

var pathOptions = {
  color: 'red',
  weight: 3
}

var curvedPath = L.curve(
  [
    'M', latlng1,
    'Q', midpointLatLng,
    latlng2
  ], pathOptions).addTo(map);

body {
  padding: 0px;
  margin: 0px;
}

#mapid {
  height: 300px;
}