tpov/visualization_template_zh.html at main · CyrilSLi/tpov · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tpov 匹配可视化</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/leaflet/leaflet.css" />
    <script src="assets/leaflet/leaflet.js"></script>
    <style>
        html, body {
            margin: 0px;
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
        }
        #map {
            flex: 1;
        }
    </style>
</head>
<body>
    <noscript><p>运行此网站需要启用 JavaScript。</p></noscript>
    <div id="map"></div>
    <script>
        var polyline = L.polyline (%points);
        var map = L.map ("map").fitBounds (polyline.getBounds ());
        var tk = null; // 可把null替换为您的密钥 (为了您的安全, 请不要公开带有密钥的代码)
        while (tk == null || tk == "") {
            tk = prompt ("请输入一个天地图浏览器端密钥：", localStorage.getItem ("browser_tk") || "");
        }
        localStorage.setItem ("browser_tk", tk);
        L.tileLayer ("http://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + tk, {
            subdomains: "01234567",
            maxZoom: 18
        }).addTo (map);
        L.tileLayer ("http://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + tk, {
            attribution: "转自天地图 <a href = 'https://www.tianditu.gov.cn'>https://www.tianditu.gov.cn</a>",
            subdomains: "01234567",
            maxZoom: 18
        }).addTo (map);
        var markers = %markers;
        polyline.addTo (map);
        for (var i = 0; i < markers.length; i++) {
            var marker = markers [i];
            L.marker ([marker.lat, marker.lon]).addTo (map).bindPopup (marker.text);
        }
    </script>
</body>
</html>