使用deck.gl与MapLibre构建交互式地理可视化应用

董瑾红William

于 2025-06-03 09:04:57 发布

阅读量331

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00596/article/details/148392932

版权

使用deck.gl与MapLibre构建交互式地理可视化应用

deck.gl WebGL2 powered visualization framework 项目地址: https://gitcode.com/gh_mirrors/de/deck.gl

项目概述

deck.gl是一个由Uber开源的WebGL驱动的大规模数据可视化框架，特别擅长处理地理空间数据的可视化。本文将通过一个实际案例，展示如何结合deck.gl和MapLibre（一个开源的Web地图库）创建一个交互式的地理可视化应用。

环境搭建

要开始使用deck.gl与MapLibre，首先需要在HTML文件中引入必要的资源：

<!-- deck.gl核心库 -->
<script src="https://unpkg.com/deck.gl@^9.0.0-beta/dist.min.js"></script>

<!-- MapLibre相关资源 -->
<script src='https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css' rel='stylesheet' />

基础页面结构

创建一个全屏显示的地图容器非常简单：

<style type="text/css">
  body {margin: 0; padding: 0;}
  #container {width: 100vw; height: 100vh;}
</style>

<body>
  <div id="container"></div>
</body>

初始化deck.gl实例

核心的deck.gl初始化代码如下：

const deckgl = new deck.DeckGL({
  container: 'container', // 指定容器元素
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json', // 底图样式
  initialViewState: { // 初始视图状态
    latitude: 51.47,
    longitude: 0.45,
    zoom: 4,
    bearing: 0,
    pitch: 30,
  },
  controller: true, // 启用交互控制器
  layers: [ /* 图层配置 */ ]
});

数据源配置

示例中使用的是全球航空站的GeoJSON数据：

const AIR_PORTS = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

图层配置详解

GeoJsonLayer - 航空站点图层

new deck.GeoJsonLayer({
  id: 'airports',
  data: AIR_PORTS,
  // 样式配置
  filled: true,
  pointRadiusMinPixels: 2,
  pointRadiusScale: 2000,
  getPointRadius: f => (11 - f.properties.scalerank),
  getFillColor: [200, 0, 80, 180],
  // 交互配置
  pickable: true,
  autoHighlight: true,
  onClick: info => info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
})

这个图层将航空站数据显示为点，其中：

getPointRadius根据航空站等级(scalerank)动态调整点的大小
getFillColor设置了点的颜色(RGBA格式)
pickable和autoHighlight启用了悬停高亮效果
onClick定义了点击事件处理函数

ArcLayer - 弧线图层

new deck.ArcLayer({
  id: 'arcs',
  data: AIR_PORTS,
  dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
  // 样式配置
  getSourcePosition: f => [-0.4531566,51.4709959], // 伦敦坐标
  getTargetPosition: f => f.geometry.coordinates,
  getSourceColor: [0, 128, 200],
  getTargetColor: [200, 0, 80],
  getWidth: 1
})

这个图层创建了从伦敦到各大航空站的弧线，其中：