实现WGS84坐标系下面积计算功能。

fanzia · Nov 29, 2016 · 6949c79 · 6949c79
1 parent 19327e6
commit 6949c79
Show file tree

Hide file tree

Showing 13 changed files with 544 additions and 42 deletions.
diff --git a/example/all/data/geojson/dot.json b/example/all/data/geojson/dot.json
@@ -0,0 +1 @@
+{"type": "FeatureCollection", "features": [{"geometry": {"type": "Point", "coordinates": [71.54965608772534, 54.22470335184164]}, "type": "Feature", "properties": {}}]}
diff --git a/example/all/data/geojson/lines-3.json b/example/all/data/geojson/lines-3.json
@@ -0,0 +1 @@
+{"type": "FeatureCollection", "features": [{"geometry": {"type": "LineString", "coordinates": [[-157.151889666635, -49.9117019589815], [13.559716931777729, -57.81570702205838], [-61.929072529069586, -4.141410627162088]]}, "type": "Feature", "properties": {"name": 0}}, {"geometry": {"type": "LineString", "coordinates": [[-98.17656485585582, -71.63005084632246], [93.83975516003807, -85.2962335852724], [-133.961581992324, -3.077350346747764]]}, "type": "Feature", "properties": {"name": 1}}, {"geometry": {"type": "LineString", "coordinates": [[-64.53053861090645, -81.14356205423054], [-106.85575421146903, -66.75563164268746], [-129.3623757136302, 53.743964760942276]]}, "type": "Feature", "properties": {"name": 2}}]}
diff --git a/example/all/data/geojson/points-5.json b/example/all/data/geojson/points-5.json
@@ -0,0 +1 @@
+{"type": "FeatureCollection", "features": [{"geometry": {"type": "Point", "coordinates": [-103.34597370652799, 75.20852360766]}, "type": "Feature", "properties": {"country": 0}}, {"geometry": {"type": "Point", "coordinates": [118.46783320217594, -86.19747838071207]}, "type": "Feature", "properties": {"country": 1}}, {"geometry": {"type": "Point", "coordinates": [-30.685212668710705, 18.839573572200806]}, "type": "Feature", "properties": {"country": 2}}, {"geometry": {"type": "Point", "coordinates": [-149.38027055595535, -1.1542934296805356]}, "type": "Feature", "properties": {"country": 3}}, {"geometry": {"type": "Point", "coordinates": [-152.73777265032336, -70.24655690342823]}, "type": "Feature", "properties": {"country": 4}}]}
diff --git a/example/all/data/geojson/world.geojson b/example/all/data/geojson/world.geojson
diff --git a/example/all/data/points.json b/example/all/data/points.json
diff --git a/example/all/measure/measure_polygon_area.html b/example/all/measure/measure_polygon_area.html
@@ -0,0 +1,197 @@
+<!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="../../../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>
+<script type="text/javascript" src="../../../src/GeoBeans/Math.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Type.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Color.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/ColorRangeMap.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Envelope.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/BaseTypes/Raster.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Utility/Utility.js"></script>
+
+<!--View-->
+<script type="text/javascript" src="../../../src/GeoBeans/Snap.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Viewer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Renderer.js"></script>
+<!--Geometry-->
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Point.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/LineString.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Line/LinearRing.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Polygon.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/MultiPoint.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/MultiLineString.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/MultiPolygon.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Geometry/Circle.js"></script>
+<!--Projection-->
+<script type="text/javascript" src="../../../src/GeoBeans/Proj.js"></script>
+<!--Stype-->
+<script type="text/javascript" src="../../../src/GeoBeans/Style.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Symbolizer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/Font.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/Fill.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/Stroke.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/PointSymbolizer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/LineSymbolizer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/PolygonSymbolizer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/FeatureStyle.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Style/Rule.js"></script>
+<!--Control-->
+<script type="text/javascript" src="../../../src/GeoBeans/Control.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Control/DragMapControl.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Control/ScrollMapControl.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Control/TrackControl.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Control/TrackControl/TrackOverlayControl.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Control/ZoomControl.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Control/MapNavControl.js"></script>
+<!--Format-->
+<script type="text/javascript" src="../../../src/GeoBeans/Format.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Format/GML.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Format/GeoJSON.js"></script>
+<!--Filter-->
+<script type="text/javascript" src="../../../src/GeoBeans/Filter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/IDFilter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/SpatialFilter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/SpatialFilter/BBoxFilter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/SpatialFilter/DistanceBufferFilter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/ComparisionFilter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/ComparisionFilter/BinaryComparisionFilter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/Expression.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/Expression/PropertyName.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/Expression/Literal.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/FilterWriter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Query.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/OrderBy.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/FilterWriter.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Query.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Filter/OrderBy.js"></script>
+<!--Workspace-->
+<script type="text/javascript" src="../../../src/GeoBeans/Field.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Feature.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/FeatureType.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Workspace.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Workspace/WFS/WFSWorkspace.js"></script>
+<!--Source-->
+<script type="text/javascript" src="../../../src/GeoBeans/Source.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Feature.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Feature/WFS.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Feature/GeoJSON.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Raster.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Raster/WMS.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Tile.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Source/Tile/QuadServer.js"></script>
+<!--Layer-->
+<script type="text/javascript" src="../../../src/GeoBeans/Layer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/FeatureLayer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/OverlayLayer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/PanoramaLayer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/ImageLayer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/Tile.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/TileCache.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/TileLayer.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Layer/ThematicLayer/RippleLayer.js"></script>
+<!--Interaction-->
+<script type="text/javascript" src="../../../src/GeoBeans/Interaction.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Draw.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Select.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Interaction/Rotate.js"></script>
+<!--Events-->
+<script type="text/javascript" src="../../../src/GeoBeans/Events.js"></script>
+<!--Render-->
+<script type="text/javascript" src="../../../src/GeoBeans/Render/Label/Maplex.js"></script>
+<!--Widget-->
+<script type="text/javascript" src="../../../src/GeoBeans/Widget.js"></script>
+<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>
+<!--Map-->
+<script type="text/javascript" src="../../../src/GeoBeans/Selection.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Earth.js"></script>
+<script type="text/javascript" src="../../../src/GeoBeans/Map.js"></script>
+
+<script type="text/javascript" src="../js/initMap.js"></script>
+
+<style type="text/css">
+	body{
+		margin: 0px;
+	}
+</style>
+<script type="text/javascript">
+	// 地图变量
+	var mapObj = null;
+	var vector = null;
+	function init(){
+		loadTileMap();
+		addGeoJSONLayer();
+		createSelectInteraction();
+	}
+
+	function addGeoJSONLayer(){
+		vector = new GeoBeans.Layer.FeatureLayer({			
+			"name" : "layername", // 图层名称
+			"geometryType" : GeoBeans.Geometry.Type.POLYGON,
+			"source" : new GeoBeans.Source.Feature.GeoJSON({
+				"url" : "../data/geojson/countries.geojson",
+				"geometryName" : "geometry",
+			}),
+			"style" : createSimplePolygonStyle()
+		});
+		mapObj.addLayer(vector);
+		mapObj.refresh();
+	}
+
+
+	function createSelectInteraction(){
+		var select = new GeoBeans.Interaction.Select({
+			"map" : mapObj,
+			"layer" : vector
+		});
+		select.onchange(onSelectionChange);
+		mapObj.addInteraction(select);
+	}
+
+	function onSelectionChange(features){
+		if(features.length>0){
+			//计算面积
+			var polygon = features[0].getGeometry();	
+			var srs = mapObj.getSpatialReference();
+			//计算多边多边形面积
+			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();
+		var symbolizer = new GeoBeans.Symbolizer.PolygonSymbolizer();
+		symbolizer.fill.color.set(50, 60, 72,1.0);
+		symbolizer.stroke.color.set(17, 17, 17,0.6);
+		symbolizer.stroke.width = 1;
+		rule.symbolizer = symbolizer;
+		style.addRule(rule);
+		return style;
+	}
+
+</script>
+<title>Interaction:Click选择</title>
+<body onload="init()">
+	<span>面积:</span>
+	<input type="text" id="area" value="0.0" placeholder="0.0" size="20">
+	<span>平方公里</span>
+	<div id="mapDiv" style="height:800px;width:100%;position:absolute;top:80px;">
+	</div>
+</body>
+
diff --git a/src/GeoBeans/BaseTypes/Type.js b/src/GeoBeans/BaseTypes/Type.js
@@ -15,7 +15,7 @@ GeoBeans.SrsType = {
  * @type {Object}
  */
 GeoBeans.Unit = {
-	degree   : "degree",
-	meter    : "meter",
-	kilometer: "kilometer"
+	Degree   : "d",
+	Meter    : "m",
+	Kilometer: "km"
 }
diff --git a/src/GeoBeans/Earth.js b/src/GeoBeans/Earth.js
@@ -39,4 +39,91 @@ GeoBeans.Earth.distance = function(lon1, lat1, lon2, lat2, unit){
 	}
 
 	return d;
-}
+}
+
+/**
+ * 计算多边形面积
+ * @param  {GeoBeans.Geometry.Polygon|GeoBeans.Geometry.MultiPolygon} polygon 多边形
+ * @param  {GeoBeans.Unit} unit 距离单位
+ * @return {float}         多边形面积(默认为米)
+ * @public
+ */
+GeoBeans.Earth.area = function(polygon, unit){
+	if(!isValid(polygon)){
+		return 0.0;
+	}
+
+	var area = 0.0;
+	switch(polygon.type){
+		case GeoBeans.Geometry.Type.POLYGON:{
+			area = GeoBeans.Earth.computePolyonArea(polygon, unit);
+		}
+		break;
+		case GeoBeans.Geometry.Type.MULTIPOLYGON:{			
+			var polygons = polygon.getPolygons();
+			polygons.forEach(function(p){
+				area += GeoBeans.Earth.computePolyonArea(p, unit);
+			});
+		}
+		break;
+	}
+
+	return area;
+}
+
+/**
+ * 计算多边形面积
+ * @param  {GeoBeans.Geometry.Polygon} polygon 多边形
+ * @param  {GeoBeans.Unit} unit 单位(默认为米)
+ * @return {float}      多边形面积
+ * @private
+ */
+GeoBeans.Earth.computePolyonArea = function(polygon, unit){
+
+	var area = 0.0;
+
+	if(polygon.type == GeoBeans.Geometry.Type.POLYGON){
+		var rings = polygon.getRings();
+		rings.forEach(function(r){
+			area += GeoBeans.Earth.computeRingArea(r,unit);
+		});
+	}
+	return area;
+}
+
+/**
+ * 计算多边形面积
+ * @param  {GeoBeans.Geometry.LinearRing} ring 环
+ * @param  {GeoBeans.Unit} unit 单位(默认为米)
+ * @return {float}     环面积
+ * @private
+ */
+GeoBeans.Earth.computeRingArea = function(ring, unit){
+
+	var area = 0.0;
+	var pts = ring.getPoints();
+	var len = pts.length;
+	var pt1 = pts[len-1];
+	var pt2 = null;
+
+	for(var i=0; i<len; i++){
+		pt2 = pts[i];
+		area += GeoBeans.Math.toRadian(pt2.x-pt1.x)　* 
+				(2 + Math.sin(GeoBeans.Math.toRadian(pt1.y)) + Math.sin(GeoBeans.Math.toRadian(pt2.y)));
+
+		pt1 = pt2;	
+	}
+	this.RADIUS = 6378136;
+
+	area = area * this.RADIUS * this.RADIUS / 2.0;
+
+	switch(unit){
+		case GeoBeans.Unit.Meter: //meter
+		break;
+		case GeoBeans.Unit.Kilometer: //kilometer
+			area = area / 1000.0 / 1000.0;
+		break;
+	}
+
+	return area;
+}
diff --git a/src/GeoBeans/Geometry/Line/LinearRing.js b/src/GeoBeans/Geometry/Line/LinearRing.js
@@ -20,4 +20,12 @@ GeoBeans.Geometry.LinearRing = GeoBeans.Class(GeoBeans.Geometry.LineString,{
 	numPoints : function(){
 		return this.points.length;
 	}
-});
+});
+
+/**
+ * 获得环上的点集合
+ * @return {Array.<GeoBeans.Geometry.Point>} 点集合
+ */
+GeoBeans.Geometry.LineString.prototype.getPoints = function(){
+	return this.points;
+}
diff --git a/src/GeoBeans/Geometry/MultiPolygon.js b/src/GeoBeans/Geometry/MultiPolygon.js
@@ -92,4 +92,13 @@ GeoBeans.Geometry.MultiPolygon = GeoBeans.Class(GeoBeans.Geometry,{
 		return pointsArray;
 	},
 
-});
+});
+
+
+/**
+ * 获取MultiPolygon的polygons
+ * @return {Array.<GeoBeans.Geometry.Polygon>} 多边形集合
+ */
+GeoBeans.Geometry.MultiPolygon.prototype.getPolygons = function(){
+	return this.polygons;
+}
diff --git a/src/GeoBeans/Geometry/Polygon.js b/src/GeoBeans/Geometry/Polygon.js
@@ -152,3 +152,11 @@ GeoBeans.Geometry.Polygon = GeoBeans.Class(GeoBeans.Geometry,{
 	},	
 
 });
+
+/**
+ * 获得多边形的rings
+ * @return {Array.<GeoBeans.Geometry.LinearRing>} 环
+ */
+GeoBeans.Geometry.Polygon.prototype.getRings = function(){
+	return this.rings;
+}
diff --git a/src/GeoBeans/Math.js b/src/GeoBeans/Math.js
@@ -0,0 +1,34 @@
+/**
+ * @classdesc
+ * 数学算法类
+ * @class
+ */
+GeoBeans.Math = {
+
+	//弧度->角度转换系数
+	RAD_2_DGR : 57.29577951308232,
+	//角度->弧度转换系数
+	DGR_2_RAD : 0.017453292519943295,	
+
+}
+
+/**
+ * 角度转换为弧度
+ * @param  {float} d  角度
+ * @return {float}    弧度
+ * ＠public
+ */
+GeoBeans.Math.toRadian = function(d){
+	return d * this.DGR_2_RAD;
+}
+
+/**
+ * 弧度转换为角度
+ * @param  {float} r  弧度
+ * @return {float}    角度
+ * ＠public
+ */
+GeoBeans.Math.toDegree = function(r){
+	return r * this.RAD_2_DGR;
+}
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"type": "FeatureCollection", "features": [{"geometry": {"type": "Point", "coordinates": [71.54965608772534, 54.22470335184164]}, "type": "Feature", "properties": {}}]}