8c87aa774bd05b18afe8df38935ab945efbb70a0.svn-base 6.79 KB
/*
 * Polygon creator class
 * Developed by The Di Lab
 * www.the-di-lab.com
 * 22.06.2010
 */
function PolygonCreator(map) {
	//create pen to draw on map
	this.map = map;
	this.pen = new Pen(this.map);
	this.latLng = '';
	var thisOjb = this;
	this.event = google.maps.event.addListener(thisOjb.map, 'click', function (event) {
		thisOjb.latLng = event.latLng;
		thisOjb.pen.draw(thisOjb.latLng);
	});
	
	this.getDot = function () {
		return (this.latLng+"").replace(/[()]/g,"");
	}

	this.getData = function () {
		return this.pen.getData() != null ? (this.pen.getData()+"").replace(/\)\(/g,";").replace(/[()]/g,"") : '';
	}

	this.showData = function () {
		return this.pen.getData();
	}
	
	this.showColor = function () {
		return this.pen.getColor();
	}

	//destroy the pen
	this.destroy = function () {
		this.pen.deleteMis();
		if (null != this.pen.polygon) {
			this.pen.polygon.remove();
		}
		google.maps.event.removeListener(this.event);
	}

	this.drawPolygon = function (latLngList) {
		$.each(latLngList, function (index, value) {
			thisOjb.pen.draw(value);
		});
		this.pen.drawPloygon(this.pen.listOfDots);
	}

	this.getPolygon = function () {
		return this.pen.polygon.getPolygonObj();
	}

}
/*
 * pen class
 */
function Pen(map) {
	this.map = map;
	this.listOfDots = new Array();
	this.polyline = null;
	this.polygon = null;
	this.currentDot = null;
	//draw function
	this.draw = function (latLng) {
		if (null != this.polygon) {
			//alert('已有一个图形区域。');
		} else {
			if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) {
				this.drawPloygon(this.listOfDots);
			} else {
				//remove previous line
				if (null != this.polyline) {
					this.polyline.remove();
				}
				//draw Dot
				var dot = new Dot(latLng, this.map, this);
				this.listOfDots.push(dot);
				//draw line
				if (this.listOfDots.length > 1) {
					this.polyline = new Line(this.listOfDots, this.map);
				}
			}
		}
	}
	//draw ploygon
	this.drawPloygon = function (listOfDots, color, des, id) {
		this.polygon = new Polygon(listOfDots, this.map, this, color, des, id);
		this.deleteMis();
	}
	//delete all dots and polylines
	this.deleteMis = function () {
		//delete dots
		$.each(this.listOfDots, function (index, value) {
			value.remove();
		});
		this.listOfDots.length = 0;
		//delete lines
		if (null != this.polyline) {
			this.polyline.remove();
			this.polyline = null;
		}
	}
	//cancel
	this.cancel = function () {
		if (null != this.polygon) {
			(this.polygon.remove());
		}
		this.polygon = null;
		this.deleteMis();
	}
	//setter
	this.setCurrentDot = function (dot) {
		this.currentDot = dot;
	}
	//getter
	this.getListOfDots = function () {
		return this.listOfDots;
	}
	//get plots data
	this.getData = function () {
		if (this.polygon != null) {
			var data = "";
			var paths = this.polygon.getPlots();
			//get paths
			paths.getAt(0).forEach(function (value, index) {
				data += (value.toString());
			});
			return data;
		} else {
			return null;
		}
	}
	//get color
	this.getColor = function () {
		if (this.polygon != null) {
			var color = this.polygon.getColor();
			return color;
		} else {
			return null;
		}

	}
}

/* 
 * Child of Pen class
 * dot class
 */
function Dot(latLng, map, pen) {
	//property
	this.latLng = latLng;
	this.parent = pen;

	this.markerObj = new google.maps.Marker({
			position : this.latLng,
			map : map
		});

	//closure
	this.addListener = function () {
		var parent = this.parent;
		var thisMarker = this.markerObj;
		var thisDot = this;
		google.maps.event.addListener(thisMarker, 'click', function () {
			parent.setCurrentDot(thisDot);
			parent.draw(thisMarker.getPosition());
		});
	}
	this.addListener();

	//getter
	this.getLatLng = function () {
		return this.latLng;
	}

	this.getMarkerObj = function () {
		return this.markerObj;
	}

	this.remove = function () {
		this.markerObj.setMap(null);
	}
}

/* 
 * Child of Pen class
 * Line class
 */
function Line(listOfDots, map) {
	this.listOfDots = listOfDots;
	this.map = map;
	this.coords = new Array();
	this.polylineObj = null;

	if (this.listOfDots.length > 1) {
		var thisObj = this;
		$.each(this.listOfDots, function (index, value) {
			thisObj.coords.push(value.getLatLng());
		});

		this.polylineObj = new google.maps.Polyline({
				path : this.coords,
				strokeColor : "#FF0000",
				strokeOpacity : 1.0,
				strokeWeight : 2,
				map : this.map
			});
	}

	this.remove = function () {
		this.polylineObj.setMap(null);
	}
}

/*
 * Child of Pen class
 * polygon class
 */
function Polygon(listOfDots, map, pen, color) {
	this.listOfDots = listOfDots;
	this.map = map;
	this.coords = new Array();
	this.parent = pen;
	this.des = 'Hello';

	var thisObj = this;
	$.each(this.listOfDots, function (index, value) {
		thisObj.coords.push(value.getLatLng());
	});

	this.polygonObj = new google.maps.Polygon({
			paths : this.coords,
			strokeColor : "#FF0000",
			strokeOpacity : 0.8,
			strokeWeight : 2,
			fillColor : "#FF0000",
			fillOpacity : 0.05,
			map : this.map
		});

	this.remove = function () {
		this.info.remove();
		this.polygonObj.setMap(null);
	}

	//getter
	this.getContent = function () {
		return this.des;
	}

	this.getPolygonObj = function () {
		return this.polygonObj;
	}

	this.getListOfDots = function () {
		return this.listOfDots;
	}

	this.getPlots = function () {
		return this.polygonObj.getPaths();
	}

	this.getColor = function () {
		return this.getPolygonObj().fillColor;
	}

	//setter
	this.setColor = function (color) {
		return this.getPolygonObj().setOptions({
			fillColor : color,
			strokeColor : color,
			strokeWeight : 2
		});
	}

	this.info = new Info(this, this.map);

	//closure
	this.addListener = function () {
		var info = this.info;
		var thisPolygon = this.polygonObj;
		google.maps.event.addListener(thisPolygon, 'rightclick', function (event) {
			info.show(event.latLng);
		});
	}
	//this.addListener();

}

/*
 * Child of Polygon class
 * Info Class
 */
function Info(polygon, map) {
	this.parent = polygon;
	this.map = map;

	this.color = document.createElement('input');

	this.button = document.createElement('input');
	$(this.button).attr('type', 'button');
	$(this.button).val("Change Color");
	var thisOjb = this;

	//change color action
	this.changeColor = function () {
		thisOjb.parent.setColor($(thisOjb.color).val());
	}

	//get content
	this.getContent = function () {
		var content = document.createElement('div');

		$(this.color).val(this.parent.getColor());
		$(this.button).click(function () {
			thisObj.changeColor();
		});

		$(content).append(this.color);
		$(content).append(this.button);
		return content;
	}

	thisObj = this;
	this.infoWidObj = new google.maps.InfoWindow({
			content : thisObj.getContent()
		});

	this.show = function (latLng) {
		this.infoWidObj.setPosition(latLng);
		this.infoWidObj.open(this.map);
	}

	this.remove = function () {
		this.infoWidObj.close();
	}

}