visualization/heatmap.html at main · StevenceTanKe/visualization · GitHub

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
<!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>heat map</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button class="btn" onclick="heatmap.show()">Show Heat Map</button>
    </div>
    <div class="input-item">
        <button class="btn" onclick="heatmap.hide()">Close Heat Map</button>
    </div>
</div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=4ac30f2d0e3b3f9f5b3d8b2fee881d87"></script>
<script src="heatmapData.js"></script>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        // center: [113.545515, 22.191844],
        center: [113.54848,22.185],
        zoom: 14
    });

    if (!isSupportCanvas()) {
        alert('The heat map is only applicable to browsers that support canvas. ' +
            'The heat map function cannot be used in the browser you are using. ' +
            'Please try another browser~~')
    }

    var heatmap;
    map.plugin(["AMap.Heatmap"], function () {
        // Initialize heatmap object
        heatmap = new AMap.Heatmap(map, {
            radius: 25,
            opacity: [0, 0.8],
            gradient:{
                0.2: 'blue',
                0.3: 'rgb(117,211,248)',
                0.4: 'rgb(0, 255, 0)',
                0.5: '#ffea00',
                0.8: 'rgb(255,90,0)',
                1.0: 'red'
            }
        });
        // Set the data set:
        // This data is Macau attractions data
        heatmap.setDataSet({
            data: heatmapData,
            max: 44
        });
    });

    // Judge whether the browsing area supports canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
</script>
</body>
</html>