Mapbox-GL Angular - mgl-layer 通过 .json 文件添加符号
Mapbox-GL Angular - mgl-layer add symbology via .json file
构建我的第一个 angular 应用程序,想使用 mapbox-gl 来显示我自己的数据。有了 with nested 标签,我在基于 .json 文件来符号化图层时遇到问题,其中存储了数据的不同绘制模式。
如何访问 .json 文件并将其包含在 mgl 层中?
<mgl-map
[style]="my_style"
[zoom]="[8]"
>
<mgl-layer
id="routes"
type="line"
sourceLayer="route"
[source] = getting my own data from server
>
</mgl-layer>
</mgl-map>
.json 文件类似于此
{
"id":"route_main"
"type":"line"
"paint": ...
},
{
"id":"route_secondary"
"type":"line"
"paint": ...
},
{
"id":"route_minor"
"type":"line"
"paint": ...
}
下面的例子演示了如何动态初始化图层(例子改编自官方Mapbox GL JS Docs)
假设层的数据存储在 JSON 文件中并以下列格式表示:
[
{
"id": "museums",
"type": "circle",
"source": {
"type": "vector",
"url": "mapbox://mapbox.2opop9hr"
},
"layout": {
"visibility": "visible"
},
"paint": {
"circle-radius": 8,
"circle-color": "rgba(55,148,179,1)"
},
"sourceLayer": "museum-cusco"
},
//..
]
<mgl-map
[style]="'mapbox://styles/mapbox/streets-v9'"
[zoom]="zoom"
[center]="center"
>
<mgl-layer *ngFor="let layer of layersData;"
[id]="layer.id"
[type]="layer.type"
[source]="layer.source"
[sourceLayer]="layer.sourceLayer"
[paint]="layer.paint"
[layout]="layer.layout"
></mgl-layer>
</mgl-map>
export class AppComponent {
center = [-71.97722138410576, -13.517379300798098];
zoom = 15;
layersData: null;
constructor(private http: HttpClient) {
this.loadLayers().subscribe(data => {
this.layersData = data;
});
}
public loadLayers(): Observable<any> {
return this.http.get("./assets/LayersData.json");
}
}
构建我的第一个 angular 应用程序,想使用 mapbox-gl 来显示我自己的数据。有了 with nested 标签,我在基于 .json 文件来符号化图层时遇到问题,其中存储了数据的不同绘制模式。
如何访问 .json 文件并将其包含在 mgl 层中?
<mgl-map
[style]="my_style"
[zoom]="[8]"
>
<mgl-layer
id="routes"
type="line"
sourceLayer="route"
[source] = getting my own data from server
>
</mgl-layer>
</mgl-map>
.json 文件类似于此
{
"id":"route_main"
"type":"line"
"paint": ...
},
{
"id":"route_secondary"
"type":"line"
"paint": ...
},
{
"id":"route_minor"
"type":"line"
"paint": ...
}
下面的例子演示了如何动态初始化图层(例子改编自官方Mapbox GL JS Docs)
假设层的数据存储在 JSON 文件中并以下列格式表示:
[
{
"id": "museums",
"type": "circle",
"source": {
"type": "vector",
"url": "mapbox://mapbox.2opop9hr"
},
"layout": {
"visibility": "visible"
},
"paint": {
"circle-radius": 8,
"circle-color": "rgba(55,148,179,1)"
},
"sourceLayer": "museum-cusco"
},
//..
]
<mgl-map
[style]="'mapbox://styles/mapbox/streets-v9'"
[zoom]="zoom"
[center]="center"
>
<mgl-layer *ngFor="let layer of layersData;"
[id]="layer.id"
[type]="layer.type"
[source]="layer.source"
[sourceLayer]="layer.sourceLayer"
[paint]="layer.paint"
[layout]="layer.layout"
></mgl-layer>
</mgl-map>
export class AppComponent {
center = [-71.97722138410576, -13.517379300798098];
zoom = 15;
layersData: null;
constructor(private http: HttpClient) {
this.loadLayers().subscribe(data => {
this.layersData = data;
});
}
public loadLayers(): Observable<any> {
return this.http.get("./assets/LayersData.json");
}
}