leaflet-lasso与leaflet-curve联用时抛出TypeError异常问题

已提供可复现该问题的在线示例。

使用的依赖库版本 #

• Leaflet 1.8.0
• leaflet-lasso 2.2.8
• @elfalem/leaflet-curve 0.9.1

相关代码 #

JavaScript代码 #

// Initialize the map and assign it to a variable for later use
// there's a few ways to declare a VARIABLE in javascript.
// you might also see people declaring variables using `const` and `let`
var map = L.map("map", {
  // Set latitude and longitude of the map center (required)
  center: [38.89, -77.03],
  // Set the initial zoom level, values 0-18, where 0 is most zoomed-out (required)
  zoom: 5
});

// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 3,
    maxZoom: 8
  }
).addTo(map);

const from = [38.89, -77.03];
const to = [38.89, -100.03];
const midpoint = [35.15544830223646, -88.53];

var fromMarker = L.marker(from, {
  draggable: true,
  title: "",
  opacity: 0.75
});

var toMarker = L.marker(to, {
  draggable: true,
  title: "",
  opacity: 0.75
});

fromMarker.addTo(map);
toMarker.addTo(map);

const line = L.polyline([from, to], { color: "black", weight: 3 }).addTo(map);

//
// commenting out adding the curved line will allow the lasso
// to work without error
//
let pathData = ["M", from, "Q", midpoint, to];
let curved = L.curve(pathData, {
  fill: false,
  color: "black",
  weight: 2,
  dashArray: "4 8"
}).addTo(map);
// //
//
//

L.control.lasso().addTo(map);

map.on("mousedown", () => {
  console.log("mousedown");
});

map.on("lasso.finished", (event) => {
  console.log("lasso.finished", event.layers);
});
map.on("lasso.enabled", () => {
  console.log("lasso.enabled");
});
map.on("lasso.disabled", () => {
  console.log("lasso.disabled");
});

CSS代码 #

#map {
  height: 100vh;
}

HTML代码 #

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

问题复现步骤 #

1. 点击右上角的lasso套索控件启用套索功能
2. 在地图上绘制套索选区包围两个标记点

报错信息 #

完成上述操作后，控制台抛出如下错误：

t-spatial.esm.js:522 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at t (t-spatial.esm.js:522:15)
    at calc.ts:6:20
    at Array.filter (<anonymous>)
    at U (calc.ts:58:35)
    at e.finish (lasso-handler.ts:189:34)
    at e.onDocumentMouseUp (lasso-handler.ts:151:14)
t @ t-spatial.esm.js:522
(anonymous) @ calc.ts:6
U @ calc.ts:58
e.finish @ lasso-handler.ts:189
e.onDocumentMouseUp @ lasso-handler.ts:151


iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js:1 mouseup event was missed

问题现象 #

经测试，注释掉添加曲线图层的代码后，lasso功能可正常运行无报错。目前无法确定该bug来源于leaflet-lasso代码、leaflet-curve代码，还是自身使用方式有误，希望得到相关排查指引。

内容的提问来源于stack exchange，提问作者Eric G