mapbox - Choropleth 图层 mapbox geojson 不起作用

Question

我是 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
    }
});

});

有人可以建议如何做吗？

Answer 1

我花了一些时间玩这个。

这是一个片段，底部还有代码笔。

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
  }
});

我的一些观察结果:

1. MultiPolygon 不是有效的过滤器选项。

2. 托管 GeoJSON 的服务器不允许跨源请求，因此您必须重新托管。

3. 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