JavaScript
GIS
geojson
mapbox

Mapbox GL JS で進行方向の矢印付き linestring

More than 1 year has passed since last update.

こんにちは。
Mapbox GL JS で linestring を描画し進行方向を示す矢印(三角形)を付けてみました。
無理を承知で作っているので見栄えは良くないですが。

mapbox.jpg

mapboxgl_linestring_with_arrowhead.html
<!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.30.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/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 = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/bright-v9',
    center: [-122.488, 37.831],
    zoom: 15
});

map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.ScaleControl({maxWidth: 80}));

map.on('load', function () {
    map.addSource("route", {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.48369693756104, 37.83381888486939],
                    [-122.48348236083984, 37.83317489144141],
                    [-122.48339653015138, 37.83270036637107],
                    [-122.48356819152832, 37.83205636317963],
                    [-122.48404026031496, 37.83114119107971],
                    [-122.48404026031496, 37.83049717427869],
                    [-122.48348236083984, 37.82992094395505],
                    [-122.48356819152832, 37.82954808664175],
                    [-122.48507022857666, 37.82944639795659],
                    [-122.48610019683838, 37.82880236636284],
                    [-122.48695850372314, 37.82931081282506],
                    [-122.48700141906738, 37.83080223556934],
                    [-122.48751640319824, 37.83168351665737],
                    [-122.48803138732912, 37.83215804826779],
                    [-122.48888969421387, 37.83297152392784],
                    [-122.48987674713133, 37.83263257682617],
                    [-122.49043464660643, 37.83293762928776],
                    [-122.49125003814696, 37.83242920781773],
                    [-122.49163627624512, 37.83256478721899],
                    [-122.49223709106445, 37.83337825839438],
                    [-122.49378204345702, 37.83368330777276]
                ]
            }
        }
    });

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": "route",
        "paint": {
            "line-color": "#a4a",
            "line-width": 3
        }
    });

    // arrowhead
    map.addLayer({
        "id": "triangles",
        "type": "symbol",
        "source": "route",
        "layout": {
          "symbol-placement": "line",
          "icon-image": "triangle-11",
          "icon-offset": [0, -1],
          "icon-rotate": -30,
        }
    });

});
</script>
</body>
</html>