Este exemplo tenta explorar todas as funcionalidades disponÃveis na classe Polygon.
<html>
<head>
<title>Test SAPO.Maps.Overlay.Polygons</title>
<script type="text/javascript" src="http://js.sapo.pt/Bundles/SAPOMapsAPI.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new SAPO.Maps.Map('map');
}
function isValid(){
if(!polygon){
alert('you must add a polygon first');
return false;
}
return true;
}
var polygon;
function sapoPolygon(){
polygon = new SAPO.Maps.Polygon([ new OpenLayers.LonLat(-9, 38),
new OpenLayers.LonLat(-6, 38),
new OpenLayers.LonLat(-6, 35),
new OpenLayers.LonLat(-9, 35),
new OpenLayers.LonLat(-9, 38)
]);
map.addOverlay(polygon);
}
function polygon_nrvertices(){
if(!isValid())return;
alert('number of vertices: ' + polygon.getVertexCount());
}
function polygon_getvertice(){
if(!isValid())return;
var lonlat = polygon.getVertex(1);
alert('getting vertice number 1. lat = ' + lonlat.lat + ' lon = ' + lonlat.lon);
}
function polygon_getarea(){
if(!isValid())return;
alert('polygon area = ' + polygon.getArea() + ' m2');
}
function polygon_bounds(){
if(!isValid())return;
var bounds = polygon.getBounds();
alert('bounds: minlat = ' + bounds.bottom + ' minlon = ' + bounds.left + ' maxlat = ' + bounds.top + ' maxlon = ' + bounds.right);
}
function polygon_hide(){
if(!isValid())return;
polygon.hide();
}
function polygon_show(){
if(!isValid())return;
polygon.show();
}
function polygon_insertvertice(){
if(!isValid())return;
var lonlat = new OpenLayers.LonLat(-7, 39);
polygon.insertVertex(1, lonlat);
}
function polygon_changestyle(){
if(!isValid())return;
var style = {
fillColor: '#ff00ff',
fillOpacity: 0.4,
strokeColor: '#000000',
strokeOpacity: 0.5,
strokeWidth: 5,
strokeLinecap: 'round',
strokeDashstyle: 'dot',
pointRadius: 6,
cursor: '',
display: ''
};
polygon.setStyle(style);
}
function polygon_isvisible(){
if(!isValid())return;
alert(polygon.isHidden());
}
function enableEvents(){
if(!isValid())return;
polygon.registerEvent('mouseover', this, events.mouseover);
polygon.registerEvent('mouseout', this, events.mouseout);
polygon.registerEvent('mousedown', this, events.mousedown);
polygon.registerEvent('mouseup', this, events.mouseup);
polygon.registerEvent('click', this, events.click);
polygon.registerEvent('dbclick', this, events.dbclick);
polygon.registerEvent('drag', this, events.drag);
polygon.registerEvent('dragstart', this, events.dragstart);
polygon.registerEvent('dragend', this, events.dragend);
}
function disableEvents(){
if(!isValid())return;
cleanMsg();
polygon.unRegisterEvent('mouseover', this, events.mouseover);
polygon.unRegisterEvent('mouseout', this, events.mouseout);
polygon.unRegisterEvent('mousedown', this, events.mousedown);
polygon.unRegisterEvent('mouseup', this, events.mouseup);
polygon.unRegisterEvent('click', this, events.click);
polygon.unRegisterEvent('dbclick', this, events.dbclick);
polygon.unRegisterEvent('drag', this, events.drag);
polygon.unRegisterEvent('dragstart', this, events.dragstart);
polygon.unRegisterEvent('dragend', this, events.dragend);
}
function clone(){
if(!isValid())return;
polygon = polygon.clone();
map.addOverlay(polygon);
}
var events = {
mouseover: function(){ addMsg('mouseover'); },
mouseout: function(){ addMsg('mouseout'); },
mousedown: function(){ addMsg('mousedown'); },
mouseup: function(){ addMsg('mouseup'); },
click: function(){ addMsg('click'); },
dbclick: function(){ addMsg('dbclick'); }
}
function addMsg(msg){
var elem = document.getElementById('debug');
elem.innerHTML += ' -' + msg + '- ';
}
function cleanMsg(){ document.getElementById('debug').innerHTML = ''; }
</script>
</head>
<body onload="init();">
<div id='map' style='width:50%; height:400px;'></div>
<p>This script tests and shows the SAPO.Maps.Overlay.Polygon type</p>
<br />
<div>
<input type="button" onclick="sapoPolygon();" value="Show polygon" />
<input type="button" onclick="polygon_nrvertices();" value="Nr Vertices" />
<input type="button" onclick="polygon_getvertice();" value="Get Vertice" />
<input type="button" onclick="polygon_getarea();" value="Get area" />
<input type="button" onclick="polygon_bounds();" value="Bounds" />
<input type="button" onclick="polygon_hide();" value="Hide" />
<input type="button" onclick="polygon_show();" value="Show" />
<input type="button" onclick="polygon_insertvertice();" value="Insert Vertex" />
<input type="button" onclick="polygon_changestyle();" value="Change Style" />
<input type="button" onclick="polygon_isvisible();" value="is hidden" />
<input type="button" onclick="enableEvents();" value="Turn events on" />
<input type="button" onclick="disableEvents();" value="Turn events off" />
<input type="button" onclick="clone();" value="Clone" />
</div>
<div id="debug"></div>
</body>
</html>