如何根据 mapbox 中的值为区域填充颜色?
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
的更多道具
希望对你有所帮助..
我正在使用 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
希望对你有所帮助..