[英]how to fill color for a region based on value in mapbox?
我使用mapbox绘制基于外部邮政编码轮廓geojson
文件如下所示:
import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
@Component({
selector: 'app-mapbox',
templateUrl: './mapbox.component.html',
styleUrls: ['./mapbox.component.css']
})
export class MapboxComponent implements OnInit {
ngOnInit() {
mapboxgl.accessToken = 'api-key';
let map = new mapboxgl.Map({
container: 'map',
style: 'styles',
zoom: 5,
center: [-80.118, 25.897]
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function () {
map.addSource("route", {
"type": "geojson",
"data": "./assets/shapeGeoJson.json"
});
map.addLayer({
"id": "route",
"type": "line",
"source": "route",
"paint": {
'line-color': "gray"
}
});
});
}
}
在这里,能够加载geojson
,其中我将获得邮政编码的轮廓。
现在,我想调用一个api,在其中将获取邮政编码的density
计数,并且我需要根据density
值绘制邮政编码层。
谁能告诉我如何实现这一目标?
有什么帮助吗?
您可以使用Mapbox的addSource 。 只需在代码中添加这些行
map.addSource('zipDensity', {
type: 'geojson',
data: {
...geoJsonObj // this can be your data from API containing density prop
}
});
map.addLayer({
'id': 'zipDensity',
'source': 'zipDensity',
'type': 'fill',
'paint': {
'fill-color': {
property: 'density', // this will be your density property form you geojson
stops: [
[1000, '#CECECE'],
[100000, '#DEDEDE'],
]
},
'fill-opacity': 1
}
});
在addLayer
您可以添加停靠点,您可以在其中添加密度值和颜色代码。 您可以探索addLayer
更多道具
希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.