Edited at

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>