GISFramework/windyShield.html at master · CSNight/GISFramework · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风场图</title>
    <link rel="stylesheet" href="docs/libs/layui/css/layui.css">
    <link rel="stylesheet" href="src/leaflet/leaflet.css"/>
    <link rel="stylesheet" href="docs/css/style.css">
    <script src="docs/libs/jquery-3.4.1.min.js"></script>
    <script src="docs/libs/layui/layui.all.js"></script>
    <script src="src/leaflet/leaflet-src.js"></script>
    <script src="src/plugins/supermap/iclient-leaflet.js"></script>
    <script src="docs/t-gis/tmap.js"></script>
</head>
<body>
<div id="map" style=";width:100%;height:800px"></div>
<div class="layui-card ctr-panel" style="width: 200px;min-height: 120px;padding: 10px">
    速度：
    <div id="speed" style="height: 20px;width: 150px;margin: 10px"></div>
    密度：
    <div id="density" style="height: 20px;width: 150px;margin: 10px"></div>
    拖尾：
    <div id="tailLength" style="height: 20px;width: 150px;margin: 10px"></div>
    宽度：
    <div id="windWidth" style="height: 20px;width: 150px;margin: 10px"></div>
</div>
<script>
    T.createMap('map',);
    T.map.setView([35, 114], 7);
    T.map.addControl(T.controls.pointer());
    let supermapLayer = T.cusTileLayer("T-Geoq.Normal.PurplishBlue", {
        maxZoom: 18,
        minZoom: 0
    }, false);
    T.map.addLayer(supermapLayer);
    T.map.setView([0, 0], 2);
    let flowField = new T.vis.FlowField();
    $.getJSON("docs/asset/wind.json", function (data) {
        setTimeout(function () {
            flowField.setOptions({
                map: T.map,
                data: data
            })

            flowField.start(T.map.getBounds())

        }, 100)
    });

    layui.slider.render({
        elem: '#speed',
        min: 1,
        max: 100,
        value: flowField.getSpeed(),
        change: function (value) {
            flowField.setSpeed(value);
        }
    });
    layui.slider.render({
        elem: '#density',
        min: 100,
        max: 500,
        value: 1 / flowField.getDensity(),
        change: function (value) {
            flowField.stop()
            flowField.setDensity(value);
            flowField.start(T.map.getBounds())
        }
    });
    layui.slider.render({
        elem: '#tailLength',
        min: 5,
        max: 10,
        value: Math.floor(flowField.getWindTail() * 10),
        change: function (value) {
            flowField.setWindTail(value / 10);
        }
    });
    layui.slider.render({
        elem: '#windWidth',
        min: 1,
        max: 10,
        value: flowField.getWidth(),
        change: function (value) {
            flowField.setWidth(value);
        }
    });
</script>
</body>
</html>