visualization/route_multiday_tour.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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; 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>Optimal route for multi-day tour</title>
    <style>
        html, body, #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .amap-icon img {
            width: 25px;
            height: 34px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=4ac30f2d0e3b3f9f5b3d8b2fee881d87&plugin=Map3D"></script>
<script type="text/javascript" src="route_multiday_tour.js"></script>
<script>
    var points = []; // Used to store map points
    var names = [];  // Used to store location names

    multidayData.forEach(function (item) {
        points.push(new AMap.LngLat(item.lng, item.lat));
        names.push(item.Attraction);
    });

    var map = new AMap.Map('container', {
        center: [113.54848, 22.185],
        zoom: 15,
        viewMode: '3D',
        pitch: 30
    });

    var object3Dlayer = new AMap.Object3DLayer();

    points.forEach(function (point, index) {
        if (index < points.length - 1) {
            var segmentPoints = [points[index], points[index + 1]];
            var meshLine = new AMap.Object3D.MeshLine({
                path: segmentPoints,
                height: [5, 5],
                color: 'rgba(55,129,240, 0.9)',
                width: 5
            });
            meshLine.transparent = true;
            object3Dlayer.add(meshLine);
        }
    });

    map.add(object3Dlayer);


    //Create different markers based on the position of the point
    points.forEach(function (point, index) {
        let iconUrl = '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png';
        let imageOffset = new AMap.Pixel(-13, -30);

        if (index === 0 || index === points.length - 1) {
            if (index === 0) { // starting point
                iconUrl = '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png';
                imageOffset = new AMap.Pixel(-9, -3);
            } else if (index === points.length - 1) { //end point
                iconUrl = '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png';
                imageOffset = new AMap.Pixel(-95, -3);
            }
            var markerContent = ''
            var marker = new AMap.Marker({
                position: point,
                icon: new AMap.Icon({
                    size: new AMap.Size(25, 34),
                    image: iconUrl,
                    imageSize: new AMap.Size(135, 40),
                    imageOffset: imageOffset
                }),
                content: markerContent,
                offset: new AMap.Pixel(-13, -30)
            });
        } else {
            var marker = new AMap.Marker({
                position: point,
                icon: iconUrl,
                offset: new AMap.Pixel(-13, -30)
            });
        }

        marker.setTitle(names[index]);

        marker.setLabel({
            offset: new AMap.Pixel(2, 2),
            content: names[index],
            direction: 'top'
        });

        map.add(marker);
    });
</script>
</body>
</html>