Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

与 MapLibre 一起使用

MapLibre 是一个用于在网站上显示地图的开源 JavaScript 库。MapLibre 可以接受 Martin 生成的 MVT 矢量瓦片,并对其应用样式以使用 Web GL 绘制地图。

您可以向地图添加图层并将 Martin TileJSON 端点指定为矢量源 URL。您还应该指定 source-layer 属性。对于表源,默认情况下为 {table_name}。

map.addLayer({
    id: 'points',
    type: 'circle',
    source: {
        type: 'vector',
        url: 'http://localhost:3000/points'
    },
    'source-layer': 'points',
    paint: {
        'circle-color': 'red'
    },
});
map.addSource('rpc', {
    type: 'vector',
    url: `http://localhost:3000/function_zxy_query`
});
map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'rpc',
    'source-layer': 'function_zxy_query',
    paint: {
        'circle-color': 'blue'
    },
});

您还可以使用组合源将多个源组合为一个源。组合源中的每个源都可以使用其 {source_name} 作为 source-layer 属性进行访问。

map.addSource('points', {
    type: 'vector',
    url: `http://0.0.0.0:3000/points1,points2`
});

map.addLayer({
    id: 'red_points',
    type: 'circle',
    source: 'points',
    'source-layer': 'points1',
    paint: {
        'circle-color': 'red'
    }
});

map.addLayer({
    id: 'blue_points',
    type: 'circle',
    source: 'points',
    'source-layer': 'points2',
    paint: {
        'circle-color': 'blue'
    }
});