整理Map5中有关格式转换和投影转换的示例。

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

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/example/all/format/geojson.html b/example/all/format/geojson.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>
@@ -141,6 +140,7 @@
 		loadTileMap();
 	}
 
+	// 读取geojson文件，获取字符串
 	function getGeoJson(){
 		// var url = "../data/geojson/point-samples.geojson";
 		// var url = "../data/geojson/line-samples.geojson";
@@ -162,15 +162,19 @@
 		});		
 	}
 
-
+	// 读取geojson字符串
 	function readJson(geoJson){
 		if(geoJson == null){
 			return;
 		}
 
+		// 1、定义GeoJson数据格式
 		var geoJsonFormat = new GeoBeans.Format.GeoJson();
+
+		// 2、读取要素数组
 		var features = geoJsonFormat.readFeatures(geoJson);
 
+		// 3、定义一个要素图层
 		var featureLayer = new GeoBeans.Layer.FeatureLayer({
 			name : "geojson",
 			geometryType : GeoBeans.Geometry.Type.POLYGON,
@@ -179,11 +183,16 @@
 			})
 		});
 
+		// 4、图层获取数据源
 		var source = featureLayer.getSource();
-		source.addFeatures(features);
 
+		// 5、数据源设定要素
+		source.setFeatures(features);
+
+		// 6、地图添加图层
 		mapObj.addLayer(featureLayer);
 
+		// 7、地图刷新
 		mapObj.refresh();
 	}
 

diff --git a/example/all/format/kml.html b/example/all/format/kml.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>
@@ -142,7 +141,8 @@
 		loadTileMap();
 	}
 
-	function getGeoJson(){
+	// 从文件中读取kml字符串
+	function getKML(){
 		// var url = "../data/kml/point.kml";
 		// var url = "../data/kml/line.kml";
 		var url = "../data/kml/polygon.kml";
@@ -164,11 +164,19 @@
 		});		
 	}
 
+	// 读取kml
 	function readKML(kml){
+		if(kml == null){
+			return;
+		}
+
+		// 1、定义KML数据格式
 		var kmlFormat = new GeoBeans.Format.KML();
 
+		// 2、读取要素数组
 		var features = kmlFormat.readFeatures(kml);
 
+		// 3、定义一个要素图层
 		var layer = new GeoBeans.Layer.FeatureLayer({
 			name : "point",
 			geometryType : GeoBeans.Geometry.Type.POLYGON,
@@ -177,11 +185,16 @@
 			})
 		});
 
+		// 4、添加图层
 		mapObj.addLayer(layer);
 
+		// 5、图层获取数据源
 		var source = layer.getSource();
-		source.addFeatures(features);
 
+		// 6、数据源设定要素
+		source.setFeatures(features);
+
+		// 7、地图刷新
 		mapObj.refresh();
 	}
 
@@ -191,6 +204,6 @@
 	<!-- mapDiv 为初始化地图的容器，给定高度和宽度，并指定定位方式为绝对定位 -->
 	<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;">
 	</div>
-	<button onclick="getGeoJson()">转换</button>
+	<button onclick="getKML()">转换</button>
 </body>
 
diff --git a/example/all/format/wkt.html b/example/all/format/wkt.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>
@@ -167,21 +166,33 @@
 		console.log(geometryRead);
 	}
 
+	// WKT=>geometry
 	function toGeometry(){
+		// 1、定义一个wkt的字符串
 		var wkt = $("#wkt").val();
+
+		// 2、定义WKT数据格式
 		var wktFormat = new GeoBeans.Format.WKT();
+
+		// 3、将WKT转换为Geometry对象
 		geometry = wktFormat.read(wkt);
 		if(geometry != null){
 			$("#geometry").val(geometry.type);
 		}
 	}
 
+	// geometry=> WKT
 	function toWKT(){
 		if(geometry == null){
 			return;
 		}
+
+		// 1、定义WKT数据格式
 		var wktFormat = new GeoBeans.Format.WKT();
+
+		// 2、geometry对象转换为WKT字符串
 		var wktWrite = wktFormat.write(geometry);
+
 		$("#wkt_write").val(wktWrite);
 	}
 </script>

diff --git a/example/all/proj/coordinate.html b/example/all/proj/coordinate.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>
@@ -172,6 +171,7 @@
 		document.getElementById("w_x").value = evt.mapX;
 		document.getElementById("w_y").value = evt.mapY;
 
+		// 经纬度转换为平面坐标
 		var pt = GeoBeans.Proj.fromLonLat(lon, lat);
 		document.getElementById("m_x").value = pt.x;
 		document.getElementById("m_y").value = pt.y;