我注意到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>
创建 "方向线 "的正常方式是使用 symbol
图层来沿线放置箭头图标。请看 图标旋转-对齐 比如说属性。