mapboxGL中3D行政区划的实现

Posted 2022-11-22 牛老师讲GIS

概述

很多时候我们会遇到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,
  ,
);

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