其他分享
首页 > 其他分享> > 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],

            },

          });

标签:linear,zoom,interpolate,力图,rgb,heatmap,mapbox,属性
来源: https://blog.csdn.net/qq_38974956/article/details/115633931