修改LayersWidget的加载方式

fanzia · Oct 14, 2016 · 8ff2f08 · 8ff2f08
1 parent 724c30d
commit 8ff2f08
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 36 deletions.
diff --git a/css/Map5.css b/css/Map5.css
@@ -457,30 +457,31 @@
 	height: 26px;
 	border-bottom: 1px solid #cdcdcd;
 	padding: 0px 10px;
+	line-height: 26px;
 }
 .map5-layer-widget .layer-widget-title div{
 	float: left;
 }
 
-.map5-layer-widget .checkdown{
+.map5-layer-widget .checkdown, .map5-layer-widget .close{
 	width: 20px;
-	right: 36px;
     position: absolute;
-	height: 26px;
-	background-image: url(../images/down.png);
-	 background-position: center;
+    height: 26px;
+    background-position: center;
     background-repeat: no-repeat;
-	cursor: pointer;
+    cursor: pointer;
+    opacity: 0.2;
+}
+.map5-layer-widget .checkdown:hover, .map5-layer-widget .close:hover{
+	opacity: 0.5;
+}
+.map5-layer-widget .checkdown{
+	right: 36px;
+	background-image: url(../images/down.png);
 }
 .map5-layer-widget .close{
-	width: 20px;
 	right: 10px;
-    position: absolute;
-	height: 26px;
 	background-image: url(../images/close.png);
-	 background-position: center;
-    background-repeat: no-repeat;
-	cursor: pointer;
 }
 .map5-layer-widget .layer-item{
 	height: 26px;
@@ -536,8 +537,13 @@
     cursor: pointer;
 }
 
-.map5-layer-widget .layer-visible.hide{
-	background-image: url(../images/ok_2.png);
+.map5-layer-widget .layer-invisible {
+	width: 30px;
+	height: 26px;
+    background-position: center;
+    background-repeat: no-repeat;	
+    background-image: url(../images/ok_2.png);
+    cursor: pointer;
 }
 
 

diff --git a/example/all/control/control_layerpanel.html b/example/all/control/control_layerpanel.html
@@ -3,8 +3,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-<!-- <link rel="stylesheet" type="text/css" href="../../../lib/css/Map5.min.css"> -->
-<link rel="stylesheet" type="text/css" href="../../../css/Map5.css">
+<link rel="stylesheet" type="text/css" href="../../../lib/css/Map5.min.css">
 
 <script type="text/javascript" src="../../../src/depends/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../../src/depends/bootstrap.min.js"></script>
@@ -102,7 +101,7 @@
 <script type="text/javascript" src="../../../src/GeoBeans/Widget/CopyRightWidget.js"></script>
 <script type="text/javascript" src="../../../src/GeoBeans/Widget/InfoWindowWidget.js"></script>
 <script type="text/javascript" src="../../../src/GeoBeans/Widget/LegendWidget.js"></script>
-<script type="text/javascript" src="../../../src/GeoBeans/Widget/LayerWidget.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Widget/LayersWidget.js"></script>
 <!--Map-->
 <script type="text/javascript" src="../../../src/GeoBeans/Selection.js"></script>
 <script type="text/javascript" src="../../../src/GeoBeans/Map.js"></script>
@@ -122,6 +121,8 @@
 		loadTileMap();
 		addWfsLayer();
 		addWmsLayer();
+
+		addLayersWidget();
 	}
 
 	function addWfsLayer(){
@@ -160,6 +161,11 @@
 		mapObj.refresh();
 	}
 
+
+	function addLayersWidget(){
+		var layersWidget = new GeoBeans.Widget.LayersWidget(mapObj);
+		mapObj.addLayersWidget(layersWidget);
+	}
 </script>
 <title>控件：图层面板</title>
 <body onload="init()">

diff --git a/example/all/map/layer_add_wfs.html b/example/all/map/layer_add_wfs.html
@@ -90,6 +90,7 @@
 <script type="text/javascript" src="../../../src/GeoBeans/Widget/CopyRightWidget.js"></script>
 <script type="text/javascript" src="../../../src/GeoBeans/Widget/InfoWindowWidget.js"></script>
 <script type="text/javascript" src="../../../src/GeoBeans/Widget/LegendWidget.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Widget/LayerWidget.js"></script>
 <!--Map-->
 <script type="text/javascript" src="../../../src/GeoBeans/Selection.js"></script>
 <script type="text/javascript" src="../../../src/GeoBeans/Map.js"></script>

diff --git a/src/GeoBeans/Map.js b/src/GeoBeans/Map.js
@@ -80,7 +80,7 @@ GeoBeans.Map = GeoBeans.Class({
 	// copyright
 	_copyRightWidget : null,
 
-	_layerWidget : null,
+	_layersWidget : null,
 
 	//图例列表
 	legendList : null,
@@ -966,9 +966,6 @@ GeoBeans.Map.prototype.initWidgets = function(){
 	var infoWindowWidget = new GeoBeans.Widget.InfoWindowWidget(this);
 	this._infoWindowWidget = infoWindowWidget;
 
-
-	var layerWidget = new GeoBeans.Widget.LayerWidget(this);
-	this._layerWidget = layerWidget;
 };
 
 /**
@@ -1509,7 +1506,9 @@ GeoBeans.Map.prototype.draw = function(){
 	//设置地图控件
 	this.drawNavControl();
 
-	this._layerWidget.refresh();
+	if(this._layersWidget != null){
+		this._layersWidget.refresh();
+	}
 
 }
 
@@ -1837,4 +1836,28 @@ GeoBeans.Map.prototype.apply = function(options){
 	if(isValid(options.extent)){
 		this.extent = options.extent;
 	}
-}
+}
+
+/**
+ * 添加图层面板
+ * @public
+ * @param {GeoBeans.Widget.LayersWidget} layersWidget 图层面板
+ */
+GeoBeans.Map.prototype.addLayersWidget = function(layersWidget){
+	if(!isValid(layersWidget)){
+		return;
+	}
+	this._layersWidget = layersWidget;
+	this._layersWidget.refresh();
+};
+
+/**
+ * 删除图层面板
+ * @public
+ */
+GeoBeans.Map.prototype.removeLayersWidget = function(){
+	if(isValid(this._layersWidget)){
+		this._layersWidget.destory();
+		this._layersWidget = null;
+	}
+};
diff --git a/src/GeoBeans/Widget/LayerWidget.js → src/GeoBeans/Widget/LayersWidget.js b/src/GeoBeans/Widget/LayerWidget.js → src/GeoBeans/Widget/LayersWidget.js
@@ -5,7 +5,7 @@
  * @class
  * @extends {GeoBeans.Widget}
  */
-GeoBeans.Widget.LayerWidget = GeoBeans.Class(GeoBeans.Widget,{
+GeoBeans.Widget.LayersWidget = GeoBeans.Class(GeoBeans.Widget,{
 
 	initialize : function(map){
 		this.attach(map);
@@ -15,21 +15,33 @@ GeoBeans.Widget.LayerWidget = GeoBeans.Class(GeoBeans.Widget,{
 });
 
 
-GeoBeans.Widget.LayerWidget.prototype.createContainer = function(){
+GeoBeans.Widget.LayersWidget.prototype.destory = function(){
+	$(this._container).remove();
+};
+
+
+/**
+ * 创建容器
+ * @private
+ */
+GeoBeans.Widget.LayersWidget.prototype.createContainer = function(){
 
 	var mapContainer = this._map.getContainer();
 
 	$(mapContainer).find(".map5-layer-widget").remove();
 
-	var html = "<div class='map5-layer-widget'>aa</div>";
+	var html = "<div class='map5-layer-widget'></div>";
 
 	$(mapContainer).append(html);
 
 	this._container = $(mapContainer).find(".map5-layer-widget")[0];
 };
 
-
-GeoBeans.Widget.LayerWidget.prototype.refresh = function(){
+/**
+ * 面板刷新
+ * @private
+ */
+GeoBeans.Widget.LayersWidget.prototype.refresh = function(){
 	var layers = this._map.layers;
 	var html = "";
 
@@ -75,7 +87,7 @@ GeoBeans.Widget.LayerWidget.prototype.refresh = function(){
 			layerIcon = "layer-type-image";
 		}
 
-		var layerVisible = layer.isVisible() ? "layer-visible" : "layer-visible hide";
+		var layerVisible = layer.isVisible() ? "layer-visible" : "layer-invisible";
 		html += "<div class='layer-item' style='display:" + (collepsed? "none" :"block") + "'>"
 			+ "<div class='layer-type "+ layerIcon + "'></div>"
 			+ "<div class='layer-name' title='"+ layer.name +"'>" + layer.name +　"</div>"
@@ -86,14 +98,16 @@ GeoBeans.Widget.LayerWidget.prototype.refresh = function(){
 	this._container.innerHTML = html;
 
 	var that = this;
-	$(this._container).find(".layer-visible").click(function(){
+	$(this._container).find(".layer-visible,.layer-invisible").click(function(){
 		var visible = null;
-		if($(this).hasClass("hide")){
-			$(this).removeClass("hide");
-			visible = true;
-		}else{
-			$(this).addClass("hide");
+		if($(this).hasClass("layer-visible")){
+			$(this).removeClass("layer-visible");
+			$(this).addClass("layer-invisible");
 			visible = false;
+		}else{
+			$(this).addClass("layer-visible");
+			$(this).removeClass("layer-invisible");
+			visible = true;
 		}
 		var layerName = $(this).prev().html();
 		var layer = that._map.getLayer(layerName);
@@ -121,9 +135,10 @@ GeoBeans.Widget.LayerWidget.prototype.refresh = function(){
 
 /**
  * 设置是否显示
+ * @public
  * @param  {boolean} v 是否显示
  */
-GeoBeans.Widget.LayerWidget.prototype.show = function(v){
+GeoBeans.Widget.LayersWidget.prototype.show = function(v){
 	this._visible = v;
 	if(this._visible){
 		$(this._container).show();