林班地图数据

src/components/supermap.vue

@@ -42,45 +42,53 @@
             <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>
+    <el-dialog title="林班数据" :visible.sync="showBanData" style="height:80%;" append-to-body>
+      <div v-for="(value, key ,index) in banDataList">
+        <tr v-if="value!=''">
+          <td>{{ key }}:</td>
+          <td><h5>{{ value }}</h5></td>
+        </tr>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -98,7 +106,7 @@ import {
   getSuperMap,
   iconList
 } from '@/api/components/supermap.js'
-import { selectConfigKey } from "@/api/system/config";
+import { selectConfigKey } from '@/api/system/config'
 // import {setToken} from '../plugins/auth'
 import modal from '@/plugins/modal'
 
@@ -106,6 +114,8 @@ export default {
   name: 'sookaSuperMap',
   data() {
     return {
+      showBanData: false, //林班数据弹层
+      banDataList: [], //林班数据
       plottingdrawControl: null,
       plottingLayer: null,
       mapDivId: '',
@@ -128,11 +138,15 @@ export default {
       drawControl: null, //绘图控件
       deckglLayer: null, //图层Layer
       deckglLayerList: [], //图层Layer(数组)
+
+      deckglLayerList_Data: [], //图层Layer(数组) 地图
+      resultLayer_Data: [], //数据图层Layer(数组) 数据
+
       heatMapLayer: [], //火灾蔓延图层Layer
       isheatPlotting: false,//火灾蔓延
       heat_lat: 0, //火灾蔓延经纬度
       heat_lng: 0, //火灾蔓延经纬度
-      host:''
+      host: ''
     }
   },
   watch: {
@@ -621,19 +635,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()
@@ -1265,8 +1279,10 @@ export default {
           this.deckglLayer.remove()
         }
       }
-      this.deckglLayer = window.L.supermap.tiledMapLayer(url, {})
-      this.map.addLayer(this.deckglLayer)
+      if (url != null) {
+        this.deckglLayer = window.L.supermap.tiledMapLayer(url, {})
+        this.map.addLayer(this.deckglLayer)
+      }
     },
     layerSwitchingList: function(urlList) { //图层切换数组  urlList 图层地址(数组)
       if (this.deckglLayerList != null && this.deckglLayerList.length > 0) {
@@ -1276,9 +1292,59 @@ export default {
       }
       if (urlList != null && urlList.length > 0) {
         for (let i = 0; i < urlList.length; i++) {
-          this.deckglLayer = window.L.supermap.tiledMapLayer(urlList[i], {})
-          this.deckglLayerList.push(this.deckglLayer)
-          this.map.addLayer(this.deckglLayer)
+          if (urlList[i] != null) {
+            this.deckglLayer = window.L.supermap.tiledMapLayer(urlList[i], {})
+            this.deckglLayerList.push(this.deckglLayer)
+            this.map.addLayer(this.deckglLayer)
+          }
+        }
+      }
+    },
+    layerSwitchingList_Data: function(banCheckList) { //图层切换数组  urlList 图层地址(数组)  带数据图层
+      let that = this
+      //清除地图图层
+      if (this.deckglLayerList_Data != null && this.deckglLayerList_Data.length > 0) {
+        for (let i = 0; i < this.deckglLayerList_Data.length; i++) {
+          this.deckglLayerList_Data[i].remove()
+        }
+      }
+      //清除数据图层
+      if (this.resultLayer_Data != null && this.resultLayer_Data.length > 0) {
+        for (let i = 0; i < this.resultLayer_Data.length; i++) {
+          this.resultLayer_Data[i].remove()
+        }
+      }
+      if (banCheckList != null && banCheckList.length > 0) {
+        for (let i = 0; i < banCheckList.length; i++) {
+          if (banCheckList[i].farmAddress != null) {
+            this.deckglLayer = window.L.supermap.tiledMapLayer(banCheckList[i].farmAddress, {})
+            this.deckglLayerList_Data.push(this.deckglLayer)
+            this.map.addLayer(this.deckglLayer)
+            var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
+              queryParameter: {
+                name: banCheckList[i].name,
+              },
+              datasetNames: banCheckList[i].datasetNames,
+              fromIndex : 0,
+              toIndex:999999999
+            })
+            window.L.supermap.featureService('http://121.36.228.94:8090/iserver/services/data-baishan/rest/data').getFeaturesBySQL(sqlParam, function(serviceResult) {
+              if (serviceResult.hasOwnProperty('result') && serviceResult.result.hasOwnProperty('features')) {
+                var html = ''
+                var resultLayer = window.L.geoJSON(
+                  serviceResult.result.features, {
+                    onEachFeature: function(feature, layer) {
+                      layer.on('dblclick', function(e) {
+                        that.showBanData=true
+                        that.banDataList=feature.properties
+                      })
+                    }
+                  }
+                ).addTo(that.map)
+                that.resultLayer_Data.push(resultLayer)
+              }
+            })
+          }
         }
       }
     },
@@ -1289,29 +1355,29 @@ export default {
     PlottingDrawCancel: function() {
       this.plottingdrawControl.handler.disable()
     },
-    getspuerMapHost(){
+    getspuerMapHost() {
       selectConfigKey('superMap.iserver.plot').then(res => {
-        this.host = res.data;
+        this.host = res.data
       })
     },
     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)
     }
     /** ----------------------------------动态绘制结束------------------------------------- */
@@ -1321,31 +1387,36 @@ 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;
 
-		}
-		.form-control{
-			padding: 0 .3rem;
-			margin-left: .5rem;
-			height: 1.5rem;
-			line-height: 1.5rem;
-			background-color: #112543;
-			color: $inBlue;
-			border: 1px $searchBorder;
-		}
-	}
+.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;
+
+    }
+
+    .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/components/vBottomMenu.vue

@@ -39,12 +39,12 @@
 						@click.stop="showDialog(fastMenu.click)">{{ fastMenu.name }}</a>
 					<div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
 						<el-button type="primary"
-							@click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo',true)"
-							class="nav-child-btn" plain>铁东
+							@click.stop="choseLayerSwitching(null,true)"
+							class="nav-child-btn" plain>矢量图
 						</el-button>
 						<el-button type="primary"
-							@click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo',true)"
-							class="nav-child-btn" plain>铁西
+							@click.stop="choseLayerSwitching('http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/baishanyingxiang',true)"
+							class="nav-child-btn" plain>影像图
 						</el-button>
 						<!-- 	<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                         @click.stop="closeChild"></el-button> -->
@@ -64,11 +64,10 @@
 							<div class="forestban-right">
 								<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchFB">
 								</el-input>
-								<el-checkbox-group v-model="banCheckList" @change="handleCheckedCitiesChangeBan">
-									<el-checkbox v-for="(fastMenu,index) in filterbanList"
-										label="http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo">
-										铁东
-									</el-checkbox>
+								<el-checkbox-group v-model="banCheckList_Data">
+                  <el-checkbox v-for="(item,index) in filterbanList" :label="item" @change="handleCheckedCitiesChangeBan_Data">
+                    {{ item.farmName }}
+                  </el-checkbox>
 								</el-checkbox-group>
 							</div>
 							<el-button type="danger" icon="el-icon-close"
@@ -386,9 +385,47 @@
 			return {
 				playVideo: '', //视频预览地址
 				showTcPlayer: false, //视频预览弹窗
+
 				filterbanText: '',
 				filterchangText: '',
-				filterbanList: [],
+				filterbanList: [
+          {
+            farmAddress:"http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/qidaojiangzhen",
+            farmName:"七道江镇",
+            datasetNames: ["bs:qidaojiangzhen"],
+            name: "qidaojiangzhen@bs",
+          },
+          {
+            farmAddress:"http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/sandaogouzhen",
+            farmName:"三道沟镇",
+            datasetNames: ["bs:sandaogouzhen"],
+            name: "sandaogouzhen@bs",
+          },
+          {
+            farmAddress:"http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/liudaojiangzhen",
+            farmName:"六道江镇",
+            datasetNames: ["bs:liudaojiangzhen"],
+            name: "liudaojiangzhen@bs",
+          },
+          {
+            farmAddress:"http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/banshijiedao",
+            farmName:"板石街道",
+            datasetNames: ["bs:banshijiedao"],
+            name: "banshijiedao@bs",
+          },
+          {
+            farmAddress:"http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/hekoujiedao",
+            farmName:"河口街道",
+            datasetNames: ["bs:hekoujiedao"],
+            name: "hekoujiedao@bs",
+          },
+          {
+            farmAddress:"http://121.36.228.94:8090/iserver/services/map-baishan/rest/maps/hongtuyazhen",
+            farmName:"红土崖镇",
+            datasetNames: ["bs:hongtuyazhen"],
+            name: "hongtuyazhen@bs",
+          }
+        ],
 				filterchangList: [],
 				filterchangListAll: [],
 				eventId: null,
@@ -489,6 +526,7 @@
 					label: 'label'
 				},
 				banCheckList: [], //林班
+        banCheckList_Data: [], //林班  带数据图层
 				changCheckList: [], //林场
 				searchFB: '',
 				filterchang: '', //林场搜索
@@ -719,6 +757,9 @@
 			handleCheckedCitiesChangeBan(value) {
 				this.choseLayerSwitchingList(this.banCheckList)
 			},
+			handleCheckedCitiesChangeBan_Data(value) {
+				this.choseLayerSwitchingList_Data(this.banCheckList_Data)
+			},
 			handleCheckedCitiesChangeChang(value) {
 				this.choseLayerSwitchingList(this.changCheckList)
 			},
@@ -734,6 +775,9 @@
 			choseLayerSwitchingList(urlList) { //选择图层(传递数组)
 				window.choseLayerSwitchingList(urlList)
 			},
+      choseLayerSwitchingList_Data(urlList) { //选择图层(传递数组)
+				window.choseLayerSwitchingList_Data(urlList)
+			},
 			forestban() {
 				window.forestban()
 				console.log('林班')

src/views/forest.vue

@@ -489,6 +489,7 @@
       window.showDialog = this.showDialog
       window.choseLayerSwitching = this.choseLayerSwitching
       window.choseLayerSwitchingList = this.choseLayerSwitchingList
+      window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
       /** ----------------------------------底部按钮公用组件结束------------------------------------- */
     },
     mounted() {
@@ -1248,6 +1249,10 @@
       choseLayerSwitchingList(urlList) {
         this.$refs.supermap.layerSwitchingList(urlList)
       },
+      //选择图层(传递数组)  带数据
+      choseLayerSwitchingList_Data(urlList) {
+        this.$refs.supermap.layerSwitchingList_Data(urlList)
+      },
       /** ----------------------------------底部按钮公用组件结束------------------------------------- */
     }
   }