使用 Mapbox-gl-js 为多边形填充颜色

Question

我 countries GeoJson 有一个多边形类型的几何图形。每个多边形只有一个属性 name（name为国名）。每个多边形代表一个国家。

现在我想根据 name属性的值用不同的颜色绘制每个多边形，但这无法正常工作。

map.on('load', function () {
    map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'layout': {},
        'paint': {
            'fill-color': {
              property: 'name',
                stops: [
                    ['Albania', '#F2F12D'],
                    ['Algeria', '#7A4900'],
                    ['Australia', '#63FFAC'],
                    ["South Africa", "#4FC601"],
                    ["South Korea", "#3B5DFF"],
                ]
            },
            'fill-opacity': 0.8
        },
        'source': {
            'type': 'vector',
            'url': 'mapbox://saurabhp.countries_tileset'
        },
       "source-layer": "countries",
    });
});

Answer 1

你代码中的每一件事都是完美的，你唯一遗漏的是填充颜色里面的type: 'categorical'，你需要指定类型

查看此 link 了解更多详细信息运行下面的代码片段可查看演示

mapboxgl.accessToken = 'pk.eyJ1Ijoic2F1cmFiaHAiLCJhIjoiY2l6OWRwM2JlMDAxZTJ3b2ZwejAzdzhpdSJ9.nc4cEdRwhErEg2wuUkABbw';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-1.41, 6.32],
  zoom: 5
});

map.on('load', function () {
    map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'layout': {},
        'paint': {
            'fill-color': {
              property: 'name',
              type: 'categorical',
                stops: [
                    ['Albania', '#F2F12D'],
                    ['Algeria', '#7A4900'],
                    ['Australia', '#63FFAC'],
                    ["South Africa", "#4FC601"],
                    ["South Korea", "#3B5DFF"],
                ]
            },
            'fill-opacity': 0.8
        },
        'source': {
            'type': 'vector',
            'url': 'mapbox://saurabhp.countries_tileset'
        },
       "source-layer": "countries",
    });
});

<html>

<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>

  <div id='map'></div>

</body>

</html>

使用 Mapbox-gl-js 为多边形填充颜色

Filling color to polygons using Mabox-gl-js

javascript

geojson

mapbox

mapbox-gl-js