#20181214

dashboard/templates/dashboard/common/left_menu.html

@@ -102,8 +102,8 @@
                         <li {% if url_name == 'policy-timeline4' %}class="active"{% endif %}>
                             <a href="{% url 'policy-timeline4' %}">旱情空间分布</a>
                         </li>
-                        <li {% if url_name == 'policy-timeline4' %}class="active"{% endif %}>
+                        <li {% if url_name == 'policy-timeline5' %}class="active"{% endif %}>
-                            <a href="{% url 'policy-timeline4' %}">旱情分布动态变化</a>
+                            <a href="{% url 'policy-timeline5' %}">旱情分布动态变化</a>
                         </li>
                     </ul>
                 </li>

graphic/static/graphic/js/timeline5.js

@@ -0,0 +1,66 @@
+var results = [];
+var count = 0;
+for (var y = 1979; y < 2016; y++) {
+    for (var m = 1; m < 13; m++) {
+        var year = y.toString();
+        var month = m.toString();
+        var result = month.length < 2 ? year + '-' + month + '-spei' : year + month + '-spei';
+        results.push(result);
+    }
+}
+
+$(function () {
+
+    var map = L.map('map', {
+        center: [34.3632, 107.2377],
+        zoom: 9
+    });
+
+    L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {maxZoom: 18, minZoom: 5}).addTo(map);
+    L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {maxZoom: 18, minZoom: 5}).addTo(map);
+
+    var currentLayer = undefined;
+    var baojiLayer = L.tileLayer.wms('http://210.77.68.250:8080/geoserver/baoji/wms', {
+        layers: 'baoji:bj_county_boundary',
+        transparent: true,
+        format: 'image/png',
+        styles:'baoji:county_boundary'
+    });
+    map.addLayer(baojiLayer);
+    var countyLayer = L.tileLayer.wms('http://210.77.68.250:8080/geoserver/baoji/wms', {
+        layers: 'baoji:1979-1-spei',
+        transparent: true,
+        format: 'image/png',
+        styles: 'baoji:spei'
+    });
+    map.addLayer(countyLayer);
+    var handle = $("#custom-handle");
+
+    function slideLayer() {
+        function removeLayer(currentLayer, o) {
+            var old = currentLayer;
+            setTimeout(function () {
+                map.removeLayer(old);
+            }, 500)
+        }
+
+        if (currentLayer) {
+            removeLayer(currentLayer, 1);
+        }
+        currentLayer = L.tileLayer.wms('http://210.77.68.250:8080/geoserver/baoji/wms', {
+            layers: 'baoji:' + results[count],
+            transparent: true,
+            format: 'image/png',
+            styles: 'baoji:spei'
+        });
+        map.addLayer(currentLayer);
+        count += 1;
+        if (count > results.length) count = 0;
+    }
+
+    baojiLayer.bringToFront();
+    slideLayer();
+
+    setInterval(slideLayer, 1000);
+});
+

graphic/templates/graphic/timeline2.html

@@ -6,6 +6,8 @@
     <link href="{% static 'graphic/css/jquery-ui.css' %}" rel="stylesheet">
     <link href="{% static 'graphic/css/leaflet.timedimension.control.min.css' %}" rel="stylesheet">
     <link href="{% static 'graphic/css/timeline2.css' %}" rel="stylesheet">
+    <link href="{% static 'dashboard/css/legend.css' %}" rel="stylesheet">
+
 {% endblock %}
 {% block page_head %}降水量动态空间变化{% endblock %}
 {% block breadcrumb %}
@@ -23,6 +25,9 @@
         </div>
         <div class="ibox-content" style="padding: 0; position: relative;">
             <div id="map" style="width: 100%;height: 800px;">
+                <div class="legend">
+                    <img src="http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=30&LAYER=baoji:1979-1-rain&STYLE=baoji:rain">
+                </div>
             </div>
         </div>
     </div>

graphic/templates/graphic/timeline3.html

@@ -6,6 +6,8 @@
     <link href="{% static 'graphic/css/jquery-ui.css' %}" rel="stylesheet">
     <link href="{% static 'graphic/css/leaflet.timedimension.control.min.css' %}" rel="stylesheet">
     <link href="{% static 'graphic/css/timeline2.css' %}" rel="stylesheet">
+    <link href="{% static 'dashboard/css/legend.css' %}" rel="stylesheet">
+
 {% endblock %}
 {% block page_head %}气温动态空间变化{% endblock %}
 {% block breadcrumb %}
@@ -23,6 +25,9 @@
         </div>
         <div class="ibox-content" style="padding: 0; position: relative;">
             <div id="map" style="width: 100%;height: 800px;">
+                <div class="legend">
+                    <img src="http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=40&HEIGHT=10&LAYER=baoji:1979-1-temp&STYLE=baoji:temp">
+                </div>
             </div>
         </div>
     </div>

graphic/templates/graphic/timeline5.html

@@ -0,0 +1,43 @@
+{% extends 'dashboard/base.html' %}
+{% load static %}
+
+{% block add_css %}
+    <link href="{% static 'graphic/css/leaflet.css' %}" rel="stylesheet">
+    <link href="{% static 'graphic/css/jquery-ui.css' %}" rel="stylesheet">
+    <link href="{% static 'graphic/css/leaflet.timedimension.control.min.css' %}" rel="stylesheet">
+    <link href="{% static 'graphic/css/timeline2.css' %}" rel="stylesheet">
+    <link href="{% static 'dashboard/css/legend.css' %}" rel="stylesheet">
+
+{% endblock %}
+{% block page_head %}干旱指数动态空间变化{% endblock %}
+{% block breadcrumb %}
+    <li>
+        <a href="{% url 'dashboard-index' %}">首页</a>
+    </li>
+    <li class="active">
+        干旱指数动态空间变化
+    </li>
+{% endblock %}
+{% block content %}
+    <div class="ibox">
+        <div class="ibox-title">
+            <h5>干旱指数动态空间变化</h5>
+        </div>
+        <div class="ibox-content" style="padding: 0; position: relative;">
+            <div id="map" style="width: 100%;height: 800px;">
+                <div class="legend">
+                    <img src="http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=30&LAYER=baoji:1979-1-spei&STYLE=baoji:spei">
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block add_js %}
+    <script type="text/javascript" src="{% static 'graphic/js/jquery-ui.js' %}"></script>
+    <script type="text/javascript" src="{% static 'graphic/js/leaflet.js' %}"></script>
+    <script type="text/javascript" src="{% static 'graphic/js/iso8601.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'graphic/js/leaflet.ChineseTmsProviders.js' %}"></script>
+    <script type="text/javascript" src="{% static 'graphic/js/leaflet.timedimension.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'graphic/js/timeline5.js' %}"></script>
+{% endblock %}

policy/urls.py

@@ -9,5 +9,6 @@ urlpatterns = [
     path('drought/spi/chart/', views.drought_spi_chart, name='policy-drought-spi-chart'),
     path('drought/spi.json', views.drought_spi_json, name='policy-drought-spi-json'),
     path('timeline4/', views.timeline4, name='policy-timeline4'),
+    path('timeline5/', views.timeline5, name='policy-timeline5'),
 
 ]

policy/views.py

@@ -42,6 +42,10 @@ def drought_spi_chart(request):
 def timeline4(request):
     return render(request, 'graphic/timeline4.html')
 
+@login_required
+def timeline5(request):
+    return render(request, 'graphic/timeline5.html')
+
 @login_required
 def drought_spi_json(request):
     code = request.GET.get('code')