百度地图离线开发demo（热力图）

 热力图主要用了bmplib插件&＃xff0c;

initMap() {this.map &＃61; new BMap.Map(&＃39;myMap&＃39;);const point &＃61; new BMap.Point(118.138979, 24.497246);this.map.centerAndZoom(point, 15); // 初始化地图&＃xff0c;设置中心点坐标和地图级别this.map.enableScrollWheelZoom(); // 允许滚轮缩放const points &＃61; [];for(let i &＃61; 0; i <600;i&＃43;&＃43;){points.push({lng: 118.138989 &＃43; 0.001 * Math.floor(Math.random() * 10 &＃43; 1),lat: 24.497246 &＃43; 0.001 * Math.floor(Math.random() * 10 &＃43; 1),count: Math.floor(Math.random() * 10 &＃43; 1),});}if (!isSupportCanvas()) {alert(&＃39;热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~&＃39;);}//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md//参数说明如下:/* visible 热力图是否显示,默认为true* opacity 热力的透明度,1-100* radius 势力图的每个点的半径大小* gradient {JSON} 热力图的渐变区间 . gradient如下所示* {.2:&＃39;rgb(0, 255, 255)&＃39;,.5:&＃39;rgb(0, 110, 255)&＃39;,.8:&＃39;rgb(100, 0, 255)&＃39;}其中 key 表示插值的位置, 0~1.value 为颜色值.*/this.mapObj.heatmapOverlay &＃61; new BMapLib.HeatmapOverlay({ radius: 20 });this.map.addOverlay(this.mapObj.heatmapOverlay);this.mapObj.heatmapOverlay.setDataSet({ data: points, max: 100 });this.closeHeatmap();function setGradient() {/*格式如下所示:{0:&＃39;rgb(102, 255, 0)&＃39;,.5:&＃39;rgb(255, 170, 0)&＃39;,1:&＃39;rgb(255, 0, 0)&＃39;}*/const gradient &＃61; {};let colors &＃61; document.querySelectorAll(&＃39;input[type&＃61;\&＃39;color\&＃39;]&＃39;);colors &＃61; [].slice.call(colors, 0);colors.forEach(function(ele) {gradient[ele.getAttribute(&＃39;data-key&＃39;)] &＃61; ele.value;});this.heatmapOverlay.setOptions({ gradient: gradient });}//判断浏览区是否支持canvasfunction isSupportCanvas() {const elem &＃61; document.createElement(&＃39;canvas&＃39;);return !!(elem.getContext && elem.getContext(&＃39;2d&＃39;));}},//是否显示热力图openHeatmap() {this.mapObj.heatmapOverlay.show();},closeHeatmap() {this.mapObj.heatmapOverlay.hide();},}, //如果页面有keep-alive缓存功能&＃xff0c;这个函数会触发
};