メインコンテンツまでスキップ

Add an elevated line to a map

追加の開発者リソース
Feature available in Mapbox GL JS v3.8. or higher

To use this feature your application must use Mapbox GL JS v3.8 or any later releases.

Experimental Feature

Note that this is an experimental feature which is under development and is subject to change.

This example uses line-z-offset property to create an elevated line.

The line-z-offset property uses at expression to sample a value from the elevation array of a GeoJSON source via linear interpolation.

The line-elevation-reference property defines sea level as the reference point for the layer’s elevation values.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add an elevated line to a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = (window.map = new mapboxgl.Map({
        container: 'map',
        center: [6.7782, 45.8418],
        zoom: 11,
        pitch: 62,
        bearing: -150,
        style: 'mapbox://styles/mapbox/standard',
        minZoom: 9,
        maxZoom: 15
    }));

    map.on('style.load', () => {
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
        });
        // add the DEM source as a terrain layer
        map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.0 });

        map.addSource('geojson', {
            'type': 'geojson',
            'lineMetrics': true,
            'data': {
                'type': 'Feature',
                'properties': {
                    // add an array of elevation values.
                    // the number of values doesn't need to match the number of coordinates.
                    'elevation': [
                        4600, 4600, 4600, 4599, 4598, 4596, 4593, 4590, 4584,
                        4578, 4569, 4559, 4547, 4533, 4516, 4497, 4475, 4450,
                        4422, 4390, 4355, 4316, 4275, 4227, 4177, 4124, 4068,
                        4009, 3946, 3880, 3776, 3693, 3599, 3502, 3398, 3290,
                        3171, 3052, 2922, 2786, 2642, 2490, 2332, 2170, 1994,
                        1810, 1612, 1432, 1216, 1000
                    ]
                },
                'geometry': {
                    'coordinates': [
                        [6.862885, 45.833563],
                        [6.863605, 45.846851],
                        [6.859783, 45.862445],
                        [6.848727, 45.876361],
                        [6.827155, 45.892361],
                        [6.802194, 45.905032],
                        [6.780023, 45.909602],
                        [6.753605, 45.906074],
                        [6.728807, 45.89912],
                        [6.700449, 45.883872],
                        [6.683772, 45.863866],
                        [6.684058, 45.841619],
                        [6.691115, 45.825417],
                        [6.704446, 45.813349],
                        [6.720959, 45.807886],
                        [6.748477, 45.809517],
                        [6.775554, 45.817254],
                        [6.791236, 45.828871],
                        [6.801289, 45.838797],
                        [6.806307, 45.849788],
                        [6.803161, 45.866159],
                        [6.794599, 45.880461],
                        [6.769846, 45.890231],
                        [6.744712, 45.889576],
                        [6.722788, 45.881677],
                        [6.708097, 45.868556],
                        [6.699435, 45.851973],
                        [6.707324, 45.83298],
                        [6.723743, 45.822384],
                        [6.739347, 45.818626],
                        [6.756019, 45.822069],
                        [6.773963, 45.832436],
                        [6.78592, 45.848229],
                        [6.786155, 45.860521],
                        [6.77443, 45.870586],
                        [6.749012, 45.87567],
                        [6.731251, 45.868501],
                        [6.716033, 45.853689],
                        [6.714748, 45.84697],
                        [6.714635, 45.838934],
                        [6.71785, 45.832829],
                        [6.72401, 45.828151],
                        [6.730551, 45.827333],
                        [6.733951, 45.8299],
                        [6.735957, 45.834154],
                        [6.735286, 45.839871],
                        [6.734471, 45.843933],
                        [6.730893, 45.847233],
                        [6.72855, 45.847899],
                        [6.72659, 45.847822],
                        [6.724876, 45.846455],
                        [6.725096, 45.8439],
                        [6.726635, 45.841201],
                        [6.728074, 45.837041],
                        [6.727822, 45.834292]
                    ],
                    'type': 'LineString'
                }
            }
        });

        // add the elevated line layer
        map.addLayer({
            'id': 'elevated-line',
            'type': 'line',
            'source': 'geojson',
            'layout': {
                'line-z-offset': [
                    'at',
                    [
                        '*',
                        ['line-progress'],
                        ['-', ['length', ['get', 'elevation']], 1]
                    ],
                    ['get', 'elevation']
                ],
                'line-elevation-reference': 'sea'
            },
            'paint': {
                'line-emissive-strength': 1.0,
                'line-width': 8,
                'line-color': 'royalblue'
            }
        });
    });
</script>

</body>
</html>
このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。
追加の開発者リソース
このexampleは役に立ちましたか？