位置情報

レイヤの処理-web

レイヤの処理

スタイルにはレイヤーを使用して、データの特定のサブセットにスタイリング規則を追加する。(例えば、マップ上のあらゆる川をピンクにすれば、スタイルには該当なレイヤーを作成する)。レイヤーには、スタイルを定義しているデータへの参照および適用されるスタイリング規則の両方がある。

Web
スタイルのレイヤプロパティは、利用可能な全てのレイヤーをリストする。 レイヤーのタイプは「type」のプロパティで指定され、背景、塗りつぶし、線、シンボル、ラスター、円、塗りつぶし押し出し、ヒートマップ、陰影起伏のいずれかでなければならない。
背景タイプのレイヤ以外、他のレイヤがソースに参照する必要である。レイヤはソースから取得されたデータを使用し、任意でフィーチャを絞込み、その後、それらのフィーチャのスタイル設定方法を定義する。

備考: 方向APIに関して、詳しくは下記のドキュメントをご参考くださいhttps://docs.mapbox.com/api/navigation/#directions


1.	<!DOCTYPE html>  
2.	<html>  
3.	<head>  
4.	    <meta charset='utf-8' />  
5.	    <title>Create a heatmap layer</title>  
6.	    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />  
7.	    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>  
8.	    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />  
9.	    <style>  
10.	        body { margin:0; padding:0; }  
11.	        #map { position:absolute; top:0; bottom:0; width:100%; }  
12.	    </style>  
13.	</head>  
14.	<body>  
15.	  
16.
17.	<div id='map'></div>  
18.	  
19.	<script>  
20.	mapboxgl.accessToken = 'pk.YOUR_TOKEN';  
21.	var map = new mapboxgl.Map({  
22.	    container: 'map',  
23.	    style: 'mapbox://styles/mapbox/dark-v10',  
24.	    center: [139.766357, 35.681461],  
25.	    zoom: 2  
26.	});  
27.	  
28.	map.on('load', function() {  
29.	    // Add a geojson point source.  
30.	    // Heatmap layers also work with a vector tile source.  
31.	    map.addSource('earthquakes', {  
32.	        "type": "geojson",  
33.	        "data": "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"  
34.	    });  
35.	  
36.	    map.addLayer({  
37.	        "id": "earthquakes-heat",  
38.	        "type": "heatmap",  
39.	        "source": "earthquakes",  
40.	        "maxzoom": 9,  
41.	        "paint": {  
42.	            // Increase the heatmap weight based on frequency and property magnitude  
43.	            "heatmap-weight": [  
44.	                "interpolate",  
45.	                ["linear"],  
46.	                ["get", "mag"],  
47.	                0, 0,  
48.	                6, 1  
49.	            ],  
50.	            // Increase the heatmap color weight weight by zoom level  
51.	            // heatmap-intensity is a multiplier on top of heatmap-weight  
52.	            "heatmap-intensity": [  
53.	                "interpolate",  
54.	                ["linear"],  
55.	                ["zoom"],  
56.	                0, 1,  
57.	                9, 3  
58.	            ],  
59.	            // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).  
60.	            // Begin color ramp at 0-stop with a 0-transparancy color  
61.	            // to create a blur-like effect.  
62.	            "heatmap-color": [  
63.	                "interpolate",  
64.	                ["linear"],  
65.	                ["heatmap-density"],  
66.	                0, "rgba(33,102,172,0)",  
67.	                0.2, "rgb(103,169,207)",  
68.	                0.4, "rgb(209,229,240)",  
69.	                0.6, "rgb(253,219,199)",  
70.	                0.8, "rgb(239,138,98)",  
71.	                1, "rgb(178,24,43)"  
72.	            ],  
73.	            // Adjust the heatmap radius by zoom level  
74.	            "heatmap-radius": [  
75.	                "interpolate",  
76.	                ["linear"],  
77.	                ["zoom"],  
78.	                0, 2,  
79.	                9, 20  
80.	            ],  
81.	            // Transition from heatmap to circle layer by zoom level  
82.	            "heatmap-opacity": [  
83.	                "interpolate",  
84.	                ["linear"],  
85.	                ["zoom"],  
86.	                7, 1,  
87.	                9, 0  
88.	            ],  
89.	        }  
90.	    }, 'waterway-label');  
91.	  
92.	    map.addLayer({  
93.	        "id": "earthquakes-point",  
94.	        "type": "circle",  
95.	        "source": "earthquakes",  
96.	        "minzoom": 7,  
97.	        "paint": {  
98.	            // Size circle radius by earthquake magnitude and zoom level  
99.	            "circle-radius": [  
100.	                "interpolate",  
101.	                ["linear"],  
102.	                ["zoom"],  
103.	                7, [  
104.	                    "interpolate",  
105.	                    ["linear"],  
106.	                    ["get", "mag"],  
107.	                    1, 1,  
108.	                    6, 4  
109.	                ],  
110.	                16, [  
111.	                    "interpolate",  
112.	                    ["linear"],  
113.	                    ["get", "mag"],  
114.	                    1, 5,  
115.	                    6, 50  
116.	                ]  
117.	            ],  
118.	            // Color circle by earthquake magnitude  
119.	            "circle-color": [  
120.	                "interpolate",  
121.	                ["linear"],  
122.	                ["get", "mag"],  
123.	                1, "rgba(33,102,172,0)",  
124.	                2, "rgb(103,169,207)",  
125.	                3, "rgb(209,229,240)",  
126.	                4, "rgb(253,219,199)",  
127.	                5, "rgb(239,138,98)",  
128.	                6, "rgb(178,24,43)"  
129.	            ],  
130.	            "circle-stroke-color": "white",  
131.	            "circle-stroke-width": 1,  
132.	            // Transition from heatmap to circle layer by zoom level  
133.	            "circle-opacity": [  
134.	                "interpolate",  
135.	                ["linear"],  
136.	                ["zoom"],  
137.	                7, 0,  
138.	                8, 1  
139.	            ]  
140.	        }  
141.	    }, 'waterway-label');  
142.	});  
143.	</script>  
144.	  
145.	</body>  
146.	</html> 

Related post

  1. Mapbox Vision SDK-iOS

  2. clustermap

    [Mapboxリファレンス]大量のデータをクラスターで表現する

  3. レイヤの処理-Android

  4. レイヤの処理-iOS

  5. Mapboxの概要-Web

  6. MapBoxの概要-Android

PAGE TOP