Leaflet L.canvasLayer.scalarField如何获取栅格指定坐标值

你不需要依赖点击事件取值，L.ScalarField实例本身就提供了直接查询任意坐标对应栅格值的方法。
你现有代码里通过L.ScalarField.fromASCIIGrid(asc)生成的s就是ScalarField实例，它自带valueAt方法，传入Leaflet的LatLng经纬度对象，就能直接返回对应位置的栅格值，和点击事件返回的e.value完全一致。

使用示例 #

d3.text("https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/Bay_Speed.asc", function (asc) {
    var s = L.ScalarField.fromASCIIGrid(asc);
    var layer = L.canvasLayer.scalarField(s).addTo(map);

    // 替换成你需要查询的目标坐标，格式为[纬度, 经度]
    const queryPoint = L.latLng(43.35, -2.17);
    const targetValue = s.valueAt(queryPoint);

    if (targetValue !== null) {
        console.log("指定坐标对应的栅格值：", targetValue);
    }

    // 原有点击取数逻辑可保留
    layer.on('click', function(e) {
        if (e.value !== null) {
            let vector = e.value;
            console.log(vector)
        }
    });
});

注意事项 #

• 传入的坐标必须是WGS84经纬度格式，和Leaflet默认坐标系保持一致，其他投影坐标需要先做坐标转换再传入
• 查询坐标超出栅格数据覆盖范围时，valueAt会返回null，业务代码里必须做空值判断
• 方法返回的是邻域插值后的数值，和点击事件取到的值精度完全一致

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