MapBox 中的可变线偏移

Question

我有一个 MapBox 地图，我正在上面画一些线。

首先，我创建了一个 geojson 对象。我所有的功能都是 LineStrings。我的某些行可以有 left/right 属性，但它不是强制参数。所以功能看起来像这样：

const feature = {
    'type': 'Feature',
    'properties': {
        'id': LINE_ID,
        'color': LINE_COLOR,
        'left_right': "LEFT",  // can be "LEFT", "RIGHT", or ""
    },
    "geometry": {
        'type': 'LineString',
        "coordinates": [
            [LINE_POINTS[0].lng, LINE_POINTS[0].lat],
            [LINE_POINTS[1].lng, LINE_POINTS[1].lat],
        ]
    }
}

我的 geojson 准备就绪后，我将其作为源添加到地图中：

map.addSource('geojson_lines', {type: 'geojson', data: LINE_FEATURES});

现在需要从这个来源向地图添加一个图层。没问题。
但是我需要我的图层来满足这些要求：

所有线条可以有不同的颜色，由颜色设置属性
线条的宽度根据缩放级别变化
如果有 left_right 值，则线条应向该值设置的方向偏移，偏移量应根据缩放级别变化

我可以设置颜色和线宽，但无法确定偏移量：

map.addLayer({
    id: 'lines_layer', type: 'line', source: 'geojson_lines',
    layout: {},
    paint: {
        'line-color': ['get', 'color'],
        'line-width': {
            stops: [[8, 4], [18, 10]]
        },
        'line-offset': [] // need help with this
    }
});

目标是使“右”线在范围内具有正偏移值，例如缩放级别 8 到 18 为 2 到 6，而“左”线具有负偏移值。

是否可以使用某种表达式和停止或插入数组来实现此目的？

Answer 1

阅读文档并尝试在 Whosebug 上找到的一些技巧后，我能够自己解决这个问题

这里的关键是首先对值进行插值，然后使用 case 表达式确定方向。

map.addLayer({
    id: 'lines_layer', type: 'line', source: 'geojson_lines',
    layout: {},
    paint: {
        'line-color': ['get', 'color'],
        'line-width': {
            stops: [[8, 4], [18, 10]]
        },

        'line-offset': ['interpolate', ['linear'], ['zoom'],
            8
            ['case',
                ["==", ["get", "left_right"], "LEFT"],
                -2,
                ["==", ["get", "left_right"], "RIGHT"],
                2,
                0
            ],
            18,
            ['case',
                ["==", ["get", "left_right"], "LEFT"],
                -6,
                ["==", ["get", "left_right"], "RIGHT"],
                6,
                0
            ],
        ],

    }
});

MapBox 中的可变线偏移

Variable line offset in MapBox

javascript

mapbox

mapbox-gl-js