Azure Maps能否在所有缩放级别保持LineString图形显示？

问题原因 #

你的LineString由两个地理距离极近的点组成（仅约10米），当缩放级别低于12时，Azure Maps的数据源默认会对几何图形执行自动简化处理：将近距离的点合并为单个点，导致线元素被简化消失；同时低缩放级别下，线的像素长度过小，也会被渲染引擎忽略。

解决方案 #

以下两种方法可以解决这个问题：

方法一：关闭数据源的几何简化功能

创建DataSource时添加simplify: false配置，禁止自动简化几何图形，确保原始LineString在所有缩放级别下都被保留并渲染。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Animate a snakeline - Azure Maps Web SDK Samples</title>
    <meta charset="utf-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="author" content="Microsoft Azure Maps" />
    <meta name="version" content="1.0" />
    <meta name="screenshot" content="screenshot.gif" />
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
    <script>
        var map, line;
        var path = [
            [7.4204901, 43.7369253],
            [7.420396249439936, 43.73687484884258]
        ];
        function GetMap() {
            map = new atlas.Map('myMap', {
                center: [7.42, 43.73],
                zoom: 14,
                view: 'Auto',
                authOptions: {
                    authType: '',
                    subscriptionKey: ''
                }
            });
            map.events.add('ready', function () {
                line = new atlas.Shape(new atlas.data.LineString(path));
                // 关闭几何简化
                datasource = new atlas.source.DataSource(null, {
                    simplify: false
                });
                map.sources.add(datasource);
                datasource.add(line);
                map.layers.add(new atlas.layer.LineLayer(datasource, null, {
                    strokeColor: 'blue',
                    strokeWidth: 5,
                }));
                
                map.events.add('zoomend', () => console.log(map.getCamera().zoom));
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>

方法二：动态调整线宽适配缩放级别

使用Azure Maps的表达式功能，让线宽随缩放级别降低而增大，确保低缩放级别下线仍有足够的视觉尺寸。

修改LineLayer的strokeWidth配置如下：

map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'blue',
    strokeWidth: [
        'interpolate',
        ['linear'],
        ['zoom'],
        0, 20,  // 缩放级别0时，线宽设为20
        12, 5,  // 缩放级别12时，线宽设为5
        22, 5   // 更高缩放级别保持线宽5
    ]
}));

方案选择 #

• 方法一适合需要严格保留原始几何形状的场景，不会改变线的实际宽度。
• 方法二适合希望在不同缩放级别下保持线的视觉可见性，通过动态调整线宽适配显示效果。

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