时间戳

首页 > 解决方案 > 如何在 Mapbox Studio 中创建带有方向线的样式？

mapbox - 如何在 Mapbox Studio 中创建带有方向线的样式？

问题描述

我注意到 Mapbox Studio 似乎不支持方向线，但能够通过创建自定义箭头图标并将其用作图案样式属性来解决此问题。这在 mapbox 工作室编辑器中看起来很不错

但是当我在网页中显示地图时，它看起来像这样

我认为这可能是缺少自定义图标的问题，但是进一步放大网页地图，图标似乎在那里，但没有正确显示

任何人都可以提出解决显示问题的方法或更好的方法来设置方向线的样式吗？

这是有问题的样式的链接，如果有任何其他信息可以提供帮助，请告诉我！

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

<!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>

标签： mapboxmapbox-gl-jsmapbox-glmapbox-studio

解决方案

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

推荐阅读