时间戳

首页 > 解决方案 > 格式化 Mapbox 组件的样式

mapbox - 格式化 Mapbox 组件的样式

问题描述

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

标签： mapboxmapbox-gl-jsmapbox-gl

解决方案

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

您可以通过搜索获得大陆图层的数据（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} />

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

推荐阅读