Question

我countries GeoJson的几何类型为多边形。每个多边形只有一个属性名称（名称是国家/地区名称）。每个多边形代表一个国家。

现在我想根据 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>

使用Mabox-gl-js将颜色填充到多边形

1 个答案: