整理Map5中有关查询的示例。

fanzia · Jan 12, 2017 · 7442bd8 · 7442bd8
1 parent eb9b045
commit 7442bd8
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 107 deletions.
diff --git a/example/all/interaction/interaction_draw.html b/example/all/interaction/interaction_draw.html
@@ -6,7 +6,6 @@
 <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>
 
 <!--Base-->
 <script type="text/javascript" src="../../../src/GeoBeans.js"></script>
@@ -158,10 +157,13 @@
 	}
 
 	function addDrawInteraction(){
+		// 1、定义绘制交互
 		drawer = new GeoBeans.Interaction.Draw({
 			map : mapObj,
-			onComplete : onComplete
+			onComplete : onComplete  // 绘制完成回调函数
 		});
+
+		// 2、地图添加交互
 		mapObj.addInteraction(drawer);
 	}
 
@@ -175,6 +177,7 @@
 		// stroke.color.set(0,255, 0,1);
 		// stroke.width = 1.0; 
 
+		// 1、定义点样式
 		var symbol = new GeoBeans.Style.Symbol();
 		symbol.icon = "../images/pin.png";
 		symbol.rotation = 45;
@@ -183,6 +186,7 @@
 		symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
 		symbolizer.symbol = symbol;
 
+		// 2、绘制点
 		drawer.draw(GeoBeans.Geometry.Type.POINT,symbolizer);
 	}
 
@@ -224,22 +228,27 @@
 		drawer.draw("Rect",symbolizer);
 	}	
 
+	// 绘制结束回调函数
 	function onComplete(geometry){
 		var format = new GeoBeans.Format.WKT();
 		var wkt = format.write(geometry);
 		document.getElementById("geometry").value = wkt;
-
 
+		// 1、定义要素
 		var feature = new GeoBeans.Feature({
 			fid : 1,
 			geometry : geometry,
 			value : {}
 		});
 		feature.symbolizer = symbolizer;
 
+		// 2、获取数据源
 		var source = layer.getSource();
+
+		// 3、数据源添加该数据
 		source.addFeature(feature);
-		// pointLayer.addFeature(feature);
+
+		// 4、地图刷新
 		mapObj.refresh();
 	}
 
@@ -255,34 +264,8 @@
 
 		mapObj.addLayer(featureLayer);
 		return featureLayer;
-
 	}
 
-	function createSimplePointStyle(){
-		var style = new GeoBeans.Style.FeatureStyle();
-
-		var symbolizer = new GeoBeans.Symbolizer.PointSymbolizer();
-		//设置点大小
-		symbolizer.size = 6;
-		//设置点的填充颜色
-		var fill   = symbolizer.fill;
-		fill.color.setHex('#800080',1);
-
-		//设置点的边界样式
-		var stroke = symbolizer.stroke;
-		// 边框的颜色
-		stroke.color.set(0,255, 0,1);
-		// 边框的颜色
-		stroke.width = 1.0; 
-
-		var rule = new GeoBeans.Style.Rule();
-		rule.symbolizer = symbolizer;
-		rule.filter = null;
-
-		style.addRule(rule);		
-
-		return style;
-	}
 
 	function onEnable(){
 		var enabled = drawer.isEnabled();

diff --git a/example/all/interaction/interaction_rotate.html b/example/all/interaction/interaction_rotate.html
@@ -6,7 +6,6 @@
 <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>
 
 <!--Base-->
 <script type="text/javascript" src="../../../src/GeoBeans.js"></script>
@@ -134,17 +133,18 @@
 		createRotateInteraction();
 	}
 
-	/**
-	 * [createSelectInteraction description]
-	 * @return {[type]} [description]
-	 */
+	// 键盘按着Shift键，鼠标单击即可实现旋转
 	function createRotateInteraction(){
+		// 1、定义旋转交互
 		var rotate = new GeoBeans.Interaction.Rotate({
 			"map" : mapObj
 		});
+
+		// 2、地图添加交互
 		mapObj.addInteraction(rotate);
 	}
 
+	// 设置地图旋转
 	function onRotate(){
 		var viewer = mapObj.getViewer();
 		viewer.setRotation(45);

diff --git a/example/all/interaction/interaction_select_by_circle.html b/example/all/interaction/interaction_select_by_circle.html
@@ -6,7 +6,6 @@
 <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>
 
 <!--Base-->
 <script type="text/javascript" src="../../../src/GeoBeans.js"></script>
@@ -136,22 +135,24 @@
 		createSelectInteraction();
 	}
 
-	/**
-	 * [createSelectInteraction description]
-	 * @return {[type]} [description]
-	 */
 	function createSelectInteraction(){
+		// 1、定义地图交互
 		var select = new GeoBeans.Interaction.Select({
 			"map" : mapObj,
-			"layer" : wfsLayer,
-			"condition" : GeoBeans.Interaction.SelectType.CIRCLE
+			"layer" : wfsLayer, // 查询的图层
+			"condition" : GeoBeans.Interaction.SelectType.CIRCLE // 交互类型，默认是点击查询
 		});
+
+		// 2、定义查询交互的选择集发生变化事件		
 		select.onchange(onSelectionChange);
+
+		// 3、添加查询交互
 		mapObj.addInteraction(select);
 	}
 
+	// onChange回调函数
 	function onSelectionChange(features){
-		//alert(features.length);
+		alert(features.length);
 	}
 
 </script>

diff --git a/example/all/interaction/interaction_select_by_click.html b/example/all/interaction/interaction_select_by_click.html
@@ -6,7 +6,6 @@
 <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>
 
 <!--Base-->
 <script type="text/javascript" src="../../../src/GeoBeans.js"></script>
@@ -128,41 +127,39 @@
 <script type="text/javascript">
 	// 地图变量
 	var mapObj = null;
+
 	var wfsLayer = null;
-	// function init(){
-	// 	loadMap();
-	// 	wfsLayer = mapObj.getLayer("country");
-	// 	createSelectInteraction();
-	// }
+
 	function init(){
 		loadCities();
 		wfsLayer = mapObj.getLayer("cities");
 		createSelectInteraction();
 	}
-	// function init(){
-	// 	loadRivers();
-	// 	wfsLayer = mapObj.getLayer("rivers");
-	// 	createSelectInteraction();
-	// }
-	/**
-	 * [createSelectInteraction description]
-	 * @return {[type]} [description]
-	 */
+
 	function createSelectInteraction(){
+		// 1、定义查询交互
 		var select = new GeoBeans.Interaction.Select({
 			"map" : mapObj,
 			"layer" : wfsLayer
 		});
+
+		// 2、定义查询交互的选择集发生变化事件
 		select.onchange(onSelectionChange);
+
+		// 3、地图增加交互
 		mapObj.addInteraction(select);
 
-		// 设置样式
+		// 4、获取地图的选择集
 		var selection = mapObj.getSelection();
+
+		// 5、定义样式
 		var symbolizer = createSymbolizer();
 
+		// 6、选择集设定样式
 		selection.setSymbolizer(symbolizer);
 	}
 
+	// onChange回调函数
 	function onSelectionChange(features){
 		console.log(features.length);
 	}

diff --git a/example/all/interaction/interaction_select_by_line.html b/example/all/interaction/interaction_select_by_line.html
@@ -6,7 +6,6 @@
 <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>
 
 <!--Base-->
 <script type="text/javascript" src="../../../src/GeoBeans.js"></script>
@@ -135,22 +134,24 @@
 		createSelectInteraction();
 	}
 
-	/**
-	 * [createSelectInteraction description]
-	 * @return {[type]} [description]
-	 */
 	function createSelectInteraction(){
+		// 1、定义地图交互		
 		var select = new GeoBeans.Interaction.Select({
 			"map" : mapObj,
 			"layer" : wfsLayer,
 			"condition" : GeoBeans.Interaction.SelectType.LINE
 		});
+
+		// 2、定义查询交互的选择集发生变化事件		
 		select.onchange(onSelectionChange);
+
+		// 3、添加查询交互		
 		mapObj.addInteraction(select);
 	}
 
+	// onChange回调函数
 	function onSelectionChange(features){
-		//alert(features.length);
+		alert(features.length);
 	}
 
 </script>

diff --git a/example/all/interaction/interaction_select_by_polygon.html b/example/all/interaction/interaction_select_by_polygon.html
@@ -6,7 +6,6 @@
 <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>
 
 <!--Base-->
 <script type="text/javascript" src="../../../src/GeoBeans.js"></script>
@@ -135,22 +134,25 @@
 		createSelectInteraction();
 	}
 
-	/**
-	 * [createSelectInteraction description]
-	 * @return {[type]} [description]
-	 */
+
 	function createSelectInteraction(){
+		// 1、定义地图交互
 		var select = new GeoBeans.Interaction.Select({
 			"map" : mapObj,
-			"layer" : wfsLayer,
-			"condition" : GeoBeans.Interaction.SelectType.POLYGON
+			"layer" : wfsLayer,		// 查询的图层
+			"condition" : GeoBeans.Interaction.SelectType.POLYGON // 交互类型，默认是点击查询
 		});
+
+		// 2、定义查询交互的选择集发生变化事件
 		select.onchange(onSelectionChange);
+
+		// 3、添加查询交互
 		mapObj.addInteraction(select);
 	}
 
+	// onChange回调函数
 	function onSelectionChange(features){
-		//alert(features.length);
+		alert(features.length);
 	}
 
 </script>

diff --git a/example/all/interaction/interaction_select_by_rect.html b/example/all/interaction/interaction_select_by_rect.html
@@ -6,7 +6,6 @@
 <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>
 
 <!--Base-->
 <script type="text/javascript" src="../../../src/GeoBeans.js"></script>
@@ -134,22 +133,25 @@
 		createSelectInteraction();
 	}
 
-	/**
-	 * [createSelectInteraction description]
-	 * @return {[type]} [description]
-	 */
+
 	function createSelectInteraction(){
+		// 1、定义地图交互
 		var select = new GeoBeans.Interaction.Select({
 			"map" : mapObj,
-			"layer" : wfsLayer,
-			"condition" : GeoBeans.Interaction.SelectType.BBOX
+			"layer" : wfsLayer,     	// 查询图层
+			"condition" : GeoBeans.Interaction.SelectType.BBOX // 交互类型
 		});
+
+		// 2、定义查询交互的选择集发生变化事件
 		select.onchange(onSelectionChange);
+
+		// 3、添加查询交互
 		mapObj.addInteraction(select);
 	}
 
+	// onChange回调函数
 	function onSelectionChange(features){
-		//alert(features.length);
+		alert(features.length);
 	}
 
 </script>