|
Follow the steps below.
Check here to see the Red Line shape coordinates. Check here to automatically close the redline polygon when the starting node is clicked. |
var mapview;
var redline; //the red-lining tool
var rlflag=true;
var ordflag=false;
var mapMoveFlag=false;
function init()
{
document.getElementById("redLineOrdFlag").checked = false;
showMap();
redLine();
}
function showMap()
{
var baseURL = "http://"+document.location.host+"/mapviewer";
var mapCenterLon = -122.45;
var mapCenterLat = 37.6706;
var mapZoom = 4;
var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
mapview = new MVMapView(document.getElementById("map"), baseURL);
mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));
mapview.setCenter(mpoint);
mapview.setZoomLevel(mapZoom);
mapview.attachEventListener(MVEvent.RECENTER,checkMapMove);
mapview.attachEventListener(MVEvent.MOUSE_CLICK,getRedLineOrd);
mapview.display();
}
//this method returns a new red-line tool
function redLine()
{
redline = new MVRedlineTool("mvdemo.L.RAMP", "mvdemo.C.RED");
mapview.addRedLineTool(redline);
}
function checkMapMove()
{
mapMoveFlag = true;
}
function getRedLineOrd()
{
if(mapMoveFlag)
{
mapMoveFlag = false;
return;
}
if (rlflag && ordflag)
alert("Redline coordinates:"+ redline.getOrdinates()+" ");
}
function showRedLineOrd(item)
{
ordflag=item.checked;
}
function setRLFlag(flag)
{
rlflag=flag;
}
The onLoad function of the page body invokes the init() method above, which
initializes the map as well as a red-line tool.
The code below shows how this demo invokes various methods on the red-line tool to perform tasks such as displaying a finished shape.<body onload="javascript:init()">
<LI><a href="javascript:redline.init();setRLFlag(true)">Click here to enter red-lining mode</a>...</LI> <LI>When done drawing, <a href="javascript:redline.generateArea();setRLFlag(false)"> click here to generate a red line polygon</a></LI> <LI><a href="javascript:redline.clear();setRLFlag(false)"> Click here to remove the red line polygon</a></LI> <LI>Please go back to step 1 if you would like to draw a new shape on the map.