火灾蔓延

src/api/forest.js

@@ -18,6 +18,13 @@ export function fireControlViewPoint(type, name) {
     }
   })
 }
+export function getNewDataByDate(data) {
+  return request({
+    url: '/center-event/spread/getNewDataByDate?Date='+data,
+    method: 'get',
+
+  })
+}
 // 搜索物资
 export function listResourceByWz(param) {
   return request({

src/components/supermap.vue

@@ -42,43 +42,43 @@
             <input type="text" class="form-control" id="heatNums1" value="6"/>
           </div>
         </div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">温度</span>
-		    <input type="text" class="form-control" id="heatNums2" value="10℃"/>
-		  </div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">湿度</span>
-		    <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
-		  </div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">持续时间</span>
-		    <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
-		  </div>
-		</div>
-		<div class="panel">
-		<div class="input-group">
-		  <span class="input-group-addon">植被类型</span>
-		  <select class="form-control" style="width:auto" id="heatNums5">
-		    <option value="1">针叶林</option>
-		    <option value="31">落叶林</option>
-		  </select>
-		</div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">大气压</span>
-		    <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
-		  </div>
-		</div>
-		<div class="panel">
-        <el-button type="success" @click="createHeatPoints">分析</el-button>
-        <el-button type="success" @click="clearHeatPoints">重置</el-button>
-		</div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">温度</span>
+            <input type="text" class="form-control" id="heatNums2" value="10℃"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">湿度</span>
+            <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">持续时间</span>
+            <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">植被类型</span>
+            <select class="form-control" style="width:auto" id="heatNums5">
+              <option value="1">针叶林</option>
+              <option value="31">落叶林</option>
+            </select>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">大气压</span>
+            <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
+          </div>
+        </div>
+        <div class="panel">
+          <el-button type="success" @click="createHeatPoints">分析</el-button>
+          <el-button type="success" @click="clearHeatPoints">重置</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -106,6 +106,8 @@ export default {
   name: 'sookaSuperMap',
   data() {
     return {
+      windDirection:'',
+      windSpeed:null,
       plottingdrawControl: null,
       plottingLayer: null,
       mapDivId: '',
@@ -131,6 +133,7 @@ export default {
       isheatPlotting: false,//火灾蔓延
       heat_lat: 0, //火灾蔓延经纬度
       heat_lng: 0, //火灾蔓延经纬度
+      aac:null,
       host:''
     }
   },
@@ -372,10 +375,13 @@ export default {
     //     that.map.doubleClickZoom.enable()
     //   })
     // },
-    showheatPlotting: function(heat_lat, heat_lng) {
+    showheatPlotting:  function(heat_lat, heat_lng,windSpeed,windDirection) {
+      console.log(heat_lat, heat_lng,windSpeed,windDirection)
       this.heat_lat = heat_lat
       this.heat_lng = heat_lng
-      this.isheatPlotting = true
+      this.windDirection = windDirection
+      this.windSpeed = windSpeed
+      this.createHeatPoints()
     },
     createHeatPoints: function() {
       let that = this
@@ -399,29 +405,29 @@ export default {
 
       var features = []
 
-      switch (heatNums) {
-        case 1://南风
+      switch (that.windDirection) {
+        case '南风'://南风
           features = that.getPointArray1()
           break
-        case 31://西南风
+        case '西南风'://西南风
           features = that.getPointArray3_1()
           break
-        case 41://东南风
+        case '东南风'://东南风
           features = that.getPointArray4_1()
           break
-        case 2://北风
+        case '北风'://北风
           features = that.getPointArray2()
           break
-        case 32://西北风
+        case '西北风'://西北风
           features = that.getPointArray3_2()
           break
-        case 42://东北风
+        case '东北风'://东北风
           features = that.getPointArray4_2()
           break
-        case 3://西风
+        case '西风'://西风
           features = that.getPointArray3()
           break
-        case 4://东风
+        case '东风'://东风
           features = that.getPointArray4()
           break
       }
@@ -441,7 +447,7 @@ export default {
     },
 
     getPointArray1: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+      var heatNums1 = this.windSpeed
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -453,7 +459,7 @@ export default {
       return points
     },
     getPointArray3_1: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+      var heatNums1 = this.windSpeed
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -466,7 +472,7 @@ export default {
       return points
     },
     getPointArray4_1: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+      var heatNums1 = this.windSpeed
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -479,7 +485,7 @@ export default {
       return points
     },
     getPointArray2: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+      var heatNums1 = this.windSpeed
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -491,7 +497,7 @@ export default {
       return points
     },
     getPointArray3_2: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+      var heatNums1 = this.windSpeed
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -504,7 +510,7 @@ export default {
       return points
     },
     getPointArray4_2: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+      var heatNums1 = this.windSpeed
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -517,7 +523,10 @@ export default {
       return points
     },
     getPointArray3: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+
+      var heatNums1 = this.windSpeed
+      console.log(heatNums1)
+
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -530,7 +539,7 @@ export default {
 
     },
     getPointArray4: function() {
-      var heatNums1 = parseInt($('#heatNums1').val())
+      var heatNums1 = this.windSpeed
       var mLon = this.heat_lng, mLat = this.heat_lat
       var points = []
       for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
@@ -620,19 +629,19 @@ export default {
         if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
           this.isAggregationMyGroup.clearLayers()
         }
-          this.map.removeLayer(this.isAggregationLayers)
-          this.isAggregationLayers = []
-          this.radiusLayers = []
-          this.isAggregationLayers = window.L.markerClusterGroup({
-            //设置为true时显示聚类所占据的范围
-            showCoverageOnHover: true,
-            //设置为true时会向低一级聚类缩放
-            zoomToBoundsOnClick: true,
-            //增加点位时增加聚合动画（否则会出问题）
-            animateAddingMarkers: true,
-            //最大缩放级别点击聚合图标展开图标
-            spiderfyOnMaxZoom: true
-          })
+        this.map.removeLayer(this.isAggregationLayers)
+        this.isAggregationLayers = []
+        this.radiusLayers = []
+        this.isAggregationLayers = window.L.markerClusterGroup({
+          //设置为true时显示聚类所占据的范围
+          showCoverageOnHover: true,
+          //设置为true时会向低一级聚类缩放
+          zoomToBoundsOnClick: true,
+          //增加点位时增加聚合动画（否则会出问题）
+          animateAddingMarkers: true,
+          //最大缩放级别点击聚合图标展开图标
+          spiderfyOnMaxZoom: true
+        })
       } else {
         if (this.myGroup != undefined && this.myGroup != false) {
           this.myGroup.clearLayers()
@@ -1054,6 +1063,71 @@ export default {
       }
       _that.map.addLayer(_that.isAggregationLayers)
     },
+    setMarkersA: function(markersList) { //地图标点
+      const _that = this
+      for (let i = 0; i < markersList.length; i++) {
+        let isAggregation = markersList[i].isAggregation == null ? false : markersList[i]
+          .isAggregation //是否聚合点位
+        let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示
+
+        let icon = new window.L.Icon({
+          iconUrl: iconList[markersList[i].icon],
+          iconSize: [48, 48],
+          iconAnchor: [24, 40],
+          popupAnchor: [-3, -40],
+          shadowSize: [41, 41]
+        })
+        let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
+          icon: icon
+        })
+
+        markerClick.on('mouseover', function() {
+          let a = "";
+          _that.aac = setInterval(function (){
+            var color = "green";
+            var value = Math.random();
+            var up = "▲";
+            var down = "▼";
+            if(value>0.5){
+              color = "red";
+              value = value +""+ up;
+            }else{
+              value = value +""+ down;
+            }
+            a = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
+            markerClick.bindPopup(a).openPopup(markerClick.getLatLng());
+            console.log(this);
+          },500);
+        }).on('mouseout', function() {
+          clearInterval(_that.aac);
+          this.closePopup();
+        })
+        if (markersList[i].click != null && markersList[i].click !== '') {
+          if (markersList[i].parameter != null && markersList[i].parameter !== '') {
+            markerClick.on('click', function() {
+              let clickName = markersList[i].click
+              _that.$emit(clickName, markersList[i].parameter)
+            })
+          } else {
+            markerClick.on('click', function() {
+              let clickName = markersList[i].click
+              _that.$emit(clickName)
+            })
+          }
+        }
+        if (isAggregation) {
+          _that.isAggregationLayers.addLayer(markerClick)
+          _that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
+        } else {
+          _that.layers.push(markerClick)
+          _that.myGroup = window.L.layerGroup(_that.layers)
+        }
+      }
+      if (_that.myGroup != undefined && _that.myGroup != false) {
+        _that.map.addLayer(_that.myGroup)
+      }
+      _that.map.addLayer(_that.isAggregationLayers)
+    },
     setMarkersByType: function(markersList, type) { //地图标点(根据类型,可取消落点 clearMByType方法)
       const _that = this
       let lay = []
@@ -1277,22 +1351,22 @@ export default {
     },
     dynamicPlotting: function() {
       setTimeout(() => {
-          var host = this.host
-          var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
+        var host = this.host
+        var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
 
-          var me = this
-          this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
-            serverUrl)
-          this.plottingLayer.spatialAnalystUrl =
-            host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
-          this.plottingLayer.addTo(this.map)
-          this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
-            .plottingLayer)
-          this.plottingdrawControl.addTo(this.map)
-          var editControl = window.L.supermap.plotting.editControl()
-          editControl.addTo(this.map)
-          window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
-            .plottingdrawControl)
+        var me = this
+        this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
+          serverUrl)
+        this.plottingLayer.spatialAnalystUrl =
+          host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
+        this.plottingLayer.addTo(this.map)
+        this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
+          .plottingLayer)
+        this.plottingdrawControl.addTo(this.map)
+        var editControl = window.L.supermap.plotting.editControl()
+        editControl.addTo(this.map)
+        window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
+          .plottingdrawControl)
       }, 2000)
     }
     /** ----------------------------------动态绘制结束------------------------------------- */
@@ -1303,30 +1377,30 @@ export default {
 <style lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 .panel{
-	margin-bottom: .5rem;
-	button{
-		margin-top: .5rem;
-	}
-	.input-group{
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		.input-group-addon{
-			color: $inBlue;
-			width: 3rem;
-			text-align: right;
+  margin-bottom: .5rem;
+  button{
+    margin-top: .5rem;
+  }
+  .input-group{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .input-group-addon{
+      color: $inBlue;
+      width: 3rem;
+      text-align: right;
 
-		}
-		.form-control{
-			padding: 0 .3rem;
-			margin-left: .5rem;
-			height: 1.5rem;
-			line-height: 1.5rem;
-			background-color: #112543;
-			color: $inBlue;
-			border: 1px $searchBorder;
-		}
-	}
+    }
+    .form-control{
+      padding: 0 .3rem;
+      margin-left: .5rem;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      background-color: #112543;
+      color: $inBlue;
+      border: 1px $searchBorder;
+    }
+  }
 }
 
 .button-group {

src/views/forest.vue

@@ -607,6 +607,7 @@ export default {
     },
     getFirespread(eventCode) {
       this.$refs.firespread.showEventDialog(eventCode);
+      this.$refs.firespread.fireControlViewList()
     },
     getCurrentDataStr() {
       let date = new Date()