Choropleth 图层 mapbox geojson 不工作答案

【问题标题】：Choropleth Layer mapbox geojson not workingChoropleth 图层 mapbox geojson 不工作
【发布时间】：2019-09-11 02:02:33
【问题描述】：

我是 mapbox 的新手。我必须像下面的例子那样填充图表

https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/

我使用 geojson 文件作为源，但它不起作用。

map.on('load', function() {

map.addSource('tls_demand', {
    'type': 'geojson',
    'url': 'http://1xx.2xx.1xx.1xx/xxxx.geojson'
});
map.addLayer({
    "id": "tls_projection",
    "type": "fill",
    "source": "tls_demand",
    "filter": ["==", "$type", "MultiPolygon"],
    'paint': {
        "line-color": "red",
        'fill-opacity': 0.75
    }
});

});

有人可以建议怎么做吗？

【问题讨论】：

标签： mapbox geojson mapbox-gl

【解决方案1】：

我有时间玩这个。

这是一个sn-p，底部还有一个codepen。

map.on("load", function() {
  map.addSource("tls_demand", {
    type: "geojson",
    data: "https://gist.githubusercontent.com/androidfanatic/99de0a21907791fc2d57570df19455f6/raw/9710b3c69f0591bc6ca7730b0b6eebe2349b7571/DeoriaBoundary1.geojson"
  });
  map.addLayer({
  id: "tls_projection",
  type: "fill",
  source: "tls_demand",
  filter: ["==", "$type", "Polygon"],
  paint: {
    "fill-outline-color": "red",
    "fill-color": "red",
    "fill-opacity": 0.2
  }
});

我的一些观察结果：

MultiPolygon 不是有效的过滤器选项。
托管 GeoJSON 的服务器不允许跨源请求，因此您必须重新托管。
GeoJSON 不在 EPSG:4326 中，这是 mapboxgl-js 支持的唯一坐标系，因此您必须将 geojson 投影到 EPSG:4326。我为此使用了ogr2ogr2，命令是。

ogr2ogr DeoriaBoundary1.geojson -t_srs "EPSG:4326" DeoriaBoundary.geojson

fill 类型的图层必须提供 fill-color 绘制属性。
要将 URL 传递给源，您应该说 "data": "https://domain.tld/url-to-geojson" 而不是 url 属性。

您可以在此处查看所有这些操作：https://codepen.io/manishraj/full/jONzBEK

【讨论】：