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

我有一些时间来玩这个。

这是一个代码段，底部也有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

Choropleth Layer Mapbox Geojson不起作用

1 个答案: