realistic-scene-display/public/pluginFiles/plugins/measureArea.js

var measureArea = {
	modValue: {
		handler: null,
		tempPoints: [],
		viewer: null,
		tempEntities: {},
		areaIndex: 0,
		area: null,
		polygon: {},
		clampToGround: false,
		tips: $('<div class="measureArea_tips map3D">左键添加点，右键结束</div>')
	},

	init: function (options) {
		if (options.action == 'add') {
			this.modValue.viewer = options.viewer;
			this.modValue.clampToGround = options.clampToGround;
			this.addMeasureArea();
			this.modValue.tips.appendTo(this.modValue.viewer._container);
		} else if (options.action == 'remove') {
			this.removeMeasureArea();
		}
	},

	addMeasureArea: function () {
		var _this = this
		if (!this.modValue.handler) {
			this.modValue.tempPoints = [];
			this.modValue.areaIndex++;
			this.modValue.tempEntities[this.modValue.areaIndex] = [];
			this.modValue.handler = new SkyScenery.ScreenSpaceEventHandler(this.modValue.viewer.scene.canvas);
			this.modValue.handler.setInputAction(function (event) {
				var wp = event.endPosition;
				if (!SkyScenery.defined(wp)) {
					return;
				}
				var ray = _this.modValue.viewer.camera.getPickRay(wp);
				if (!SkyScenery.defined(ray)) {
					return;
				}
				var cartesian = _this.modValue.viewer.scene.globe.pick(ray, _this.modValue.viewer.scene);
				if (!SkyScenery.defined(cartesian)) {
					return;
				}
				$('#' + _this.modValue.viewer._container.id + ' .measureArea_tips').css({
					"left": wp.x + 20,
					'top': wp.y + 10
				})
			}, SkyScenery.ScreenSpaceEventType.MOUSE_MOVE);
			this.modValue.handler.setInputAction(function (click) {
				var latlng = _this.screenToLatLng(click.position.x, click.position.y)
				if (latlng) {
					_this.modValue.tempPoints.push({
						lon: latlng.lng,
						lat: latlng.lat,
						alt: latlng.alt
					});
					var tempLength = _this.modValue.tempPoints.length;
					_this.drawPoint(_this.modValue.tempPoints[_this.modValue.tempPoints.length - 1]);

					if (tempLength > 2) {
						_this.drawPoly(_this.modValue.tempPoints);
					}
				}
			}, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
			this.modValue.handler.setInputAction(function (click) {
				var cartesian = _this.modValue.viewer.camera.pickEllipsoid(click.position, _this.modValue.viewer.scene.globe.ellipsoid);
				if (cartesian) {
					var tempLength = _this.modValue.tempPoints.length;
					if (tempLength < 3) {
						alert('请选择3个以上的点再执行闭合操作命令');
					} else {
						_this.drawPoly(_this.modValue.tempPoints);
						//  highLightAssetsInArea(_this.this.modValue.tempPoints)
						var ent =
							_this.modValue.viewer.entities.add({
								position: SkyScenery.Cartesian3.fromDegrees(_this.modValue.tempPoints[_this.modValue.tempPoints.length - 1].lon, _this.modValue.tempPoints[_this.modValue.tempPoints.length - 1].lat),
								label: {
									text: _this.SphericalPolygonAreaMeters(_this.modValue.tempPoints),
									font: '22px Helvetica',
									heightReference: 2,
									pixelOffset: new SkyScenery.Cartesian2(0, -22),
									fillColor: SkyScenery.Color.WHITE,
									verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
								}
							});
						_this.modValue.tempEntities[_this.modValue.areaIndex].push(ent);
						_this.modValue.tempPoints = [];
						_this.removeMeasureArea('', true);
					}
				}
			}, SkyScenery.ScreenSpaceEventType.RIGHT_CLICK);
		}
	},

	removeMeasureArea: function (callback) {
		if (!this.modValue.viewer) {
			return;
		}
		$('#' + this.modValue.viewer._container.id + ' .measureArea_tips').remove();
		if (this.modValue.handler) {
			this.modValue.tempPoints = [];
			this.modValue.handler.destroy();
			this.modValue.handler = null;
		}
		if (callback) {
			this.init('', {
				action: 'add',
				viewer: this.modValue.viewer
			})
		}
	},

	drawPoint: function (point) {
		var entity =
			this.modValue.viewer.entities.add({
				position: SkyScenery.Cartesian3.fromDegrees(point.lon, point.lat),
				point: {
					pixelSize: 10,
					heightReference: 2,
					color: SkyScenery.Color.RED,
				}
			});
		this.modValue.tempEntities[this.modValue.areaIndex].push(entity);
	},

	drawPoly: function (points) {
		var pArray = [];
		for (var i = 0; i <= points.length; i++) {
			if (i < points.length) {
				pArray.push(points[i].lon);
				pArray.push(points[i].lat);
				pArray.push(points[i].alt);
			}
		}
		if (this.modValue.polygon[this.modValue.areaIndex]) {
			this.modValue.polygon[this.modValue.areaIndex].polygon.hierarchy.setValue(new SkyScenery.PolygonHierarchy(SkyScenery.Cartesian3.fromDegreesArrayHeights(pArray)));
		} else {
			this.modValue.polygon[this.modValue.areaIndex] = this.modValue.viewer.entities.add({
				polygon: {
					hierarchy: new SkyScenery.PolygonHierarchy(SkyScenery.Cartesian3.fromDegreesArrayHeights(pArray)),
					heightReference:1,
					//height : 5,
					material: SkyScenery.Color.CHARTREUSE.withAlpha(0.5),
					outline: true,
					outlineColor: SkyScenery.Color.YELLOW,
					outlineWidth: 2
				}
			});
			this.modValue.tempEntities[this.modValue.areaIndex].push(this.modValue.polygon[this.modValue.areaIndex]);
		}
	},

	SphericalPolygonAreaMeters: function (points) {
		var latLngs = points;
		var pointsCount = latLngs.length,
			area = 0.0,
			d2r = Math.PI / 180,
			p1, p2;
		if (pointsCount > 2) {
			for (var i = 0; i < pointsCount; i++) {
				p1 = latLngs[i];
				p2 = latLngs[(i + 1) % pointsCount];
				area += ((p2.lon - p1.lon) * d2r) *
					(2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));
			}
			area = area * 6378137.0 * 6378137.0 / 2.0;
		}

		area = Math.abs(area);

		if (area > 1000000) {
			area = (area * 0.000001).toFixed(2) + ' 平方公里';
		} else {
			area = area.toFixed(2) + '平方米';
		}
		return area;
	},

	screenToLatLng: function (x, y) {
		var pick1 = new SkyScenery.Cartesian2(x, y);
		var cartesian = this.modValue.viewer.scene.globe.pick(this.modValue.viewer.camera.getPickRay(pick1), this.modValue.viewer.scene);

		if (cartesian) {
			var cartographic = this.modValue.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
			var lat = SkyScenery.Math.toDegrees(cartographic.latitude);
			var lng = SkyScenery.Math.toDegrees(cartographic.longitude);
			var alt = cartographic.height;
			var position = {
				lat: lat,
				lng: lng,
				alt: alt
			}
		} else {
			var position = false
		}
		return position;
	},

	clear: function (options) {
		var _this = this
		$.each(this.modValue.tempEntities, function (i, t) {
			for (var j = 0; j < t.length; j++) {
				_this.modValue.viewer.entities.removeById(t[j]._id);
			}
		})
	}
}