修改补充Map5中发布版的示例（要素图层、格式转换等）。

fanzia · Jan 16, 2017 · 3c43a35 · 3c43a35
1 parent b0c5c1c
commit 3c43a35
Show file tree

Hide file tree

Showing 18 changed files with 257 additions and 200 deletions.
diff --git a/tutorials/event/map_click.html b/tutorials/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="../../lib/jquery-1.11.1.js"></script>
-<script type="text/javascript" src="../../lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../lib/Map5.min.js"></script>
 
 <script type="text/javascript" src="../js/initMap.js"></script>
@@ -35,18 +34,15 @@
 		loadTileMap();
 		registerMapClick();
 	}
-
+
+	// 注册地图的点击事件
 	function registerMapClick(){
-		// 事件绑定
-		// 第一个参数为事件
-		// 第二个参数为事件相应函数
 		mapObj.on(GeoBeans.Event.CLICK, onMapClick);
 	}
 
+	// 地图事件回调函数
 	function onMapClick(evt){
-		// 1、mapX和mapY 为地图坐标
 		var mapXY = evt.mapX + "," + evt.mapY;
-		// 2、X和Y为屏幕坐标
 		var srcXY = evt.X + "," + evt.Y;
 		document.getElementById("mapXY").value = mapXY;
 		document.getElementById("srcXY").value = srcXY;

diff --git a/tutorials/event/map_dbclick.html b/tutorials/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="../../lib/jquery-1.11.1.js"></script>
-<script type="text/javascript" src="../../lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../lib/Map5.min.js"></script>
 
 <script type="text/javascript" src="../js/initMap.js"></script>
@@ -33,16 +32,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/tutorials/event/map_drag.html b/tutorials/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="../../lib/jquery-1.11.1.js"></script>
-<script type="text/javascript" src="../../lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../lib/Map5.min.js"></script>
 
 <script type="text/javascript" src="../js/initMap.js"></script>
@@ -34,25 +33,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/tutorials/event/map_mouse_down.html b/tutorials/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="../../lib/jquery-1.11.1.js"></script>
-<script type="text/javascript" src="../../lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../lib/Map5.min.js"></script>
 
 <script type="text/javascript" src="../js/initMap.js"></script>
@@ -37,13 +36,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/tutorials/event/map_mouse_move.html b/tutorials/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="../../lib/jquery-1.11.1.js"></script>
-<script type="text/javascript" src="../../lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../lib/Map5.min.js"></script>
 
 <script type="text/javascript" src="../js/initMap.js"></script>
@@ -33,16 +32,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/tutorials/event/map_mouse_up.html b/tutorials/event/map_mouse_up.html
@@ -34,16 +34,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/tutorials/event/map_mouse_wheel.html b/tutorials/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="../../lib/jquery-1.11.1.js"></script>
-<script type="text/javascript" src="../../lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../lib/Map5.min.js"></script>
 
 <script type="text/javascript" src="../js/initMap.js"></script>
@@ -34,18 +33,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/tutorials/event/map_zoom.html b/tutorials/event/map_zoom.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<link rel="stylesheet" type="text/css" href="../../lib/css/Map5.min.css">
+
+<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
+<script type="text/javascript" src="../../lib/Map5.min.js"></script>
+
+<script type="text/javascript" src="../js/initMap.js"></script>
+
+<style type="text/css">
+	body{
+		margin: 0px;
+	}
+
+	#zoom_div{
+		width: 32px;
+	    height: 32px;
+	    position: absolute;
+	    left: 0px;
+	    top: 0px;
+	    background-color: #fda709;
+	    text-align: center;
+	    line-height: 32px;
+	    font-size: 32px;
+	}
+</style>
+
+<title>事件：级别zoom改变</title>
+<body onload="init()">
+	<div id="mapDiv" style="height:800px;width:100%;position:absolute;"></div>
+	<div id="zoom_div">
+		3
+	</div>
+</body>
+
+
+<script type="text/javascript">
+
+	var mapObj = null;
+
+	function  init(){		
+		loadTileMap();
+		registerMapZoomEvent();
+	}
+
+	// 注册地图级别改变事件
+	function registerMapZoomEvent(){
+		mapObj.on(GeoBeans.Event.ZOOM_CHANGE, onMapZoomChange);
+	}
+
+	// 地图级别改变事件回调函数
+	function onMapZoomChange(evt){
+		$("#zoom_div").html(evt.zoom);
+	}
+
+</script>
diff --git a/tutorials/feature/add_line.html b/tutorials/feature/add_line.html
@@ -6,7 +6,6 @@
 <link rel="stylesheet" type="text/css" href="../../lib/css/Map5.min.css">
 
 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
-<script type="text/javascript" src="../../lib/bootstrap.min.js"></script>
 <script type="text/javascript" src="../../lib/Map5.min.js"></script>
 
 <script type="text/javascript" src="../js/initMap.js"></script>
@@ -33,35 +32,37 @@
 
 
 	function onAdddLine(){
-		// 1、定义几何要素
+		// 1、定义线geometry
 		var wkt = document.getElementById("wkt").value;
 		var wktFormat = new GeoBeans.Format.WKT();
 		var geometry = wktFormat.read(wkt);
 
-		// 2、定义属性值
+		// 2、定义字段和对应的值
 		var values = {
 			fname : "test",
 			shape : geometry
 		};
 
-		// 3、定义feature要素
+		// 3、定义一个要素
 		var feature = new GeoBeans.Feature({
-			fid : 1,					// fid 值
-			geometry : geometry,		// 几何要素
-			properties : values			// 属性值
+			fid : 1,
+			geometry : geometry,
+			properties : values
 		});
 
-		// 4、定义样式
+		// 4、定义一个线样式
 		var symbolizer = createLineSymbolizer();
 
-		// 5、定义要素的样式		
-		feature.symbolizer = symbolizer;
+		// 5、要素设置样式
+		feature.setSymbolizer(symbolizer);
 
-		// 6、数据源上添加要素
+		// 6、图层获取数据源
 		var source = featureLayer.getSource();
+
+		// 7、数据源添加要素
 		source.addFeature(feature);
 
-		// 7、地图刷新
+		// 8、地图刷新
 		mapObj.refresh();
 	}
 
@@ -81,10 +82,10 @@
 		return symbolizer;
 	}
 
-	/**
-	 * 添加要素图层
-	 */
+
 	function addFeatureLayer(){
+
+		// 1、定义一个要素图层
 		featureLayer = new GeoBeans.Layer.FeatureLayer({
 			name : layerName,
 			geometryType : GeoBeans.Geometry.Type.LINESTRING,
@@ -93,7 +94,10 @@
 			})
 		});
 
+		// 2、地图添加图层
 		mapObj.addLayer(featureLayer);
+
+		// 3、地图刷新
 		mapObj.refresh();
 	}
 
@@ -105,4 +109,3 @@
 	<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;">
 	</div>
 </body>
-