代码编织梦想

前言

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.js"></script>
    <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
    <script src="https://d3js.org/d3-request.v1.min.js"></script>

</head>

<body>
    <div id="map" style="position: absolute;height: 100%;width: 100%;"></div>

    <script>

        mapboxgl.accessToken = "token";
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/dark-v11', // style URL
            center: [-0.198465, 51.505538], //[-122.458642, 37.758062], // starting position [lng, lat]
            zoom: 7, // starting zoom
            "pitch": 60
        });

        const colorRange = [
            [1, 152, 189],
            [73, 227, 206],
            [216, 254, 181],
            [254, 237, 177],
            [254, 173, 84],
            [209, 55, 78]
        ];

        const material = {
            ambient: 0.64,
            diffuse: 0.6,
            shininess: 32,
            specularColor: [51, 51, 51]
        };

        map.on('load', () => {
            d3.csv('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv', (error, response) => {
                if (!error) {
                    const data = response.map(d => [Number(d.lng), Number(d.lat)]);

                    const myLayer2 = new MapboxLayer({
                        id: 'okb',
                        type: HexagonLayer,
                        colorRange,
                        coverage: 1,
                        data: data,
                        elevationRange: [0, 3000],
                        elevationScale: data && data.length ? 50 : 0,
                        extruded: true,
                        getPosition: d => d,
                        pickable: true,
                        radius: 2000,
                        upperPercentile: 100,
                        material,

                        // transitions: {
                        //     elevationScale: 3000
                        // }
                    })

                    map.addLayer(myLayer2)
                }
            });
        })


    </script>
</body>

</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/imxiezy/article/details/129631386

mapboxgl+geoserver开发矢量地图_make_gis_simple的博客-爱代码爱编程_mapbox gl layer group management

mapboxgl可以调用mapbox公司自己的地图,那么如果我们需要发布自己的矢量瓦片,有几种方法 1.使用商业GIS软件,如国产的超图支持MVT发布 2.使用开源的GIS服务软件,比如geoserver 实现方法: geoserver的新版本,2.14.1已经集成了mbtiles,老版本需要下载plugin才行 在geoserver中发布矢量地

mapboxgl+echarts 简单制作专题地图-爱代码爱编程

mapboxgl+echarts 简单制作专题地图 实现效果思路实现过程全部代码 实现效果 思路 1.引用mapboxgl脚本库及样式库与echart脚本库。 2.准备专题数据,此处我们使用模拟数据,使用json模拟后台返回的统计数据。【专题数据包含行政区划坐标、统计字段(多个)】 eg: 行政区划编码行政区划坐标行政区划名称统计字段

MapBoxGL 入门-爱代码爱编程

近期公司准备用mapboxgl弄在线制图系统..由于对矢量图层的大量渲染及加载等选型mapboxgl。 Mapbox GL JS是一个JavaScript库,使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能,MapboxGL能够渲染大量的地图要素,拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端,是一款十分优秀的W

cesium three性能比较_mapboxgl + three 动画 — 网格热图-爱代码爱编程

一、前言 最近工作上需要实现一个地图动画效果,简单的动画效果,是的,简单;不过在此之前,我并不认为它简单,需要有一点点的webgl、three.js的基础。 效果大概就是一个网格起伏热力图的动画,像心跳一样、heartbeat……,像这样。 A grid heat map 上面这个动效,它好像是基于一个gltf模型来做的,它

Mapboxgl + TweenJS 实现图层属性的动画效果(地块抬升)-爱代码爱编程

(1)主要过程:使用统一的数据源,通过mapboxgl.setFilter方法对选中的图层进行筛选;在图层属性变化的过程中(setPaintProperty)使用TweenJS动画补间实现动态变化 (2)效果: (3)代码 HTML 、CSS: <!DOCTYPE html> <html lang="ZH-CN">

Mapboxgl + KrigingJS 实现插值图-爱代码爱编程

(1)主要过程:结合Kriging.js 实现 Mapboxgl 上的插值图 (2)效果: (3)代码 HTML 、CSS: <head> <meta charset="UTF-8" /> <title>Mapboxgl(canvas) + kriging.js</title>

mapboxgl + geoserver 配置本地地图教程-爱代码爱编程

目录 零、准备阶段 一、JDK的安装 二、Tomcat的配置 三、geoserver的安装 四、利用geoserver发布shapefile数据 五、查看我们发布的数据 六、离线地图的部署 七、效果展示   零、准备阶段 环境需求:JDK1.8           apache-tomcat-7.0.88           ge

VUE3 + TS + MapboxGL + 拖拽定位-爱代码爱编程

VUE3 + TS + MapboxGL + 拖拽定位 mapbox的拖拽定位,相对于其他api来说还是相对容易实现的。只需要在中心创建图层,之后在地图移动时候一直更改图层的中心即可。 首先,安装部分不过多描述:官网安装地址 之后,要使用mapboxGL,首当其冲肯定是初始化mapbox 这里我把初始化全部放在一个ts文件并且组件调用该初始化函数进行

cesium+mapboxgl+vectortile -爱代码爱编程

这里主要讲述 Cesium通过 MapboxGL加载不同服务的情况,分别包括服务部署和发布,以及使用。 Cesium+MapboxGL+VectorTile -1 调用postgis服务 环境搭建 ,本文基于mac

deckgl与mapboxgl整合方案_mapbox+deck.gl引入-爱代码爱编程

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