林班地图数据

src/components/supermap.vue

@@ -148,6 +148,9 @@
 
 				deckglLayerList_Data: [], //图层Layer(数组) 地图
 				resultLayer_Data: [], //数据图层Layer(数组) 数据
+        infoView:null,
+        lbtInfoView:null,
+        lbtThemeLayer:null,
 
 				heatMapLayer: [], //火灾蔓延图层Layer
 				isheatPlotting: false, //火灾蔓延
@@ -1327,58 +1330,153 @@
 					}
 				}
 			},
+      /** -------------------------------图层地址(数组)  带数据图层---开始------------------------------- */
 			layerSwitchingList_Data: function(banCheckList) { //图层切换数组  urlList 图层地址(数组)  带数据图层
 				let that = this
+        that.initInfoView()
+        // 定义 Unique 单值专题图层
+        that.lbtThemeLayer = window.L.supermap.uniqueThemeLayer("lbtThemeLayer", {
+          // 开启 hover 高亮效果
+          isHoverAble: true,
+          opacity: 0.6,
+          alwaysMapCRS: true
+        }).addTo(that.map);
+
+        // 图层基础样式
+        that.lbtThemeLayer.style = new SuperMap.ThemeStyle({
+          shadowBlur: 3,
+          shadowColor: "#000000",
+          shadowOffsetX: 1,
+          shadowOffsetY: 1,
+          fillColor: "#ff4400",
+          fillOpacity: 0
+        });
+
+        // hover 高亮样式
+        that.lbtThemeLayer.highlightStyle = new SuperMap.ThemeStyle({
+          stroke: true,
+          strokeWidth: 2,//线宽
+          strokeColor: '#0ff',//线色
+          fillColor: "#09f",//面色
+          fillOpacity: 0.3//透明度
+        });
+        that.lbtThemeLayer.on("mousemove", that.lbtHighLightLayer);
+
+        that.lbtThemeLayer.on('dblclick', function(e) {
+          that.showBanData = true
+          var fea = that.lbtThemeLayer.getFeatureById(e.target.refDataID);
+          that.banDataList = fea.attributes
+        })
+
+
 				//清除地图图层
-				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 (that.deckglLayerList_Data != null && that.deckglLayerList_Data.length > 0) {
+					for (let i = 0; i < that.deckglLayerList_Data.length; i++) {
+						that.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 (that.resultLayer_Data != null && that.resultLayer_Data.length > 0) {
+					for (let i = 0; i < that.resultLayer_Data.length; i++) {
+						that.resultLayer_Data[i].remove()
 					}
 				}
 				if (banCheckList != null && banCheckList.length > 0) {
 					for (let i = 0; i < banCheckList.length; i++) {
+
+            that.deckglLayer = window.L.supermap.tiledMapLayer(banCheckList[i].farmAddress, {})
+            that.deckglLayerList_Data.push(that.deckglLayer)
+            that.map.addLayer(that.deckglLayer)
 						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,
+              var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
+                queryParameter: {
+                  name: banCheckList[i].name,
+                },
+                datasetNames: banCheckList[i].datasetNames,
                 maxFeatures:20000,
                 fromIndex: 0,
-								toIndex: 999999
-							})
-							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)
-									}
-								})
+                toIndex: 999999
+              })
+
+              window.L.supermap.featureService("http://121.36.228.94:8090/iserver/services/data-baishan/rest/data")
+                .getFeaturesBySQL(getFeatureBySQLParams, function(serviceResult) {
+                  if (serviceResult.hasOwnProperty('result') && serviceResult.result
+                    .hasOwnProperty('features')) {
+                    that.lbtThemeLayer.addFeatures(serviceResult.result.features);
+                  }
+
+                  // var result = serviceResult.result;
+                  // if (result && result.features) {
+                  //   var features = result.features;
+                  //   this.lbtThemeLayer.addFeatures(serviceResult.result.features);
+                  // }
+                }, SuperMap.DataFormat.ISERVER);
+
+
+							// 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)
+							// 		}
+							// 	})
 						}
 					}
 				}
 			},
+       lbtHighLightLayer :function(e){
+        console.log(e);
+        if (e.target && e.target.refDataID) {
+          var fea = this.lbtThemeLayer.getFeatureById(e.target.refDataID);
+          if (fea) {
+            //此处写信息渲染代码
+
+          }
+        } else if (this.lbtInfoView) {
+          this.lbtInfoView.remove();
+        }
+      },
+      //高亮时显示图层信息框的控件
+       initInfoView :function() {
+        this.infoView = window.L.control({position: 'bottomleft'});
+        this.infoView.onAdd = function () {
+          this._div = window.L.DomUtil.create('div', 'panel panel-primary infoPane');
+          $(this._div).css("width", "150px");
+          $("<div class='panel-heading'><h5 class='panel-title text-center'>林场信息</h5></div>").appendTo(this._div);
+          var content = $("<div class='panel-body content'></div>").appendTo(this._div);
+          content.css('fontSize', '14px');
+          handleMapEvent(this._div, this._map);
+          return this._div;
+        };
+
+        this.infoView.update = function (fea) {
+          var content = $(".content");
+          content.text("");
+          if (!fea) {
+            return;
+          }
+          var car_count = parent.$("#"+fea.attributes.SMID).val();
+          if(car_count == undefined){
+            car_count =0;
+          }
+          console.log(fea.attributes.SMID);
+        }
+      },
+      /** -------------------------------图层地址(数组)  带数据图层---结束------------------------------- */
+
+
 			/** ----------------------------------动态绘制开始------------------------------------- */
 			clearLayers: function() {
 				this.plottingLayer.removeAllFeatures()