mapbox热力图

最新推荐文章于 2025-03-26 07:00:00 发布

weixin_42254016

最新推荐文章于 2025-03-26 07:00:00 发布

阅读量2.9k

点赞数 1

文章标签： javascript 可视化数据可视化

本文链接：https://blog.csdn.net/weixin_42254016/article/details/116976342

版权

mapbox热力图

前言
在可视化大屏项目中需要用到mapbox热力图来显示一个区域的共享单车投放密度。本文参考官方英文文档，对热力图的配置参数加了一些自己的理解。作为学习记录
实现效果：

在这里插入图片描述

热力图代码：

loadHotLayer() {
      if (this.map.getLayer('earthquakes-heat')) {
        this.map.removeLayer('earthquakes-heat')
        this.map.removeLayer('clicked_reli')
        this.map.removeSource('earthquakes')
      } else {
        axios.get(`${this.dataMUrl}/data-manager/dataset/json?oid=32ba4f5f-842f-4eaf-8580-d124fa31d083&limit=400&access_id=${access_id}&access_key=${access_key}`).then(res => {
          if (res.status == 200) {
            res.data.forEach((element, index) => {
              // element.mag = Math.floor(Math.random()*10);
              element.mag = 1;
            });
            let gongdanData = GeoJSON.parse(res.data, { Point: ['latitude', 'longitude'] })
            console.log('resssssssssssssss', gongdanData)
            this.map.addSource('earthquakes', {
              "type": "geojson",
              "data": gongdanData
            });
            this.map.addLayer({
              "id": "earthquakes-heat",
              "type": "heatmap",
              "source": "earthquakes",
              "maxzoom": 16,
              "paint": {
                // Increase the heatmap weight based on frequency and property magnitude
                // 根据properties中的mag值来设置每一个点对热力图强度的贡献，mag在0-6,贡献从0-1
                "heatmap-weight": [
                  "interpolate",
                  ["linear"],
                  ["get", "mag"],
                  0, 0,
                  6, 1
                ],
                // Increase the heatmap color weight weight by zoom level
                // heatmap-intensity is a multiplier on top of heatmap-weight
                //根据zoom设置热力图强度变化
                "heatmap-intensity": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  13, 1,
                  16, 9
                ],
                // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
                // Begin color ramp at 0-stop with a 0-transparancy color
                // to create a blur-like effect.
                // 调整颜色
                "heatmap-color": [
                  "interpolate",
                  ["linear"],
                  ["heatmap-density"],
                  0, "rgba(0,0,0,0)",
                  0.2, "rgba(25,70,150, .7)",
                  0.4, "rgba(60,160,70, .7)",
                  0.6, "rgba(250,230,30, .8)",
                  0.8, "rgba(250,130,45, .9)",
                  1, "rgba(255,36,36, .9)"
                ],
                // Adjust the heatmap radius by zoom level
                // 根据zoom设置热力图计算半径
                "heatmap-radius": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  13, 90,
                  16, 100
                ],
                // Transition from heatmap to circle layer by zoom level
                // 根据zoom设置热力图透明度
                "heatmap-opacity": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  13, 1,
                  16, 1
                ],
              }
            });
          }
        })
      }

    },

添加热力图主要用到两个方法，addSource和addlayer,addSource是将GeoJSON类的数据作为数据源添加到地图上，本文不做详细解释。主要来看一下addLayer中的详细参数配置
“id”: “earthquakes-heat”,
“type”: “heatmap”,
“source”: “earthquakes”,
“maxzoom”: 16,
id：该图层的唯一id值，type选择热力图，source选择前面添加的数据源，maxzoom表示最大缩放等级，超过这个数值将不显示热力图（可根据实际需求，超过该等级可展示另一个图层）
关键配置paint
“heatmap-weight”: [
“interpolate”,
[“linear”],
[“get”, “mag”],
0, 0,
6, 1
]
根据properties中的mag值来设置每一个点对热力图强度的贡献，mag在0-6,贡献从0-1线性变换，本文数据源无mag值，所以配置每个mag为1
“heatmap-intensity”: [
“interpolate”,
[“linear”],
[“zoom”],
13, 1,
16, 9
]
根据zoom设置热力图强度变化，本文设置地图最小缩放为13，热力图最大层级为16，所以此处配置zoom在13-16之间，热力图强度在1-9之间线性变换
“heatmap-color”: [
“interpolate”,
[“linear”],
[“heatmap-density”],
0, “rgba(0,0,0,0)”,
0.2, “rgba(25,70,150, .7)”,
0.4, “rgba(60,160,70, .7)”,
0.6, “rgba(250,230,30, .8)”,
0.8, “rgba(250,130,45, .9)”,
1, “rgba(255,36,36, .9)”
],
颜色的线性变换
“heatmap-radius”: [
“interpolate”,
[“linear”],
[“zoom”],
13, 90,
16, 100
]
根据zoom设置热力图计算半径
“heatmap-opacity”: [
“interpolate”,
[“linear”],
[“zoom”],
13, 1,
20, 1
]
根据zoom设置热力图透明度
mapbox官方热力图示例：
链接: link.