如何在Mapbox Studio中创建带有方向性线条的样式?

问题描述 投票:1回答:1

我注意到Mapbox Studio似乎不支持方向线,但是通过创建一个自定义的箭头图标,并将其作为图案样式属性来解决这个问题。这看起来很不错 在mapbox studio编辑器中

但当我在网页中显示地图时,它看起来像 这个

我以为可能是自定义图标缺失的问题,但再放大到网页地图,似乎图标是有的,但却是 未正确显示

谁能给个建议,解决显示问题的方法或更好的方向线造型方法?

下面是一个链接 风格如果有任何其他信息我可以提供帮助,请告诉我!

编辑--这里是我用来渲染地图的代码,我注意到Mapbox Studio似乎不支持方向线,但能够通过创建一个自定义的箭头图标并使用它来解决这个问题。

<!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>
mapbox mapbox-gl-js mapbox-gl mapbox-studio
1个回答
0
投票

创建 "方向线 "的正常方式是使用 symbol 图层来沿线放置箭头图标。请看 图标旋转-对齐 比如说属性。

© www.soinside.com 2019 - 2024. All rights reserved.