整理Map5重有关事件和空间量算的示例。

fanzia · Jan 13, 2017 · 84a0f6b · 84a0f6b
1 parent 8bb4c2f
commit 84a0f6b
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 33 deletions.
diff --git a/example/all/event/map_click.html b/example/all/event/map_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>
@@ -152,11 +151,13 @@
 		loadTileMap();
 		registerMapClick();
 	}
-
+
+	// 注册地图的点击事件
 	function registerMapClick(){
 		mapObj.on(GeoBeans.Event.CLICK, onMapClick);
 	}
 
+	// 地图事件回调函数
 	function onMapClick(evt){
 		var mapXY = evt.mapX + "," + evt.mapY;
 		var srcXY = evt.X + "," + evt.Y;

diff --git a/example/all/event/map_dbclick.html b/example/all/event/map_dbclick.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>
@@ -150,13 +149,15 @@
 
 	function  init(){		
 		loadTileMap();
-		registerMapClick();
+		registerMapDBClick();
 	}
 
-	function registerMapClick(){
+	// 注册地图双击事件
+	function registerMapDBClick(){
 		mapObj.on(GeoBeans.Event.DBCLICK, onMapDbClick);
 	}
 
+	// 地图事件回调函数
 	function onMapDbClick(evt){
 		var mapXY = evt.mapX + "," + evt.mapY;
 		var srcXY = evt.X + "," + evt.Y;

diff --git a/example/all/event/map_drag.html b/example/all/event/map_drag.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>
@@ -151,20 +150,25 @@
 		registerDragEvent();
 	}
 
+	// 设置地图可以进行拖拽
 	function enableDrag(){
 		mapObj.enableDrag(true);
 	}
 
+	// 禁止地图拖拽
 	function disableDrag(){
 		mapObj.enableDrag(false);
 	}
 
+	// 注册地图的拖拽事件,分别为拖拽开始、拖拽中和拖拽结束
 	function registerDragEvent(){
 		mapObj.on(GeoBeans.Event.DRAG_BEGIN, onDragBegin);
 		mapObj.on(GeoBeans.Event.DRAGING, onDraging);
 		mapObj.on(GeoBeans.Event.DRAG_END, onDragEnd);
 	}
 
+
+	// 拖拽回调函数
 	function onDragBegin(evt){
 		console.log("DragBegin");
 	}

diff --git a/example/all/event/map_mouse_down.html b/example/all/event/map_mouse_down.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>
@@ -154,10 +153,12 @@
 		registerMapClick();
 	}
 
+	// 注册鼠标按下事件
 	function registerMapClick(){
 		mapObj.on(GeoBeans.Event.MOUSE_DOWN, onMouseDown);
 	}
 
+	// 地图事件回调函数
 	function onMouseDown(evt){
 		var mapXY = evt.mapX + "," + evt.mapY;
 		var srcXY = evt.X + "," + evt.Y;

diff --git a/example/all/event/map_mouse_move.html b/example/all/event/map_mouse_move.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>
@@ -150,13 +149,15 @@
 
 	function  init(){		
 		loadTileMap();
-		registerMapClick();
+		registerMapMouseMove();
 	}
 
-	function registerMapClick(){
+	// 注册鼠标移动事件
+	function registerMapMouseMove(){
 		mapObj.on(GeoBeans.Event.MOUSE_MOVE, onMouseMove);
 	}
 
+	// 地图事件回调函数
 	function onMouseMove(evt){
 		var mapXY = evt.mapX + "," + evt.mapY;
 		var srcXY = evt.X + "," + evt.Y;

diff --git a/example/all/event/map_mouse_up.html b/example/all/event/map_mouse_up.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>
@@ -151,13 +150,15 @@
 
 	function  init(){		
 		loadTileMap();
-		registerMapClick();
+		registerMapMouseUp();
 	}
 
-	function registerMapClick(){
+	// 注册地图鼠标抬起事件
+	function registerMapMouseUp(){
 		mapObj.on(GeoBeans.Event.MOUSE_UP, onMouseUp);
 	}
 
+	// 地图事件回调函数
 	function onMouseUp(evt){
 		var mapXY = evt.mapX + "," + evt.mapY;
 		var srcXY = evt.X + "," + evt.Y;

diff --git a/example/all/event/map_mouse_wheel.html b/example/all/event/map_mouse_wheel.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>
@@ -151,14 +150,17 @@
 		loadTileMap();
 	}
 
+	// 注册鼠标滚动事件
 	function registerEvent(){
 		mapObj.on(GeoBeans.Event.MOUSE_WHEEL, onWheel);
 	}
 
+	// 注销鼠标滚动事件
 	function unregisterEvent(){
 		mapObj.un(GeoBeans.Event.MOUSE_WHEEL);	
 	}
 
+	// 鼠标滚动回调函数
 	function onWheel(evt){
 		var info = "delta:" + evt.delta + "," + "zoom:" + evt.zoom;
 		document.getElementById("info").value = info;

diff --git a/example/all/event/map_zoom.html b/example/all/event/map_zoom.html
@@ -6,8 +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>
 <script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Class.js"></script>
@@ -164,10 +162,12 @@
 		registerMapZoomEvent();
 	}
 
+	// 注册地图级别改变事件
 	function registerMapZoomEvent(){
 		mapObj.on(GeoBeans.Event.ZOOM_CHANGE, onMapZoomChange);
 	}
 
+	// 地图级别改变事件回调函数
 	function onMapZoomChange(evt){
 		$("#zoom_div").html(evt.zoom);
 	}

diff --git a/example/all/measure/measure_line_length.html b/example/all/measure/measure_line_length.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,30 @@
 		createDrawInteraction();
 	}
 
+	// 添加绘制交互
 	function createDrawInteraction(){
+		// 1、定义一个绘制交互
 		drawer = new GeoBeans.Interaction.Draw({
 			map : mapObj,
 			onComplete : onComplete
 		});
+
+		// 2、地图添加绘制交互
 		mapObj.addInteraction(drawer);
 	}
 
+	// 绘制完成回调函数，返回绘制的几何图形
 	function onComplete(geometry){
+		// 1、获取地图的空间参考对象
 		var srs = mapObj.getSpatialReference();
-		//计算多边多边形面积
-		var area = srs.length(geometry, 	//多边形
-							GeoBeans.Unit.Kilometer);//单位
+
+		// 2、计算几何图形的长度
+		var area = srs.length(geometry, 				// 几何图形
+							GeoBeans.Unit.Kilometer); 	// 单位, 公里
 		document.getElementById("length").value = area;
 	}
 
+	// 绘制线
 	function onDrawLine(){
 		// 1、定义线绘制的样式
 		symbolizer = new GeoBeans.Symbolizer.LineSymbolizer();

diff --git a/example/all/measure/measure_polygon_area.html b/example/all/measure/measure_polygon_area.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>
@@ -137,6 +136,7 @@
 		createSelectInteraction();
 	}
 
+	// 加载一个要素图层
 	function addGeoJSONLayer(){
 		vector = new GeoBeans.Layer.FeatureLayer({			
 			"name" : "layername", // 图层名称
@@ -151,7 +151,7 @@
 		mapObj.refresh();
 	}
 
-
+	// 加载一个点击交互
 	function createSelectInteraction(){
 		var select = new GeoBeans.Interaction.Select({
 			"map" : mapObj,
@@ -161,19 +161,24 @@
 		mapObj.addInteraction(select);
 	}
 
+	// 点击交互回调事件，返回点击选择的要素数组
 	function onSelectionChange(features){
 		if(features.length>0){
-			//计算面积
+			// 1、获取第一个要素的几何图形
 			var polygon = features[0].getGeometry();	
+
+			// 2、获取地图的空间参考
 			var srs = mapObj.getSpatialReference();
-			//计算多边多边形面积
-			var area = srs.area(polygon, 	//多边形
-								GeoBeans.Unit.Kilometer);//单位
+
+			// 3、计算多边形的面积
+			var area = srs.area(polygon, 					// 多边形
+								GeoBeans.Unit.Kilometer);	// 单位
 			document.getElementById("area").value = area;
 		}
 
 	}
 
+	// 创建面样式
 	function createSimplePolygonStyle(){
 		var style = new GeoBeans.Style.FeatureStyle();
 		var rule = new GeoBeans.Style.Rule();

diff --git a/example/all/measure/measure_polygon_perimeter.html b/example/all/measure/measure_polygon_perimeter.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>
@@ -137,6 +136,7 @@
 		createSelectInteraction();
 	}
 
+	// 添加一个要素图层
 	function addGeoJSONLayer(){
 		vector = new GeoBeans.Layer.FeatureLayer({			
 			"name" : "layername", // 图层名称
@@ -151,7 +151,7 @@
 		mapObj.refresh();
 	}
 
-
+	// 添加一个点击交互
 	function createSelectInteraction(){
 		var select = new GeoBeans.Interaction.Select({
 			"map" : mapObj,
@@ -161,19 +161,24 @@
 		mapObj.addInteraction(select);
 	}
 
+	// 点击交互回调函数,返回要素数组
 	function onSelectionChange(features){
 		if(features.length>0){
-			//计算周长
-			var polygon = features[0].getGeometry();	
+			// 1、获取第一个要素的几何图形
+			var polygon = features[0].getGeometry();
+
+			// 2、获取地图的空间参考 
 			var srs = mapObj.getSpatialReference();
-			//计算多边多边形周长
-			var perimeter = srs.length(polygon, 	//多边形
-								GeoBeans.Unit.Kilometer);//单位
+
+			// 3、计算多边形周长
+			var perimeter = srs.length(polygon, 			// 几何图形
+								GeoBeans.Unit.Kilometer);	// 单位
 			document.getElementById("perimeter").value = perimeter;
 		}
 
 	}
 
+	// 创建一个面样式
 	function createSimplePolygonStyle(){
 		var style = new GeoBeans.Style.FeatureStyle();
 		var rule = new GeoBeans.Style.Rule();