Question

我上传了一个svg，可以在mapbox工作室地图中查看它，并可以使用mapbox gl显示带有库存图标的tileset。但是，当我尝试使用我的图标时，点数不会被绘制。背景仍然绘制，并且在下面的代码的情况下，绘制使用cafe-15的点。

＆＃13;

'icon-image': 'cafe-15', // stock symbol shows
'icon-image': 'boxy-hourglass', // my uploaded symbol - does not show

＆＃13;

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:30px; padding:0; }
        #map { position:absolute; top:50px; bottom:50px; width:22%; height:42% }
    </style>
</head>
<body>

<div id='map'></div>
<script>

mapboxgl.accessToken = '{token}';

var map = new mapboxgl.Map({
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [-73.9517, 40.8001], 
    zoom: 17 
});

map.on('load', function () {
    map.addSource('toxsites', { 
        type: 'vector',
        url: 'mapbox://djorgensen.5cvtu32g' 
    });
    map.addLayer({
        'id': 'spills',
        'type': 'symbol',
        'source': 'toxsites',
        'source-layer': 'Toxicsites160622', 
        'filter': ['all', ['==', 'MAP_GROUP', 'SPILLS']],
        'layout': {
            'visibility': 'visible',
            'icon-allow-overlap': true,
            'icon-image': 'cafe-15', // stock symbol shows
            'icon-size': 1 
        }
    });    
    map.addLayer({
        'id': 'pbs',
        'type': 'symbol',
        'source': 'toxsites',
        'source-layer': 'Toxicsites160622', 
        'filter': ['all', ['==', 'MAP_GROUP', 'PBS']],
        'layout': {
            'visibility': 'visible',
            'icon-allow-overlap': true,
            'icon-image': 'boxy-hourglass', // my uploaded symbol - does not show
            'icon-size': 1 
        }
    });
});
</script>

</body>
</html>

＆＃13;

Answer 1

自定义图标与Mapbox Studio中的特定样式相关联，因此您必须使用上传的自定义boxy-hourglass图标保存样式，然后更新样式网址：

var map = new mapboxgl.Map({
  container: 'map', 
  style: yourNewStyleURLHere, 
  center: [-73.9517, 40.8001], 
  zoom: 17 
});

免责声明 - 我在Mapbox工作

mapbox studio中显示的图标无法通过地图集gl

1 个答案: