mapbox地图展示三维图层

效果展示

1. 主要使用了图层 的 type 属性（fill-extrusion：三维填充）

/**
 * 给地图添加立体感图层
 * polygon--GeoJson 数据
 * colorList--填充的颜色
 */
export const ADD_MAP_DIMENSIONAL_LAYER = (polygon, colorList) => {
  var attrAndColor = [];

  var polyline = JSON.parse(JSON.stringify(polygon));

  for (var i = 0; i < polyline.features.length; i++) {
    attrAndColor.push(polyline.features[i].properties.adcode);

    for (let cor = 0; cor < colorList.length; cor++) {
      const el = colorList[cor];

      if (el.label == polyline.features[i].properties.name) {
        // attrAndColor.push(el.color[i % 5]);
        attrAndColor.push(el.color);
      }
    }

    polyline.features[i].geometry.type = 'MultiLineString'; //面转线
    polyline.features[i].geometry.coordinates = convertPolygonToPolyline(polyline.features[i].geometry.coordinates);
  }

  // geojson格式MultiPolygon转MultiLineString
  function convertPolygonToPolyline(MultiPolygon) {
    var MultiLineString = [];

    MultiPolygon.forEach((Polygon) => {
      Polygon.forEach((LinearRing) => {
        var LineString = LinearRing;

        MultiLineString.push(LineString);
      });
    });

    return MultiLineString;
  }

  const layers = {
    id: 'qingYangPolygonSource',
    type: 'fill-extrusion',
    source: {
      type: 'geojson',
      data: polygon,
    },
    paint: {
      'fill-extrusion-vertical-gradient': true,
      'fill-extrusion-color': ['match', ['number', ['get', 'adcode']], ...attrAndColor, '#AAAAAA'],
      'fill-extrusion-height': 10000,
      'fill-extrusion-base': 0,
      'fill-extrusion-opacity': 1,
    },
  };

  map.addLayerToGroup(layerGroupId.MAP_DIMENSIONAL, layers);
};

const colorList = ref([
  {
    start: 1,
    end: 1,
    label: '环县',
    color: '#9de8cd',
  },
  {
    start: 2,
    end: 2,
    label: '镇原县',
    color: '#2fd59a',
  },
  {
    start: 3,
    end: 3,
    label: '西峰区',
    color: '#b6eed8',
  },
  {
    start: 4,
    end: 4,
    label: '宁县',
    color: '#a0e9cd',
  },
  {
    start: 5,
    end: 5,
    label: '正宁县',
    color: '#73e0b8',
  },
  {
    start: 6,
    end: 6,
    label: '合水县',
    color: '#5ad7ac',
  },
  {
    start: 7,
    end: 7,
    label: '庆城县',
    color: '#1ebd91',
  },
  {
    start: 8,
    end: 8,
    label: '华池县',
    color: '#71e0b8',
  },
]);