207 lines
5.7 KiB
HTML
207 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta
|
||
|
|
name="viewport"
|
||
|
|
content="initial-scale=1.0, user-scalable=no, width=device-width"
|
||
|
|
/>
|
||
|
|
<title>热力图</title>
|
||
|
|
|
||
|
|
<script src="./static/tailwind.min.js"></script>
|
||
|
|
<link href="./static/remixicon/remixicon.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html,
|
||
|
|
body,
|
||
|
|
#container {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="container"></div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="fixed border rounded-lg shadow-xl bottom-4 left-4 right-4 bg-white"
|
||
|
|
>
|
||
|
|
<div class="flex flex-row flex-nowrap items-center p-4">
|
||
|
|
<button
|
||
|
|
class="h-7 w-7 rounded-full transition-all hover:bg-slate-200 mb-6 mx-1"
|
||
|
|
id="play-btn"
|
||
|
|
onclick="startOrPause()"
|
||
|
|
>
|
||
|
|
<i class="ri-play-line"></i>
|
||
|
|
</button>
|
||
|
|
<div class="grow relative mb-6 mx-1">
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
min="0"
|
||
|
|
max="11"
|
||
|
|
value="0"
|
||
|
|
id="control-bar"
|
||
|
|
class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200"
|
||
|
|
oninput="updateData(this.value)"
|
||
|
|
/>
|
||
|
|
<span class="absolute -bottom-6 start-0 text-sm text-gray-500"
|
||
|
|
>1</span
|
||
|
|
>
|
||
|
|
<span class="absolute -bottom-6 start-[9.0909%] text-sm text-gray-500"
|
||
|
|
>2</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[18.1818%] text-sm text-gray-500"
|
||
|
|
>3</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[27.2727%] text-sm text-gray-500"
|
||
|
|
>4</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[36.3636%] text-sm text-gray-500"
|
||
|
|
>5</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[45.4545%] text-sm text-gray-500"
|
||
|
|
>6</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[54.5455%] text-sm text-gray-500"
|
||
|
|
>7</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[63.6364%] text-sm text-gray-500"
|
||
|
|
>8</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[72.7273%] text-sm text-gray-500"
|
||
|
|
>9</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[81.8182%] text-sm text-gray-500"
|
||
|
|
>10</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="absolute -bottom-6 start-[90.9091%] text-sm text-gray-500"
|
||
|
|
>11</span
|
||
|
|
>
|
||
|
|
<span class="absolute -bottom-6 start-full text-sm text-gray-500"
|
||
|
|
>12</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
window._AMapSecurityConfig = {
|
||
|
|
securityJsCode: "0bc2f7560c1da34a09c921a92fce4502",
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script src="https://webapi.amap.com/maps?v=2.0&key=13471667a960ce7a08b3dfdd9a4fb193"></script>
|
||
|
|
<script src="./heatmapData.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var map = new AMap.Map("container", {
|
||
|
|
resizeEnable: true,
|
||
|
|
center: [116.418261, 39.921984], // 配置地图中心的经纬度
|
||
|
|
zoom: 11,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!isSupportCanvas()) {
|
||
|
|
alert("您所使用的浏览器不能使用热力图功能，请换个浏览器试试～");
|
||
|
|
}
|
||
|
|
|
||
|
|
// heatmap.js document:
|
||
|
|
// http://www.patrick-wied.at/static/heatmapjs/docs.html
|
||
|
|
/* visible 热力图是否显示, 默认为 true
|
||
|
|
* opacity 热力图的透明度, 分别对应 heatmap.js的minOpacity和maxOpacity
|
||
|
|
* radius 热力图的每个点的半径大小
|
||
|
|
* gradient {JSON} 热力图的渐变区间 . gradient如下所示
|
||
|
|
* {
|
||
|
|
.2:'rgb(0, 255, 255)',
|
||
|
|
.5:'rgb(0, 110, 255)',
|
||
|
|
.8:'rgb(100, 0, 255)'
|
||
|
|
}
|
||
|
|
其中 key 表示插值的位置, 0-1
|
||
|
|
value 为颜色值
|
||
|
|
*/
|
||
|
|
var heatmap;
|
||
|
|
var playing = false;
|
||
|
|
map.plugin(["AMap.HeatMap"], function () {
|
||
|
|
heatmap = new AMap.HeatMap(map, {
|
||
|
|
radius: 25, //给定半径
|
||
|
|
opacity: [0, 0.8],
|
||
|
|
/*,
|
||
|
|
gradient:{
|
||
|
|
0.5: 'blue',
|
||
|
|
0.65: 'rgb(117,211,248)',
|
||
|
|
0.7: 'rgb(0, 255, 0)',
|
||
|
|
0.9: '#ffea00',
|
||
|
|
1.0: 'red'
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
});
|
||
|
|
heatmap.setDataSet({
|
||
|
|
max: 100,
|
||
|
|
data: heatmapData[0],
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function isSupportCanvas() {
|
||
|
|
var elem = document.createElement("canvas");
|
||
|
|
return !!(elem.getContext && elem.getContext("2d"));
|
||
|
|
}
|
||
|
|
|
||
|
|
function showHeatmap() {
|
||
|
|
heatmap.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideHeatmap() {
|
||
|
|
heatmap.hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateData(value) {
|
||
|
|
heatmap.setDataSet({
|
||
|
|
data: heatmapData[value],
|
||
|
|
max: 100,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function startOrPause() {
|
||
|
|
if (playing) {
|
||
|
|
playing = false;
|
||
|
|
let btn = document.getElementById("play-btn");
|
||
|
|
btn.innerHTML = '<i class="ri-play-line"></i>';
|
||
|
|
stopPlay();
|
||
|
|
} else {
|
||
|
|
playing = true;
|
||
|
|
let btn = document.getElementById("play-btn");
|
||
|
|
btn.innerHTML = '<i class="ri-pause-line"></i>';
|
||
|
|
startPlay();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startPlay() {
|
||
|
|
let slider = document.getElementById("control-bar");
|
||
|
|
intervalID = setInterval(function () {
|
||
|
|
if (slider.value < 11) {
|
||
|
|
slider.value++;
|
||
|
|
updateData(slider.value);
|
||
|
|
} else {
|
||
|
|
startOrPause();
|
||
|
|
}
|
||
|
|
}, 100); // Do every 100ms
|
||
|
|
}
|
||
|
|
|
||
|
|
function stopPlay() {
|
||
|
|
clearInterval(intervalID);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|