格式化 Mapbox 组件的样式

Question

我目前使用 React 作为前端，使用 ReactMapGL 作为我的地图组件，我正在尝试设置样式，以便我所有的大陆都有不同的颜色。我尝试在提供的所有不同模板中设置样式，但我只能在 http://studio.mapbox.com 中更改水和土地的颜色。是否有可能实现这一改变？

Answer 1

您必须在您的地图上覆盖大陆层，然后根据您自己的 color/continent 映射逻辑有条件地设置其样式。

大陆图层的数据（geojson）可以通过搜索获取。


  const continentLayer = {
    id: "continents",
    type: "fill",
    source: {
      type: "geojson",
      data: continents
    },
    paint: {
      "fill-color": [
        "match",
        ["get", "CONTINENT"],
        "Asia",
        "red",
        "Europe",
        "Green",
        /* default */ "yellow"
      ]
    }
  };

  <Layer {...continentLayer} />

这是一个带有工作示例的 codesandbox：https://codesandbox.io/s/color-xd1cw?file=/src/App.js（另请参阅 continent.json）

格式化 Mapbox 组件的样式

Formatting the style of Mapbox component

mapbox

mapbox-gl

mapbox-gl-js