vinagit_webgis_02_2020/leaflet.html at master · vinagit/vinagit_webgis_02_2020 · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Làm quen với leaflet</title>

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>

        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>

   <style>
       #mapid {
           height: 100vh;
        }
   </style>

    </head>
<body>
    <div id="mapid"></div>
    <div id="mapid2"></div>

    <script>
        //Khai bao map
        var map = L.map('mapid').setView( [11.173586, 107.158539] , 12);

        // khai bao ban do nen (tile map)
        // link tham khao: https://leaflet-extras.github.io/leaflet-providers/preview/
        var Basemap =  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });
        var Basemap2 =  L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
            maxZoom: 20,
            attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        });

        // tao group layers
        var Groupbasemap = L.layerGroup([ Basemap,Basemap2 ]);

        //tao control layers
        var baseMaps = {
            "ban do nen thu 1": Basemap,
            "ban do nen thu 2": Basemap2
        };

        //cach 1: addto(map)
        var baseMapControl = L.control.layers(baseMaps);  /* .addTo(map); */

        //cach 2: addLayer();
        map.addControl(baseMapControl);

        //add layer vao map
        map.addLayer(Basemap);
        map.addLayer(Basemap2);

        //Tao layer dang diem (marker)     L.marker([Lat,Lng]);
        var markerLocation = [10.779260, 106.644066];
        var marker = L.marker( markerLocation ).bindPopup('Hello I am marker!');
        map.addLayer(marker);

        //tao layer dang duong (polyline)
        var latlng =  [
            [10.779260, 106.644066],
            [10.779260, 106.644066],
            [10.775002, 106.646652]
        ];
        var polyline = L.polyline(latlng).bindPopup('Hello I am polyline!');;
        map.addLayer(polyline);

        //tao layer dang vung (polygon)
        var latlgnPolygon = [
            [10.779260, 106.644066],
            [10.776260, 106.644066],
            [10.776530, 106.654355],
            [10.779260, 106.644066]
        ]
        var polygon = L.polygon(latlgnPolygon).bindPopup('Hello I am polygon!');;
        map.addLayer(polygon);


    </script>
</body>
</html>