概述

很多时候我们会遇到3D行政区划的展示，在mapboxGL中，面状的3D展示比较容易，我们可以通过fill-extrusion来实现，但是没法实现其边界线在上面的浮动展示。本文借助QGIS，实现边界线在上面的浮动展示。

实现效果

实现思路

1. 3D行政区划

这个比较简单，通过fill-extrusion来实现。

// 添加数据源
map.addSource("geojson": {
      type: 'geojson',
      data: './data/beijing.geojson'
 })
// 添加图层
map.loadImage('./data/ground.PNG', function(error, image) {
  if (error) throw error;
  map.addImage('ground', image);
  map.addLayer({
    id: 'geojson-fill',
    source: 'geojson',
    type: 'fill-extrusion',
    paint: {
      'fill-extrusion-height': 15000,
      'fill-extrusion-base': 0,
      'fill-extrusion-opacity': 0.85,
      'fill-extrusion-pattern': 'ground'
    },
  })
})

2. 边界线浮动展示

边界线的浮动展示也是通过fill-extrusion来实现的，其实现方式是通过取巧的方式将面转成了线，再将线做很小距离的缓冲区，将其转成面之后在做展示。

数据处理完之后，就可将其叠加到地图上。

// 添加数据源
map.addSource("geojson-b": {
      type: 'geojson',
      data: './data/beijing-b.geojson'
 })
// 添加图层
map.addLayer({
  id: 'geojson-fill-b',
  source: 'geojson-b',
  type: 'fill-extrusion',
  paint: {
    'fill-extrusion-height': 15100,
    'fill-extrusion-base': 14950,
    'fill-extrusion-opacity': 1,
    'fill-extrusion-color': '#fff'
  },
})

最后，添加标注。

map.addLayer({
  'id': 'geojson-label',
  'type': 'symbol',
  'source': 'geojson',
  layout: {
    'text-field': ['get', 'name'],
    'text-size': 14,
    'text-allow-overlap': true,
    'text-justify': 'center'
  },
  paint: {
    'text-color': 'rgb(159, 96, 55)',
    'text-halo-color': '#fff',
    'text-halo-width': 1.8,
  },
});

本文源代码请扫描下面二维码或直接前往仓库获取。