mapboxgl + deckgl 入门例子

最新推荐文章于 2025-09-11 09:23:59 发布

原创

最新推荐文章于 2025-09-11 09:23:59 发布 · 958 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文展示了如何使用MapboxGL作为底图，DeckGL的HexagonLayer进行数据可视化，通过加载CSV数据创建3D热力图层，以丰富地图的表现形式。示例代码中包含了数据处理和图层添加的过程，强调了组合使用这两个库的潜力。

前言

mapboxgl 提供底图，deckgl 可以提供更为丰富的可视化效果图层，两者的结合可以提供更多的可视化方式。本文仅是简单尝试，后续可以做更多的探索。

效果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css' rel='stylesheet' />

    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
    <script src="https://d3js.org/d3-dispatch.v1.min.j