/*
|
* 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();
|
}
|
|
}
|
