mapbox热力图属性

本文主要是介绍mapbox热力图属性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官网示例

https://www.mapbox.cn/mapbox-gl-js/example/heatmap-layer/

heatmap-weight：表示一个点对热力图权重的贡献，在贡献越大的地方热力图显示应该越明显
heatmap-intensity：热力图强度，该属性是设置整体上热力图的强度

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

heatmap-radius：热力图的一个点计算权重的时候计算的点的半径

heatmap-opacity：热力图的透明度

  this.$refs.mapCom.map.addLayer({

            id: "earthquakes-heat",

            type: "heatmap",

            source: "earthquakes",

            maxzoom: 9,

            paint: {

              // 修改权重

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

              // 该属性用于在全局范围内调整热力图外观的强度，值越高，每个点对外观的影响就越大

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

              //  修改颜色

              "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-radius": ["interpolate", ["linear"], ["zoom"], 0, 4, 1, 4, 2, 8, 3, 16, 4, 32],

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

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

            },

          });

这篇关于mapbox热力图属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！