DeckGL与MapboxGL整合方案

原创

已于 2023-02-24 15:58:32 修改 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#图形渲染

于 2023-02-21 12:44:29 首次发布

deck.gl的MapView确保在各个缩放和旋转角度下与Mapbox相机同步。集成方法包括MapboxOverlay（适用于二维地图，保持两个库的独立渲染）和MapboxLayer（将DeckGL图层直接渲染到Mapbox的WebGL上下文中）。MapboxOverlay适合需要使用额外Mapbox控件的情况，而MapboxLayer允许DeckGL图层与Mapbox图层间有遮挡效果。

deck.gl 的 MapView 旨在每个缩放级别和旋转角度与 Mapbox 的相机完美同步。对于DeckGL与MapboxGL的整合官方文档提供了两种方案，不过看网络上也有按需求根据源码定制整合的方案

主要通过deck.gl/mapbox模块中的MapboxOverlay和MapboxLayer类实现

[1]overlay

相应API：MapboxOverlay 在这里插入图片描述

该方式主要适用于底图为二维的情况，因为是将DeckGL的layer和Mapbox的layer分离构建并挂载在不同的DOM中，将DeckGL的画布作为Mapbox底图顶部上的叠加层。官网示例：https://github.com/visgl/deck.gl/tree/8.8-release/examples/get-started/pure-js/mapbox

Deck 的相机和mapbox的相机是同步的，所以这是一个比较灵活强大的选项，因为这两个库彼此独立地管理它们的渲染。如果底图是二维的（因为不会有相互遮挡效果，就是无论底图是不是三维的，DeckGL Layer都会叠加到Mapbox Layer 上，mapBox-gl的dom也就是挂载于deckGL之上，mapbox-gl 处理所有用户输入），通常就足够了。

如果您需要使用除 deck.gl 之外的其他 mapbox-gl 控件和插件，这是有利的

注意也是可以将Mapbox 的Layer作为叠加层叠加到DeckGL上的，这里不太推荐，就不过多介绍了

import {MapboxOverlay} from '@deck.gl/mapbox';
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
import mapboxgl from 'mapbox-gl';

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const AIR_PORTS =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
  center: [0.45, 51.47],
  zoom: 4,
  bearing: 0,
  pitch: 30
});

const mapboxOverlay = new MapboxOverlay({
  layers: [
    new GeoJsonLayer({
      id: 'airports',
      data: AIR_PORTS,
      // Styles
      filled: true,
      pointRadiusMinPixels: 2,
      pointRadiusScale: 2000,
      getPointRadius: f => 11 - f.properties.scalerank,
      getFillColor: [200, 0, 80, 180],
      // Interactive props
      pickable: true,
      autoHighlight: true,
      onClick: info =&g