Question

我想沿着Mapbox中的线/多边形绘制标签。

我开始在开放源代码工具Maputnik中设计地图。这就是我从Maputnik中学到的，对此感到非常满意。

然后，我将样式移到了mapbox客户端，令我惊讶的是，换行符/标签中的新行消失了。方法如下：

在进一步测试中，我发现只有在将标签放在行上（placement = line）时才会发生这种情况。如果我尝试在源代码中的任何地方（甚至在JS / HTML部分中）对一些虚拟标签进行硬编码，也会发生这种情况。

如何实现沿线换行？这可能是Mapbox客户端中的错误吗？

这是JSFiddle：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmF2aXRlciIsImEiOiIwZHRiWWtJIn0.itdakaDQ3RGb3cNeEOjdfw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://gist.githubusercontent.com/srmanc/9d6e3c06591d93d9d3432ae01dfbcbe4/raw/e4383b7a8403305a5cb683e5390c1e82beb3bcb0/style.json',
    center: [-68.13734351262877, 45.137451890638886],
    zoom: 5
});
</script>

</body>
</html>

https://jsfiddle.net/srmanc/L6g07fmw/6/

这是Maputnik中的（正确）渲染： https://maputnik.github.io/editor/?style=https://gist.githubusercontent.com/srmanc/9d6e3c06591d93d9d3432ae01dfbcbe4/raw/e4383b7a8403305a5cb683e5390c1e82beb3bcb0/style.json#5.49/44.853/-67.81

如果上部链接不起作用，则可以通过转到maputnik.github.io/editor并从此处加载样式来重现此行为：

样式json（与JSFiddle中的样式相同）： https://gist.githubusercontent.com/srmanc/9d6e3c06591d93d9d3432ae01dfbcbe4/raw/e4383b7a8403305a5cb683e5390c1e82beb3bcb0/style.json

Geojson（如果需要，与Style json相同）： https://gist.githubusercontent.com/srmanc/2d48dd35780e5995daa83d7a4e00b854/raw/296de1c6f7534eaf8933bcd6858d19128a26d4d8/polygon.geojson

我不认为这是版本不匹配，我尝试了很多组合，但没有一个起作用。我怀疑这是一个样式导出问题，因为我试图在JS中对样式和geojson进行硬编码-也不起作用。

任何想法都很感激。

使用Mapbox客户端在多边形上的标签中添加新行

0 个答案: