Merge branch 'dev'

Author: TwSphinx54

README.md

@@ -102,6 +102,10 @@ conda remove -n <gndas_env> --all --y
 
    <img src="./imgs/risk.png">
 
+   此外，系统还提供了基于聚类灾害中心的区域风险评估交互分析。
+
+   <img src="./imgs/buffer.png">
+
 5. 进入用户论坛模块，用户可以在这里交流评论，该模块可以防御XSS攻击。
 
    <img src="./imgs/discuss.png">

imgs/buffer.png

@@ -66,7 +66,10 @@
 <!--缓冲区--><!--
 <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;半径：</label>
 <input name="radius" id="radius" class="txt" value="radius"/>-->
-<button id="buffer_btn" class="buffer_btn" onclick="showbuffer()">缓冲区</button>
+<!--<button id="buffer_btn" class="buffer_btn" onclick="showbuffer()">缓冲区</button>-->
+<div class="buffer">
+    <label>区域风险评估&nbsp;&nbsp;<input class="mui-switch mui-switch-animbg" type="checkbox" id="buffer_checkbox"></label>
+</div>
 
 <script>
     let vol_o = {{ vol | tojson }}
@@ -197,6 +200,7 @@
     }
 
     const heat_type = document.getElementsByClassName('heat_type');
+    const box=document.getElementById("buffer_checkbox");
 
     let flag = [true, false, false, false]
     heat_type[0].classList.add('clicked');
@@ -207,12 +211,21 @@
             switch (i) {
                 case 0:
                     Volcano_Charts();
+                    if(box.checked){
+                        showbuffer(vol_o,500)
+                    }
                     break;
                 case 1:
                     Earthquake_Charts();
+                    if(box.checked){
+                        showbuffer(eqk_o,100)
+                    }
                     break;
                 case 2:
                     Tsunami_Charts();
+                    if(box.checked){
+                        showbuffer(tnm_o,500)
+                    }
                     break;
             }
             if (flag[i] === false) {
@@ -271,6 +284,28 @@
     }
     $('#slider').RangeSlider({min: 0, max: 100, step: 1, callback: change});
     let slide_value = document.getElementById("slider");
+
+
+    //改变缓冲区状态
+    $("#buffer_checkbox").change(function () {
+        if(box.checked){
+        let temp_buffer = flag.indexOf(true);
+        switch (temp_buffer) {
+            case 0:
+                showbuffer(vol_o,500)
+                break;
+            case 1:
+                showbuffer(eqk_o,100)
+                break;
+            case 2:
+                showbuffer(tnm_o,500)
+                break;
+        }
+    }
+    else
+        {RemoveLayers();
+        }
+    })
 </script>
 </body>
 </html>

webpage/risk.html

@@ -369,10 +369,11 @@ function Get_Cluster(pointdata) {
 }
 
 
-function showbuffer() {
-    const buffer_Id = "polygon"
-    const center_Id = "point"
-     for(let k=0;k<100;k++){
+const buffer_Id = "polygon"
+const center_Id = "point"
+
+function RemoveLayers() {
+    for (let k = 0; k < 100; k++) {
 
         if (heatmap.getLayer(buffer_Id + k)) // 不存在 source => undefined
         {
@@ -389,20 +390,25 @@ function showbuffer() {
         if (heatmap.getSource(center_Id + k)) // 不存在 source => undefined
         {
             heatmap.removeSource(center_Id + k)
-        }}
-    let temp_buffer = flag.indexOf(true);
-    let cluster_center=Get_Cluster(vol_o);
-        switch (temp_buffer) {
-            case 0:
-                cluster_center = Get_Cluster(vol_o)
-                break;
-            case 1:
-                cluster_center = Get_Cluster(eqk_o)
-                break;
-            case 2:
-                cluster_center = Get_Cluster(tnm_o)
-                break;
         }
+    }
+}
+
+
+function showbuffer(pointdata,rr) {
+
+    RemoveLayers();
+    cc = turf.clustersKmeans(pointdata)
+    cluster_num = []
+    cluster_center = []
+    for (let i = 0; i < cc.features.length; i++) {
+        let temp_id = cc['features'][i]['properties']["cluster"];
+        let temp_center = cc['features'][i]['properties']["centroid"];
+        if (cluster_num.indexOf(temp_id) == -1) {
+            cluster_num.push(temp_id)
+            cluster_center.push(temp_center)
+        }
+    }
 
     for (let i = 0; i < cluster_center.length; i++) {
         let temp_lng = cluster_center[i][0]
@@ -411,7 +417,7 @@ function showbuffer() {
         var point = turf.point([parseFloat(temp_lng), parseFloat(temp_lat)]);
 
         //创建缓冲区面
-        var buffered = turf.buffer(point, 500, {units: "miles"});/*parseFloat(radius), {steps:2,units: units});*/
+        var buffered = turf.buffer(point, radius=rr, {units: "miles"});/*parseFloat(radius), {steps:2,units: units});*/
         //获取缓冲区面坐标数组
         var coordinates = buffered.geometry.coordinates[0];
         // 获取缓冲区四至
@@ -435,7 +441,7 @@ function showbuffer() {
         }
         //计算左下角到右上角的距离
         //var distance = turf.distance(turf.point(es), turf.point(wn), {units: "miles"});
-         //添加资源和图层
+        //添加资源和图层
 
         heatmap.addSource(buffer_Id + i, {
             'type': 'geojson',
@@ -460,7 +466,7 @@ function showbuffer() {
             'type': 'circle',
             'source': center_Id + i,
             'paint': {
-                'circle-radius': 6,
+                'circle-radius': 4,
                 'circle-color': '#B42222'
             }
         });

webpage/risk/Risk_Func.js

@@ -235,7 +235,89 @@ input.ne-range[type=range]::-webkit-slider-thumb {
 }
 
 #amount::-webkit-outer-spin-button,
-#amount::-webkit-inner-spin-button{
-	-webkit-appearance: none !important;
-	margin: 0;
+#amount::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0;
+}
+
+.buffer {
+    position: absolute;
+    bottom: 10%;
+    left: 23%;
+    width: 200px;
+    height: 40px;
+    color: rgba(255, 255, 255, 0.7);
+    font-family: Ubuntu, "Microsoft YaHei", serif;
+    font-weight: bold;
+    font-size: 20px;
+    backdrop-filter: blur(3px);
+    background-color: rgba(0, 0, 0, 0.3);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+label {
+    display: block;
+    vertical-align: middle;
+}
+
+label, input, select {
+    vertical-align: middle;
+}
+
+.mui-switch {
+    width: 50px;
+    height: 30px;
+    position: relative;
+    background-color: rgba(253, 253, 253, 0.7);
+    border-radius: 20px;
+    background-clip: content-box;
+    display: inline-block;
+    -webkit-appearance: none;
+    user-select: none;
+    outline: none;
+
+    cursor: pointer;
+}
+
+.mui-switch:before {
+    content: '';
+    width: 29px;
+    height: 29px;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    border-radius: 20px;
+    background-color: rgba(255, 255, 255, 0.7);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+.mui-switch:checked {
+    border-color: #1da1f2;
+    /*box-shadow: #1da1f2 0 0 0 16px inset;*/
+    background-color: #1da1f2;
+}
+
+.mui-switch:checked:before {
+    left: 21px;
+}
+
+.mui-switch.mui-switch-animbg {
+    transition: background-color ease 0.4s;
+}
+
+.mui-switch.mui-switch-animbg:before {
+    transition: left 0.3s;
+}
+
+.mui-switch.mui-switch-animbg:checked {
+    /*box-shadow: #dfdfdf 0 0 0 0 inset;*/
+    background-color: #1da1f2;
+    transition: border-color 0.4s, background-color ease 0.4s;
+}
+
+.mui-switch.mui-switch-animbg:checked:before {
+    transition: left 0.3s;
 }