1. ポイントレイヤーをロードする
地図アプリケーションを開発する場合、POIなどのポイントデータを読み込み、テキストやアイコンの情報を表示します。mapbox-glはシンボルレイヤー（シンボル）に相当します。以下のコードは、Mapbox GL JSのデフォルトのMarkerメソッドを使用して、地図のマーク。
// Create a default Marker and add it to the map.
const marker1 = new this.$mapboxgl.Marker()
.setLngLat([116.03238901390978, 38.913188059745586])
.addTo(map);
// Create a default Marker, colored black, rotated 45 degrees.
const marker2 = new this.$mapboxgl.Marker({
color: 'black',
rotation: 45
})
.setLngLat([116.03238901390978, 38.913188059745586])
.addTo(map);
マーカー 1 の中心座標は 116.03238901390978、38.913188059745586 です。デフォルトのマーカーの色が使用されます。
marker2 はオプションを使用して、新しい Marker オブジェクトの色と回転パラメータを定義します。
2. ラインレイヤーとエリアレイヤーをロードする
GeoJSON データ ソースを使用してマップにポリゴンを追加します。
まず、addSource を使用して、ポリゴンを含む GeoJSON データを追加します。次に、addLayer を使用して新しいレイヤーを作成し、ポリゴンの外観をスタイル設定します。ポリゴンの周囲にアウトラインを追加するには、addLayer を再度使用して、同じ GeoJSON ソースを参照する新しいライン レイヤーを作成します。
コード例:
const chinaboundary = require('../assets/chinajson.json');
console.log(chinaboundary)
const chinaboundarysource = {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: chinaboundary.features
}
}
map.addLayer({
id: 'chinaboundaryline',
type: 'line',
source: chinaboundarysource,
paint: {
'line-color': 'yellow',
'line-opacity': 0.75,
'line-width': 5
}
});
map.addLayer({
id: 'chinaboundarypolghon',
type: 'fill',
source: chinaboundarysource, // reference the data source
layout: {
},
paint: {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.5
}
});
3. 3D サーフェス レイヤー (白いモデル) を読み込みます
実現した機能：高さ情報付き表面データを読み込み、簡易建物（白モデル）効果を表示
3D サーフェス レイヤーは、mapbox-gl の塗りつぶし押し出しレイヤーに対応します。
Mapbox-gl で塗りつぶし押し出しレイヤーを読み込むプロセス: geojson ベクター データを読み込むことで、データ ソースが読み込まれた後、レイヤーを設定します。
geojson データを例として取り上げます。
//添加geojson数据源，数据中必须有高度的字符，并且是数字类型的
map.addSource('buildingdata', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
"properties": {
"height": 20000
},
'coordinates': [
[
[115.720119, 39.685438],
[116.155905, 39.724518],
[116.275488, 39.548482],
[115.548794, 39.372887],
[115.720119, 39.685438],
]
]
}
}
});
//添加三维建筑图层，id对应以上
map.addLayer({
'id': 'buildingdata',
'type': 'fill-extrusion',
'source': 'buildingdata',
'paint': {
// 设置填充颜色
'fill-extrusion-color': '#fff000',
//从属性中获得高度，这里用的是height字段
'fill-extrusion-height': ['get', 'height'],
// 透明度设置
'fill-extrusion-opacity': 0.8
}
});
効果：
