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热力图属性相关推荐

echarts地图散点热力图1
echarts地图散点热力图 <!--https:// ...
Mapbox GL可视化之热力图
本篇使用Mapbox GL JS实现数据的热力图可视化,以截止到2020-03-01日的新冠疫情作为示例数据. 一什么是热力图热力图使用颜色的深浅表示数值的变化,从而表示数据的分布情况,这使得用户 ...
mapbox 添加geoserver发布的wms服务及wms服务属性查询
<!DOCTYPE html> <html><head><meta charset='utf-8' /><title>mapbox 添加 g ...
mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>m ...
win32 api setwindowlong 第2个参数_FME与MapBox 01：等时圈（Isochrone）API
MapBox是非常优秀的国外地图提供商,MapBox中在知乎设有专栏(https://www.zhihu.com/org/mapboxzhong-guo)介绍其成果及各种有趣的玩法.MapBox的AP ...
mapbox样式规范(style)
[Mapbox](https://docs.mapbox.com/mapbox-gl-js/style-spec/)致力于打造全球最漂亮的个性化地图. Mapbox样式由一组根属性组成,其中一些属性描 ...
Mapbox Style 规范(中文)
Mapbox 致力于打造全球最漂亮的个性化地图. 这里记录下其 Web 端 API Mapbox GL JS 的地图样式规范 Style 的各个配置项: 必填项会加上 * ,方便根据目录进行查看 1. ...
mapbox基本使用
1. 获取所有图层 map.getStyle().layers 2. 控制图层的显示与隐藏 // 获取属性 map.getLayoutProperty('maqiaojiedao', 'visibil ...
mapbox使用，包括绘制、加载、修改、删除点和面，显示弹框等
加载地图数据 mapbox api地址:http://www.mapbox.cn/mapbox-gl-js/api/ mapbox-gl-draw git地址: https://github.com/ ...

mapbox热力图属性

mapbox热力图属性相关推荐

最新文章

热门文章