与 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'
}
});