如何在Azure Maps中添加双向折线？添加两条折线仅显示一条的问题

你遇到的问题本质是两条折线坐标完全重叠，视觉上无法区分，所以看起来只显示了一条。以下是两种可行的解决思路：

方法1：使用独立图层设置不同样式 #

创建两个LineLayer，分别对应两条折线，通过设置不同的颜色、线宽或偏移量来区分它们：

// 初始化地图（替换为你的订阅密钥）
const map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12,
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'
    }
});

map.events.add('ready', () => {
    const dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    // 定义坐标点
    const pointA = [-122.33, 47.6];
    const pointB = [-122.34, 47.61];

    // 添加两条反向折线
    dataSource.add([
        new atlas.data.LineString([pointA, pointB]),
        new atlas.data.LineString([pointB, pointA])
    ]);

    // 正向线图层：红色，无偏移
    map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
        strokeColor: '#FF0000',
        strokeWidth: 3
    }));

    // 反向线图层：蓝色，偏移2像素
    map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
        strokeColor: '#0000FF',
        strokeWidth: 3,
        strokeOffset: 2
    }));
});

方法2：给折线添加属性，用单个图层通过表达式区分样式 #

如果不想创建多个图层，可以给每条折线添加自定义属性，然后在一个LineLayer中用样式表达式动态区分：

map.events.add('ready', () => {
    const dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    const pointA = [-122.33, 47.6];
    const pointB = [-122.34, 47.61];

    // 给每条折线添加direction属性
    dataSource.add([
        new atlas.data.Feature(new atlas.data.LineString([pointA, pointB]), { direction: 'forward' }),
        new atlas.data.Feature(new atlas.data.LineString([pointB, pointA]), { direction: 'backward' })
    ]);

    // 单个图层，根据direction属性设置样式
    map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
        strokeColor: ['match', ['get', 'direction'], 'forward', '#FF0000', 'backward', '#0000FF', '#000000'],
        strokeWidth: 3,
        strokeOffset: ['match', ['get', 'direction'], 'forward', 0, 'backward', 2, 0]
    }));
});

核心思路是让两条线在视觉上产生差异，要么通过颜色区分，要么通过偏移让它们不重叠，这样就能同时显示双向折线了。

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