Question

我注意到Mapbox Studio似乎不支持定向线，但是可以通过创建自定义箭头图标并将其用作模式样式属性来解决此问题。看起来挺不错的in the mapbox studio editor

但是当我在网页上显示地图时，它看起来像this

我认为缺少自定义图标可能是一个问题，但是进一步放大到网页地图中，似乎该图标在那里了，但是not being displayed correctly

有人能建议解决显示问题的方法，还是一种更好的方式设计方向线样式？

这里是style in question的链接，请告知我是否还有其他信息可以帮助您！

编辑-这是我用来渲染地图的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Grand Junction Wastewater</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/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.eyJ1IjoiZXZhbmNvdW5paGFuIiwiYSI6ImNrYWU0d3VibDJkZXAycnBtZ244aWJvMjgifQ.Bjwv1VKYDddx3EYkts773g';

        var map = new mapboxgl.Map({
            container: 'map',
            maxZoom: 21.99,
            minZoom: 4,
            zoom: 12,
            center: [-108.552518, 39.091731],
            //style: 'mapbox://styles/evancounihan/ckae50mmr01pa1inkguat2jfn'
            style: 'mapbox://styles/evancounihan/ckae50mmr01pa1inkguat2jfn/draft'
        });
    </script>
</body>
</html>

Answer 1

创建“方向线”的通常方法是使用symbol层沿着该线放置箭头图标。例如，请参见icon-rotation-alignment属性。

如何在Mapbox Studio中使用定向线创建样式？

1 个答案: