如何使用mapbox样式连接本地JSON数据

Question

我正在尝试设置我的地图框图层的样式，以便美国的所有州都是不同的蓝色，加拿大的所有省份都是不同的红色。 我正在尝试按照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文件超长但是Ill给出了它的片段以帮助更好地了解数据。

{“type”：“FeatureCollection”，“features”：[{“type”：“Feature”，“geometry”：{“type”：“MultiPolygon”，“coordinates”：[[[ 我不认为是一个角色的BUNCH与问题有关 [-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”： “魁北克”， “国家”： “CA”，“CENSUSAREA “：”“}}，{”type“：”Feature“，”geometry“：{”type“：”MultiPolygon“，”coordinates“：[[[ A BUNCH MORE CORDINATES]

最终结果我试图在我的regions_layer中遮蔽所有不同的状态，不同的蓝色阴影和我所有的省份都有不同的红色阴影。 我可以进入油漆属性，使整个层有一定的阴影，但不能让个别状态有一定的阴影。

上面的geoJSON是我的加拿大省份之一，但我们有一个“STATE”：IN，“NAME”“Indiana”......例如。

你能看到我做错的事吗？ 谢谢

Answer 1

您可以使用mapbox自己的图层和样式表达式。

1. 找到图层。 对于州，它是state-label 。
2. 构建样式表达式。
3. 使用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