Mapbox 热力图属性简单说明

本文只作为学习记录,参考官方文档

https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-heatmap

由于英语不好,只是大体理解了,但为了方便记录一下,很多理解不正确的地方 希望指点勿喷。

heatmap-weight:表示一个点对热力图权重的贡献,在贡献越大的地方热力图显示应该越明显

heatmap-intensity:热力图强度,有点类似于heatmap-weight属性,但是该属性是设置整体上热力图的强度

heatmap-color:热力图的颜色,设置在各个热力图的数值上是什么颜色

heatmap-radius:热力图的一个点计算权重的时候计算的点的半径,单位为像素,默认为30

heatmap-opacity:热力图的透明度

下面根据自己的理解说明以官网事例中各个属性的意思

        "heatmap-weight": [
                        "interpolate",
                        ["linear"],
                        ["get", "mag"],
                          0, 0,
                          6, 1
                    ],

获取配一个要素的mag属性的值来设置每一个点对热力图强度的贡献,事例表示当mag的数值在0~6之间的时候对热力图强度贡献为从0到1进行线性贡献,大于6表示贡献为1,小于0表示无贡献

 "heatmap-intensity": [
                 "interpolate",
                 ["linear"],
                 ["zoom"],
                 0, 1,
                 9, 3      ],

根据地图的缩放级别类设置热力图的强度,当缩放级别在0~9之间进行线性变化的时候,热力图的强度从1~3进行线性变化,小于0是 强度为0,大于9时强度为3,heatmap-intensity is a multiplier on top of heatmap-weight

    "heatmap-color": [
                "interpolate",
                ["linear"],
                ["heatmap-density"],
                0, "rgba(33,102,172,0)",
                0.2, "rgb(103,169,207)",
                0.4, "rgb(209,229,240)",
                0.6, "rgb(253,219,199)",
                0.8, "rgb(239,138,98)",
                1, "rgb(178,24,43)"
                    ],

设置热力图的颜色,热力图是颜色在强度在给定的两个范围进颜色记性线性变化,heatmap-density表示热力图的密度, 

"heatmap-radius": [
                "interpolate",
                ["linear"],
                ["zoom"],
                0, 2,
                9, 20     ],

设置在不同缩放级别的时候更改热力图计算的半径,

"heatmap-opacity": [
                "interpolate",
                ["linear"],
                ["zoom"],
                7, 1,
                9, 0    ],

设置热力图的透明度,是整体图形的透明度,在zoom处于7~9间将热力图逐渐的透明,在zoom大于9的时候完全透明

该事例中使用到interpolate,具体参考官方地址

https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-interpolate


      


### 使用 Mapbox 实现 3D 热力图 为了创建一个基于 Mapbox 的 3D 热力图,可以利用 `mapbox-gl` 库中的功能。下面是一个详细的指南和代码片段用于展示如何构建这样的图表。 #### 初始化地图并加载样式 首先,在 HTML 文件内引入必要的库文件,并设置容器来容纳地图: ```html <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.0/mapbox-gl.css' rel='stylesheet'/> <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.0/mapbox-gl.js'></script> <div id="map" style="width: 100%; height: 500px;"></div> ``` 接着初始化地图对象,并指定所需的访问令牌、中心坐标以及其他属性: ```javascript mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v10', // 地图风格 center: [-74.5, 40], // 初始视图位置 zoom: 9 // 缩放级别 }); ``` #### 添加热力图层 当地图完成加载之后,通过调用 `addLayer()` 方法向其添加一个新的热力图层。此操作应在 `load` 事件触发时执行,以确保底层地理数据已经准备好被覆盖。 ```javascript map.on('load', function () { map.addSource('heatmap-source', { type: 'geojson', data: 'https://www.example.com/data.geojson' }); map.addLayer({ id: "heat-layer", type: "heatmap", // 图层类型设为 heatmap source: "heatmap-source", // 关联之前定义的数据源 paint: { // 设置视觉效果选项 'heatmap-weight': ['get', 'weight'], // 数据权重字段名称 'heatmap-intensity': 1, 'heatmap-color': [ 'interpolate', ['linear'], ['heatmap-density'], 0, '#ffeda0', 0.2, '#feb24c', 0.4, '#f03b20' ], 'heatmap-radius': 25, 'heatmap-opacity': 0.8 } }); }); ``` #### 转换至三维视角 为了让热力图呈现出立体感,可以通过调整相机角度使地图倾斜显示。这一步同样是在地图完全载入后进行处理。 ```javascript map.once('styledata', function() { map.setPitch(60); // 设置俯仰角为60度 map.rotate([-Math.PI / 6]); // 向左旋转一定角度 }); ``` 以上就是使用 Mapbox 创建简单 3D 效果的热力图的方法[^1]。需要注意的是实际应用中可能还需要考虑更多细节优化用户体验,比如响应式设计适应不同设备屏幕大小变化等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值