如何绘制缩放时线段与间隙长度恒定的虚线

哈哈，这个问题我之前帮人解决过！本质是默认的line-dasharray是按屏幕像素定义的，当地图（或SVG）缩放时，地理坐标到屏幕像素的转换比例发生变化，原本的像素长度对应的实际物理/地理距离就变了，导致虚线看起来“忽长忽短”。要实现线段和间隙长度恒定，得把dash的长度绑定到实际物理/地理距离，再根据当前缩放级别实时计算对应的屏幕像素值，动态更新样式。

下面分两种常见场景给你具体方案：

场景1：Leaflet地图里的GeoJSON虚线 #

1. 先固定你要的地理长度 #

比如你想让虚线的线段长50米，间隙长20米，先定义好：

const dashLengthMeters = 50; // 虚线线段的实际地理长度（米）
const gapLengthMeters = 20;  // 虚线间隙的实际地理长度（米）

2. 写个转换函数：把地理距离转成屏幕像素 #

利用Leaflet的地图方法，计算当前缩放级别下，1米对应的屏幕像素数，再把地理长度转成像素：

function getDashArray(map) {
    // 取地图中心的点，计算1米对应的像素长度
    const center = map.getCenter();
    const point1 = map.project(center);
    // 用微小的经度偏移来近似1米的距离（修正纬度影响）
    const point2 = map.project(L.latLng(center.lat, center.lng + 0.00001));
    const metersPerPixel = 1 / (point2.x - point1.x) * 111320 * Math.cos(center.lat * Math.PI / 180);
    // 111320是赤道上1度经度对应的米数，cos(lat)用来修正不同纬度的距离差异

    const dashPixels = dashLengthMeters / metersPerPixel;
    const gapPixels = gapLengthMeters / metersPerPixel;
    return [dashPixels, gapPixels].join(',');
}

3. 初始化图层+实时更新样式 #

初始化GeoJSON的时候调用函数设置初始虚线，再监听地图缩放事件，每次缩放后更新样式：

// 初始化你的GeoJSON图层
const geoJsonLayer = L.geoJson(yourGeoJsonData, {
    style: () => ({
        color: '#000',
        weight: 2,
        dashArray: getDashArray(map)
    })
}).addTo(map);

// 监听缩放结束事件，实时更新虚线
map.on('zoomend', () => {
    geoJsonLayer.setStyle({
        dashArray: getDashArray(map)
    });
});

场景2：纯SVG里的恒定虚线 #

如果是纯SVG（非地图场景），有个更简单的CSS属性可以直接用：vector-effect: non-scaling-stroke，它会让描边的宽度和虚线长度都不随SVG的缩放而变化：

.your-line-element {
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 10 5; /* 这里的数值是你想要的恒定长度（像素） */
    vector-effect: non-scaling-stroke;
}

不过要注意：这个属性会同时固定描边宽度，如果只需要固定虚线长度但允许描边宽度缩放，那还是得用JS监听SVG的缩放事件，动态计算stroke-dasharray的数值。

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