initial commit
This commit is contained in:
吴天
commit
4c73f464f5
|
|
@ -0,0 +1,24 @@
|
|||
# README
|
||||
|
||||
## 调用的库和资源
|
||||
|
||||
- Tailwind.css
|
||||
- RemixIcon
|
||||
|
||||
## 数据集说明
|
||||
|
||||
数据集通过名为 heatmapData 的变量引入（在 heatmapData.js 中），这是一个数组，每个元素代表了某个时刻的热力图数据集。（目前控制条档位为 12 个，建议测试数组长度为 12，之后可以调节）
|
||||
|
||||
某个时刻的热力图数据，是一个数组，包含若干热力点。
|
||||
|
||||
每一个热力点格式如下：
|
||||
|
||||
```
|
||||
{
|
||||
lng: 116.405285,
|
||||
lat: 39.904989,
|
||||
count: 65
|
||||
}
|
||||
```
|
||||
|
||||
分别表示热力点的经度、纬度和热力强度。
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
var heatmapData = [
|
||||
[
|
||||
{
|
||||
lng: 116.191031,
|
||||
lat: 39.988585,
|
||||
count: 70,
|
||||
},
|
||||
{
|
||||
lng: 116.389275,
|
||||
lat: 39.925818,
|
||||
count: 80,
|
||||
},
|
||||
{
|
||||
lng: 116.287444,
|
||||
lat: 39.810742,
|
||||
count: 70,
|
||||
},
|
||||
{
|
||||
lng: 116.481707,
|
||||
lat: 39.940089,
|
||||
count: 50,
|
||||
},
|
||||
{
|
||||
lng: 116.410588,
|
||||
lat: 39.880172,
|
||||
count: 30,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
lng: 116.191031,
|
||||
lat: 39.988585,
|
||||
count: 10,
|
||||
},
|
||||
{
|
||||
lng: 116.389275,
|
||||
lat: 39.925818,
|
||||
count: 5,
|
||||
},
|
||||
{
|
||||
lng: 116.287444,
|
||||
lat: 39.810742,
|
||||
count: 20,
|
||||
},
|
||||
{
|
||||
lng: 116.481707,
|
||||
lat: 39.940089,
|
||||
count: 30,
|
||||
},
|
||||
{
|
||||
lng: 116.410588,
|
||||
lat: 39.880172,
|
||||
count: 2,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
lng: 116.191031,
|
||||
lat: 39.988585,
|
||||
count: 120,
|
||||
},
|
||||
{
|
||||
lng: 116.389275,
|
||||
lat: 39.925818,
|
||||
count: 100,
|
||||
},
|
||||
{
|
||||
lng: 116.287444,
|
||||
lat: 39.810742,
|
||||
count: 20,
|
||||
},
|
||||
{
|
||||
lng: 116.481707,
|
||||
lat: 39.940089,
|
||||
count: 80,
|
||||
},
|
||||
{
|
||||
lng: 116.410588,
|
||||
lat: 39.880172,
|
||||
count: 20,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
lng: 116.191031,
|
||||
lat: 39.988585,
|
||||
count: 120,
|
||||
},
|
||||
{
|
||||
lng: 116.389275,
|
||||
lat: 39.925818,
|
||||
count: 100,
|
||||
},
|
||||
{
|
||||
lng: 116.287444,
|
||||
lat: 39.810742,
|
||||
count: 20,
|
||||
},
|
||||
{
|
||||
lng: 116.481707,
|
||||
lat: 39.940089,
|
||||
count: 80,
|
||||
},
|
||||
{
|
||||
lng: 116.410588,
|
||||
lat: 39.880172,
|
||||
count: 20,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
lng: 116.191031,
|
||||
lat: 39.988585,
|
||||
count: 100,
|
||||
},
|
||||
{
|
||||
lng: 116.389275,
|
||||
lat: 39.925818,
|
||||
count: 100,
|
||||
},
|
||||
{
|
||||
lng: 116.287444,
|
||||
lat: 39.810742,
|
||||
count: 100,
|
||||
},
|
||||
{
|
||||
lng: 116.481707,
|
||||
lat: 39.940089,
|
||||
count: 100,
|
||||
},
|
||||
{
|
||||
lng: 116.410588,
|
||||
lat: 39.880172,
|
||||
count: 100,
|
||||
},
|
||||
],
|
||||
];
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Heapmap.js 数据集格式为：
|
||||
|
||||
```
|
||||
{
|
||||
max: Number 权重的最大值,
|
||||
data: Array[] 热力点数据集
|
||||
}
|
||||
```
|
||||
|
||||
其中 max 不填则默认取数据集 count 最大值.
|
||||
|
||||
例：
|
||||
|
||||
```
|
||||
{
|
||||
max: 100,
|
||||
data: [
|
||||
{lng: 116.405285, lat: 39.904989, count: 65},
|
||||
{lng: 116.415285, lat: 39.804989, count: 10}
|
||||
]
|
||||
}
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.2 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue