如何使用 mapbox 样式加入本地 JSON 数据
How to join local JSON data with mapbox style
我正在尝试设置我的 mapbox 图层的样式，以便美国的所有州都是不同深浅的蓝色，而加拿大的所有省份都是不同深浅的红色。我正在尝试按照 https://docs.mapbox.com/mapbox-gl-js/example/data-join/ 上的本教程进行操作，但我还没有让它与我的代码一起使用。你能看出我可能做错了什么吗？
我的类型和来源是geoJSON。我的第一个方法是先给各州上色，然后一旦我想通了我希望对各省做同样的事情。该示例使用矢量切片，所以这可能是我的代码现在无法正常工作的原因。我的地图显示良好（所有州和省都使用 geoJSON 用相同的颜色勾勒出轮廓和阴影）除了所有州和省显然是相同的颜色之外没有添加教程中的代码..但是一旦我尝试实现示例代码所有的样式都消失了，我只剩下一张普通的地图，没有任何轮廓。
我在尝试实现示例代码时的代码如下所示
mapboxgl.accessToken = 'pk.eyJ1IjoicmNvY29ubm9yIiwiYSI6ImNrMDVjZWhyZTA5aDQzaG4wc29ra2F3eHYifQ.icA8-NotLlzhryFxFLvVtQ';
//src="jquery-3.4.1.min.js"
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-99.9, 41.5],
zoom: 1
});
// Join local JSON data with vector tile geometry
// USA unemployment rate in 2009
// Source https://data.bls.gov/timeseries/LNS14000000
var maxValue = 13;
var data = [
{ "STATE" : "ME", "unemployment": 13.17 },
{ "STATE" :"MA", "unemployment": 9.5 },
{ "STATE" :"MI", "unemployment": 12.15 },
{ "STATE" :"MT", "unemployment": 8.99 },
{ "STATE" :"NV", "unemployment": 11.83 },
{ "STATE" :"NJ", "unemployment": 7.52 },
{ "STATE" :"NY", "unemployment": 6.44 },
{ "STATE" :"NC", "unemployment": 5.17 },
{ "STATE" :"OH", "unemployment": 9.67 },
{ "STATE" :"PN", "unemployment": 10.64 },
{ "STATE" :"RI", "unemployment": 12.38 },
{ "STATE" :"TN", "unemployment": 10.13 },
{ "STATE" :"TX", "unemployment": 9.58 },
{ "STATE" :"UT", "unemployment": 10.63 },
{ "STATE" :"WA", "unemployment": 8.09 },
{ "STATE" :"WI", "unemployment": 5.93 },
{ "STATE" :"PR", "unemployment": 9.86 },
{ "STATE" :"MD", "unemployment": 9.81 },
{ "STATE" :"AL", "unemployment": 7.82 },
{ "STATE" :"AK", "unemployment": 8.35 },
{ "STATE" :"AZ", "unemployment": 9.1 },
{ "STATE" :"AR", "unemployment": 10.69 },
{ "STATE" :"CA", "unemployment": 11.53 },
{ "STATE" :"CO", "unemployment": 9.29 },
{ "STATE" :"CT", "unemployment": 9.94 },
{ "STATE" :"DE", "unemployment": 9.29 },
{ "STATE" :"DC", "unemployment": 5.45 },
{ "STATE" :"FL", "unemployment": 4.21 },
{ "STATE" :"GA", "unemployment": 4.27 },
{ "STATE" :"HI", "unemployment": 4.09 },
{ "STATE" :"ID", "unemployment": 7.83 },
{ "STATE" :"IL", "unemployment": 8.01 },
{ "STATE" :"IN", "unemployment": 9.34 },
{ "STATE" :"IA", "unemployment": 11.23 },
{ "STATE" :"KS", "unemployment": 7.08 },
{ "STATE" :"KY", "unemployment": 11.22 },
{ "STATE" :"LA", "unemployment": 6.2 },
{ "STATE" :"MN", "unemployment": 9.11 },
{ "STATE" :"MS", "unemployment": 10.42 },
{ "STATE" :"MO", "unemployment": 8.89 },
{ "STATE" :"NE", "unemployment": 11.03 },
{ "STATE" :"NH", "unemployment": 7.35 },
{ "STATE" :"NM", "unemployment": 8.92 },
{ "STATE" :"ND", "unemployment": 7.65 },
{ "STATE" :"OK", "unemployment": 8.01 },
{ "STATE" :"OR", "unemployment": 7.62 },
{ "STATE" :"SC", "unemployment": 7.77 },
{ "STATE" :"SD", "unemployment": 8.49 },
{ "STATE" :"VT", "unemployment": 9.42 },
{ "STATE" :"WV", "unemployment": 8.01 },
{ "STATE" :"WY", "unemployment": 9.34 },
{ "STATE" :"VA", "unemployment": 7.59 }
];
map.on('load', function() {
// Add source for state polygons hosted on Mapbox, based on US Census Data:
// https://www.census.gov/geo/maps-data/data/cbf/cbf_state.html
map.addSource("regions", {
type: "geojson",
data: {**super long geojson**}
var expression = ["match", ["get", "STATE"]];
// Calculate color for each state based on the unemployment rate
data.forEach(function (row) {
var green = (row["unemployment"] / maxValue) * 255;
var color = "rgba(" + 0 + ", " + green + ", " + 0 + ", 1)";
expression.push(row["STATE"], color);
});
// Last value is the default, used where there is no data
expression.push("rgba(0,0,0,0)");
map.addLayer({
"id": "regions_layer",
"type": "fill",
"source": "regions",
"paint": {
"fill-color": expression,
'fill-outline-color': 'black',
"fill-opacity": 0.2
},
"filter": ["==", "$type", "Polygon"]
}, 'waterway-lable');
});
我的 html 中的标签看起来像这样..注释掉的是我在尝试更改颜色之前使用的标签
<!--<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.js'></script>-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.css' rel='stylesheet' />-->
我的 geojson 文件超长，但我会给出它的一个片段以帮助更好地了解数据。
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type" :"MultiPolygon","coordinates":[[[一堆我认为与问题无关的坐标[-57.10424,51.41267]]]]},"properties":{"name":"Quebec","cartodb_id":1,"created_at":"2014-10-16T13:22:00Z","updated_at":" 2014-10-16T13:22:00Z","GEO_ID":"0400000CA01","STATE":"QC","NAME":"Quebec","COUNTRY" :"CA","CENSUSAREA":""}},{"type":"Feature","geometry":{"type":"MultiPolygon", "coordinates":[[[更多坐标
最终结果我试图在 regions_layer 中为所有不同的州添加不同的蓝色阴影，并为我所有的省份添加不同的红色阴影。我可以进入绘画属性并使整个图层具有特定的阴影，但无法让各个状态具有特定的阴影。
上面的 geoJSON 是我的加拿大省份之一，但我们有一个 "STATE": IN, "NAME" "Indiana".. 例如。
你能看出我做错了什么吗？？谢谢
您可以使用 mapbox 自带的图层和样式表达式。
- 找到图层。对于州，它是
state-label.
- 构建样式表达式。
- 使用
map.setPaintProperty() 更新绘画属性。在这里，我们将更新 text-color，因为我们正在尝试设置文本图层的样式。
// Get default property value
const defaultProp = map.getPaintProperty("state-label", "text-color");
// Simplified input
const states = [
{ state: "Montana", color: "red" },
{ state: "Iowa", color: "green" },
{ state: "Utah", color: "blue" }
];
// Build a switch-case style expression
const exprs = ["case"];
states.forEach(state => {
exprs.push(["==", ["get", "name"], state.state]);
exprs.push(state.color);
})
exprs.push(defaultProp);
// Update paint properties
map.setPaintProperty("state-label", "text-color", exprs);
这是一个可用的代码笔：https://codepen.io/manishraj/full/rNBdbwg
有关表达式的更多信息：https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions
我正在尝试设置我的 mapbox 图层的样式，以便美国的所有州都是不同深浅的蓝色，而加拿大的所有省份都是不同深浅的红色。我正在尝试按照 https://docs.mapbox.com/mapbox-gl-js/example/data-join/ 上的本教程进行操作，但我还没有让它与我的代码一起使用。你能看出我可能做错了什么吗？
我的类型和来源是geoJSON。我的第一个方法是先给各州上色，然后一旦我想通了我希望对各省做同样的事情。该示例使用矢量切片，所以这可能是我的代码现在无法正常工作的原因。我的地图显示良好（所有州和省都使用 geoJSON 用相同的颜色勾勒出轮廓和阴影）除了所有州和省显然是相同的颜色之外没有添加教程中的代码..但是一旦我尝试实现示例代码所有的样式都消失了，我只剩下一张普通的地图，没有任何轮廓。
我在尝试实现示例代码时的代码如下所示
mapboxgl.accessToken = 'pk.eyJ1IjoicmNvY29ubm9yIiwiYSI6ImNrMDVjZWhyZTA5aDQzaG4wc29ra2F3eHYifQ.icA8-NotLlzhryFxFLvVtQ';
//src="jquery-3.4.1.min.js"
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-99.9, 41.5],
zoom: 1
});
// Join local JSON data with vector tile geometry
// USA unemployment rate in 2009
// Source https://data.bls.gov/timeseries/LNS14000000
var maxValue = 13;
var data = [
{ "STATE" : "ME", "unemployment": 13.17 },
{ "STATE" :"MA", "unemployment": 9.5 },
{ "STATE" :"MI", "unemployment": 12.15 },
{ "STATE" :"MT", "unemployment": 8.99 },
{ "STATE" :"NV", "unemployment": 11.83 },
{ "STATE" :"NJ", "unemployment": 7.52 },
{ "STATE" :"NY", "unemployment": 6.44 },
{ "STATE" :"NC", "unemployment": 5.17 },
{ "STATE" :"OH", "unemployment": 9.67 },
{ "STATE" :"PN", "unemployment": 10.64 },
{ "STATE" :"RI", "unemployment": 12.38 },
{ "STATE" :"TN", "unemployment": 10.13 },
{ "STATE" :"TX", "unemployment": 9.58 },
{ "STATE" :"UT", "unemployment": 10.63 },
{ "STATE" :"WA", "unemployment": 8.09 },
{ "STATE" :"WI", "unemployment": 5.93 },
{ "STATE" :"PR", "unemployment": 9.86 },
{ "STATE" :"MD", "unemployment": 9.81 },
{ "STATE" :"AL", "unemployment": 7.82 },
{ "STATE" :"AK", "unemployment": 8.35 },
{ "STATE" :"AZ", "unemployment": 9.1 },
{ "STATE" :"AR", "unemployment": 10.69 },
{ "STATE" :"CA", "unemployment": 11.53 },
{ "STATE" :"CO", "unemployment": 9.29 },
{ "STATE" :"CT", "unemployment": 9.94 },
{ "STATE" :"DE", "unemployment": 9.29 },
{ "STATE" :"DC", "unemployment": 5.45 },
{ "STATE" :"FL", "unemployment": 4.21 },
{ "STATE" :"GA", "unemployment": 4.27 },
{ "STATE" :"HI", "unemployment": 4.09 },
{ "STATE" :"ID", "unemployment": 7.83 },
{ "STATE" :"IL", "unemployment": 8.01 },
{ "STATE" :"IN", "unemployment": 9.34 },
{ "STATE" :"IA", "unemployment": 11.23 },
{ "STATE" :"KS", "unemployment": 7.08 },
{ "STATE" :"KY", "unemployment": 11.22 },
{ "STATE" :"LA", "unemployment": 6.2 },
{ "STATE" :"MN", "unemployment": 9.11 },
{ "STATE" :"MS", "unemployment": 10.42 },
{ "STATE" :"MO", "unemployment": 8.89 },
{ "STATE" :"NE", "unemployment": 11.03 },
{ "STATE" :"NH", "unemployment": 7.35 },
{ "STATE" :"NM", "unemployment": 8.92 },
{ "STATE" :"ND", "unemployment": 7.65 },
{ "STATE" :"OK", "unemployment": 8.01 },
{ "STATE" :"OR", "unemployment": 7.62 },
{ "STATE" :"SC", "unemployment": 7.77 },
{ "STATE" :"SD", "unemployment": 8.49 },
{ "STATE" :"VT", "unemployment": 9.42 },
{ "STATE" :"WV", "unemployment": 8.01 },
{ "STATE" :"WY", "unemployment": 9.34 },
{ "STATE" :"VA", "unemployment": 7.59 }
];
map.on('load', function() {
// Add source for state polygons hosted on Mapbox, based on US Census Data:
// https://www.census.gov/geo/maps-data/data/cbf/cbf_state.html
map.addSource("regions", {
type: "geojson",
data: {**super long geojson**}
var expression = ["match", ["get", "STATE"]];
// Calculate color for each state based on the unemployment rate
data.forEach(function (row) {
var green = (row["unemployment"] / maxValue) * 255;
var color = "rgba(" + 0 + ", " + green + ", " + 0 + ", 1)";
expression.push(row["STATE"], color);
});
// Last value is the default, used where there is no data
expression.push("rgba(0,0,0,0)");
map.addLayer({
"id": "regions_layer",
"type": "fill",
"source": "regions",
"paint": {
"fill-color": expression,
'fill-outline-color': 'black',
"fill-opacity": 0.2
},
"filter": ["==", "$type", "Polygon"]
}, 'waterway-lable');
});
我的 html 中的标签看起来像这样..注释掉的是我在尝试更改颜色之前使用的标签
<!--<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.js'></script>-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.css' rel='stylesheet' />-->
我的 geojson 文件超长，但我会给出它的一个片段以帮助更好地了解数据。
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type" :"MultiPolygon","coordinates":[[[一堆我认为与问题无关的坐标[-57.10424,51.41267]]]]},"properties":{"name":"Quebec","cartodb_id":1,"created_at":"2014-10-16T13:22:00Z","updated_at":" 2014-10-16T13:22:00Z","GEO_ID":"0400000CA01","STATE":"QC","NAME":"Quebec","COUNTRY" :"CA","CENSUSAREA":""}},{"type":"Feature","geometry":{"type":"MultiPolygon", "coordinates":[[[更多坐标
最终结果我试图在 regions_layer 中为所有不同的州添加不同的蓝色阴影，并为我所有的省份添加不同的红色阴影。我可以进入绘画属性并使整个图层具有特定的阴影，但无法让各个状态具有特定的阴影。
上面的 geoJSON 是我的加拿大省份之一，但我们有一个 "STATE": IN, "NAME" "Indiana".. 例如。
你能看出我做错了什么吗？？谢谢
您可以使用 mapbox 自带的图层和样式表达式。
- 找到图层。对于州，它是
state-label. - 构建样式表达式。
- 使用
map.setPaintProperty()更新绘画属性。在这里，我们将更新text-color，因为我们正在尝试设置文本图层的样式。
// Get default property value
const defaultProp = map.getPaintProperty("state-label", "text-color");
// Simplified input
const states = [
{ state: "Montana", color: "red" },
{ state: "Iowa", color: "green" },
{ state: "Utah", color: "blue" }
];
// Build a switch-case style expression
const exprs = ["case"];
states.forEach(state => {
exprs.push(["==", ["get", "name"], state.state]);
exprs.push(state.color);
})
exprs.push(defaultProp);
// Update paint properties
map.setPaintProperty("state-label", "text-color", exprs);
这是一个可用的代码笔：https://codepen.io/manishraj/full/rNBdbwg
有关表达式的更多信息：https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions