美文网首页GIS加油站
mapboxGL中3D行政区划的实现

mapboxGL中3D行政区划的实现

作者: 牛老师讲GIS | 来源:发表于2022-08-21 20:36 被阅读0次

概述

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

相关文章

  • mapboxGL中3D行政区划的实现

    概述 很多时候我们会遇到3D行政区划的展示,在mapboxGL中,面状的3D展示比较容易,我们可以通过fill-e...

  • mapboxgl绘制3D线

    最近遇到个需求,使用mapboxgl绘制行政区划图层,要求把行政区划拔高做出立体效果,以便突出显示。 拿到这个需求...

  • mapboxGL中多图标加载的实现

    概述 mapboxGl中多图标的实现可以在style中指定sprite来实现,但是在实际使用的时候会出现sprit...

  • mapboxGL测量实现

    概述 讲真,MapboxGL里面虽然有测量的功能,但是不太好用,于是就萌生了自己实现的方法。本文几个turf.js...

  • mapboxGL卷帘实现

    概述 卷帘对比是webgis中常见的一种对比方式,本文讲述一下如何在mapboxGL中实现卷帘对比。 效果 实现思...

  • Python使用png图片生成MapboxGL雪碧图

    在mapboxgl中,使用sprite雪碧图实现图标渲染是比较常见的方式。对于自己制作定义的图标如何生成雪碧图,本...

  • Leaflet 带箭头轨迹以及沿轨迹带方向的动态marker

    前面写了篇文章,mapboxgl实现带箭头轨迹线[http://gisarmory.xyz/blog/index....

  • mapboxGL实现旋转的地球

    概述 许久未更新,这一篇是凑数的,用最新的mapboxGL2.10的版本实现一个旋转的地球的效果。 实现效果 实现...

  • mapboxGL2中Terrain的离线化应用

    概述 mapboxGL2中比较大的一个更新就是加入了Terrain,可以实现三维的立体效果,本文书接上文“mapb...

  • mapboxGL列表和地图联动

    概述 列表和地图联动是webgis中一个非常常见的功能,本文讲一下在mapboxGL中结合vue如何实现此功能。 ...

网友评论

    本文标题:mapboxGL中3D行政区划的实现

    本文链接:https://www.haomeiwen.com/subject/xaxbgrtx.html