右下角老虎

火灾蔓延

src/assets/styles/base.scss

@@ -579,6 +579,24 @@ div::-webkit-scrollbar {
     height: 780px !important;
     position: absolute;
     z-index: 999;
+    button {
+      padding: 0 .3rem;
+      height: 1.5rem;
+      background-color: #112543;
+      color: $inBlue;
+      border: 1px $searchBorder;
+    }
+
+    button:hover {
+      text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
+    }
+    .fire-m{
+      position: absolute;
+      right: 1rem;
+      bottom: 1rem;
+      z-index:100000;
+
+    }
     //超图绘制截屏
     .leaflet-pane .leaflet-overlay-pane {
       height: 780px !important;

src/components/supermap.vue

@@ -17,6 +17,37 @@
         </div>
       </div>
     </div>
+
+    <div id="toolbar-heat" v-if="isheatPlotting" class="panel panel-primary"
+         style="position:absolute;z-index: 9999; padding: 1rem; bottom:3rem;right: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
+      <div class="panel-body content">
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">风向</span>
+            <select class="form-control" style="width:auto" id="heatNums">
+              <option value="1">南风</option>
+              <option value="31">西南风</option>
+              <option value="41">东南风</option>
+              <option value="2">北风</option>
+              <option value="32">西北风</option>
+              <option value="42">东北风</option>
+              <option value="3">西风</option>
+              <option value="4">东风</option>
+            </select>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">风速</span>
+            <input type="text" class="form-control" id="heatNums1" value="20"/>
+          </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>
 </template>
 <script>
@@ -61,7 +92,11 @@ export default {
       isEditableLayers: false, //绘图控件
       drawControl: null, //绘图控件
       deckglLayer: null, //图层Layer
-      deckglLayerList: [] //图层Layer(数组)
+      deckglLayerList: [], //图层Layer(数组)
+      heatMapLayer: [], //火灾蔓延图层Layer
+      isheatPlotting: false,//火灾蔓延
+      heat_lat: 0, //火灾蔓延经纬度
+      heat_lng: 0 //火灾蔓延经纬度
     }
   },
   watch: {
@@ -247,6 +282,287 @@ export default {
     showLineLatLng: null
   },
   methods: {
+    /** ----------------------------------火势蔓延  开始------------------------------------- */
+    // initEditView: function() {
+    //   var that = this
+    //   var infoView = window.L.control({ position: 'topright' })
+    //   infoView.onAdd = function() {
+    //     that._div = L.DomUtil.create('div', 'editPane')
+    //     that._div.style.width = '236px'
+    //     that._div.innerHTML = '<div id="toolbar" class="panel panel-primary">' +
+    //       '<div class="panel-heading">' +
+    //       '<h5 class="panel-title text-center">' + resources.text_fastHeatMapLayer + '</h5></div>' +
+    //       '<div class="panel-body content">' +
+    //       '<div class="panel">' +
+    //       '<div class="input-group">' +
+    //       '<span class="input-group-addon">风向</span>' +
+    //       '<select class="form-control" style="width:auto" id="heatNums">' +
+    //       '<option value="1" >南风</option>' +
+    //       '<option value="2" >北风</option>' +
+    //       '<option value="3" >西风</option>' +
+    //       '<option value="4" >东风</option>' +
+    //       '</select>' +
+    //       '</div>' +
+    //       '</div>' +
+    //       '<div class="panel">' +
+    //       '<div class="input-group">' +
+    //       '<span class="input-group-addon">风速</span>' +
+    //       '<input type="text" class="form-control" id="heatNums1" value="20"/>' +
+    //       '</div>' +
+    //       '</div>' +
+    //
+    //       '<input type="button" class="btn btn-default" value="' + resources.btn_startDraw + '" onclick ="'+that.createHeatPoints()+'"/>&nbsp; &nbsp;' +
+    //       '<input type="button" class="btn btn-default" value="' + resources.text_input_value_clear + '" onclick ="'+that.clearHeatPoints()+'"/>' +
+    //       '</div>' +
+    //       '</div>'
+    //     that.handleMapEvent(that._div, that.map)
+    //     return that._div
+    //   }
+    //   infoView.addTo(that.map)
+    // },
+    // handleMapEvent: function(div, map) {
+    //   let that = this
+    //   if (!div || !map) {
+    //     return
+    //   }
+    //   div.addEventListener('mouseover', function() {
+    //     that.map.dragging.disable()
+    //     that.map.scrollWheelZoom.disable()
+    //     that.map.doubleClickZoom.disable()
+    //   })
+    //   div.addEventListener('mouseout', function() {
+    //     that.map.dragging.enable()
+    //     that.map.scrollWheelZoom.enable()
+    //     that.map.doubleClickZoom.enable()
+    //   })
+    // },
+    showheatPlotting: function(heat_lat, heat_lng) {
+      this.heat_lat = heat_lat
+      this.heat_lng = heat_lng
+      this.isheatPlotting = true
+    },
+    createHeatPoints: function() {
+      let that = this
+      that.clearHeatPoints()
+      that.heatMapLayer = new window.L.supermap.heatMapLayer(
+        'heatMap',
+        {
+          'map': that.map,
+          'id': 'heatmap',
+          'radius': 10,
+//            设置图层透明度：（参数方式）
+          'opacity': 0.5,
+          //featureWeight指定以哪个属性值为热力权重值创建热力图：
+          'featureWeight': 'value'
+        }
+      )
+      var heatNums = parseInt($('#heatNums').val())
+      //热力半径单位不使用用地理单位
+      that.heatMapLayer.useGeoUnit = true
+      that.heatMapLayer.radius = 0.01
+
+      var features = []
+
+      switch (heatNums) {
+        case 1://南风
+          features = that.getPointArray1()
+          break
+        case 31://西南风
+          features = that.getPointArray3_1()
+          break
+        case 41://东南风
+          features = that.getPointArray4_1()
+          break
+        case 2://北风
+          features = that.getPointArray2()
+          break
+        case 32://西北风
+          features = that.getPointArray3_2()
+          break
+        case 42://东北风
+          features = that.getPointArray4_2()
+          break
+        case 3://西风
+          features = that.getPointArray3()
+          break
+        case 4://东风
+          features = that.getPointArray4()
+          break
+      }
+
+      //加载heatMapFeature格式数据：
+      that.heatMapLayer.addFeatures(features)
+      that.heatMapLayer.addTo(that.map)
+
+    },
+
+    clearHeatPoints: function() {
+      let that = this
+      if (that.heatMapLayer) {
+        that.map.removeLayer(that.heatMapLayer)
+        that.heatMapLayer = null
+      }
+    },
+
+    getPointArray1: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accAdd(mLat, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray3_1: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accAdd(mLat, 0.005)
+        mLon = this.accAdd(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray4_1: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accAdd(mLat, 0.005)
+        mLon = this.accSub(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray2: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accSub(mLat, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray3_2: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accSub(mLat, 0.005)
+        mLon = this.accAdd(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray4_2: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLat = this.accSub(mLat, 0.005)
+        mLon = this.accSub(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+    },
+    getPointArray3: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLon = this.accAdd(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+
+    },
+    getPointArray4: function() {
+      var heatNums1 = parseInt($('#heatNums1').val())
+      var mLon = this.heat_lng, mLat = this.heat_lat
+      var points = []
+      for (var i = 0; i < parseInt(heatNums1 / 3); i++) {
+        mLon = this.accSub(mLon, 0.005)
+        points[i] = new window.L.supermap.heatMapFeature(L.point(mLon, mLat), {
+          'value': 2000 - (i * Math.random())
+        })
+      }
+      return points
+
+    },
+    //加法函数，用来得到精确的加法结果
+//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
+//调用：accAdd(arg1,arg2)
+//返回值：arg1加上arg2的精确结果
+    accAdd: function(arg1, arg2) {
+      var r1, r2, m, c
+      try {
+        r1 = arg1.toString().split('.')[1].length
+      } catch (e) {
+        r1 = 0
+      }
+      try {
+        r2 = arg2.toString().split('.')[1].length
+      } catch (e) {
+        r2 = 0
+      }
+      c = Math.abs(r1 - r2)
+      m = Math.pow(10, Math.max(r1, r2))
+      if (c > 0) {
+        var cm = Math.pow(10, c)
+        if (r1 > r2) {
+          arg1 = Number(arg1.toString().replace('.', ''))
+          arg2 = Number(arg2.toString().replace('.', '')) * cm
+        } else {
+          arg1 = Number(arg1.toString().replace('.', '')) * cm
+          arg2 = Number(arg2.toString().replace('.', ''))
+        }
+      } else {
+        arg1 = Number(arg1.toString().replace('.', ''))
+        arg2 = Number(arg2.toString().replace('.', ''))
+      }
+      return (arg1 + arg2) / m
+    },
+    /**
+     ** 减法函数，用来得到精确的减法结果
+     ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。
+     ** 调用：accSub(arg1,arg2)
+     ** 返回值：arg1加上arg2的精确结果
+     **/
+    accSub: function(arg1, arg2) {
+      var r1, r2, m, n
+      try {
+        r1 = arg1.toString().split('.')[1].length
+      } catch (e) {
+        r1 = 0
+      }
+      try {
+        r2 = arg2.toString().split('.')[1].length
+      } catch (e) {
+        r2 = 0
+      }
+      m = Math.pow(10, Math.max(r1, r2)) //last modify by deeka //动态控制精度长度
+      n = r1 >= r2 ? r1 : r2
+      return ((arg1 * m - arg2 * m) / m).toFixed(n)
+    },
+    /** ----------------------------------火势蔓延  结束------------------------------------- */
+    /** ----------------------------------热力图  结束------------------------------------- */
     loadHeatMap: async function() {
       var heatNumbers = 150, heatRadius = 30
       var num = parseInt(heatNumbers)
@@ -262,6 +578,7 @@ export default {
         minOpacity: 0.5
       }).addTo(this.map)
     },
+    /** ----------------------------------热力图  开始------------------------------------- */
     clearM: async function(isAggregation) { //清理地图标点
       if (isAggregation) {
         if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
@@ -938,6 +1255,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;
+			
+		}
+		.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 {
   button {

src/views/datacenter.vue

@@ -60,11 +60,11 @@
         </div>
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
-      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
-        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
-          src="@/assets/images/mascot.png"/>
-        </div>
-      </el-tooltip>
+<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
+<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
+<!--          src="@/assets/images/mascot.png"/>-->
+<!--        </div>-->
+<!--      </el-tooltip>-->
 
     </div>
     <eventLocation ref="eventLocation"></eventLocation>

src/views/eventdetailsdialog.vue

@@ -56,6 +56,10 @@
                 <!--   <div class="dia-left-btm-tool">
                    </div> -->
                 <!-- 底部工具栏end -->
+                <div class="fire-m">
+                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延
+                  </el-button>
+                </div>
                 <!-- 地图 -->
                 <supermapDialog ref="supermapDialog"
                                 style="position: absolute; top:0;left: 0;"
@@ -1088,6 +1092,13 @@ export default {
     calendarDay: null//首页日历选择
   },
   methods: {
+    showheatPlotting(){
+      if(!this.$refs.supermapDialog.isheatPlotting){
+        this.$refs.supermapDialog.showheatPlotting(this.latitude,this.longitude)
+      }else{
+        this.$refs.supermapDialog.isheatPlotting = false
+      }
+    },
     showUpdateYjYuAn() {
       listYuAn().then(res => {
         //关联预案列表

src/views/monitor.vue

@@ -110,10 +110,10 @@
         </div>
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
-      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
-        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
-          src="@/assets/images/mascot.png"/></div>
-      </el-tooltip>
+<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
+<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
+<!--          src="@/assets/images/mascot.png"/></div>-->
+<!--      </el-tooltip>-->
 
     </div>
     <eventLocation ref="eventLocation"></eventLocation>