-
Notifications
You must be signed in to change notification settings - Fork 83
/
heatmap.html
128 lines (126 loc) · 4.88 KB
/
heatmap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Heatmap | echarts-extension-amap</title>
<!-- please replace {ak} with your ak & customize your plugins -->
<!-- Plugin `AMap.CustomLayer` is required if you are using a version of library less than v1.9.0 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
<!-- ECharts CDN -->
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- echarts amap extension -->
<!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #echarts-amap {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="echarts-amap"></div>
<!-- data comes from Baidu Map, just for example -->
<script type="text/javascript">
var heatmapDataURI = 'https://fastly.jsdelivr.net/gh/apache/echarts-examples/public/data/asset/data/hangzhou-tracks.json';
var option = {
// amap component option
amap: {
// enable 3D mode
// Note that it's suggested to enable 3D mode to improve echarts rendering.
viewMode: '3D',
// initial options of AMap
// See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
// initial map center [lng, lat]
center: [120.098776, 30.226665],
// initial map zoom
zoom: 13,
// whether the map and echarts automatically handles browser window resize to update itself.
resizeEnable: true,
// customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
mapStyle: 'amap://styles/dark',
// whether echarts layer should be rendered when the map is moving. Default value is true.
// if false, it will only be re-rendered after the map `moveend`.
// It's better to set this option to false if data is large.
renderOnMoving: true,
// the zIndex of echarts layer for AMap, default value is 2000.
// deprecated since v1.9.0, use `echartsLayerInteractive` instead.
echartsLayerZIndex: 2000,
// whether echarts layer is interactive. Default value is true
// supported since v1.9.0
echartsLayerInteractive: true,
// whether to enable large mode. Default value is false
// supported since v1.9.0
largeMode: false
// Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
// There are some bugs about it, we can use `amap.add` instead.
// Refer to the codes at the bottom.
// More initial options...
},
visualMap: {
show: true,
right: 20,
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
animation: false,
series: [
{
type: 'heatmap',
// use `amap` as the coordinate system
coordinateSystem: 'amap',
data: [],
pointSize: 5,
blurSize: 6
}
]
};
// initialize echarts
var chart = echarts.init(document.getElementById('echarts-amap'));
// fetch the heatmap data
$.get(heatmapDataURI, function (data) {
// convert
var points = [].concat.apply([], data.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
}));
// set the data for heatmap
option.series[0].data = points;
chart.setOption(option);
// get AMap extension component
var amapComponent = chart.getModel().getComponent('amap');
// get the instance of AMap
var amap = amapComponent.getAMap();
// operations below are the same as amap
amap.addControl(new AMap.Scale());
amap.addControl(new AMap.ToolBar());
// add layers
// var satelliteLayer = new AMap.TileLayer.Satellite();
// var roadNetLayer = new AMap.TileLayer.RoadNet();
// amap.add([satelliteLayer, roadNetLayer]);
// Add a marker to map
// amap.add(new AMap.Marker({
// position: [115, 35]
// }));
// Make the overlay layer of AMap interactive
// amapComponent.setEChartsLayerInteractive(false);
});
</script>
</body>
</html>