现在我们为地图增加一些基本的地图操作,比如放大、缩小、移动和全图,这样我们就可以更好的浏览地图了。在标签下面增加下面这些代码。
在<body>标签下面增加下面这些代码。
<center>
<input type=button value="放大" onclick="oMapViewer.setCurrentTool(1)">
<input type=button value="缩小" onclick="oMapViewer.setCurrentTool(2)">
<input type=button value="移动" onclick="oMapViewer.setCurrentTool(3)">
<input type=button value="全图" onclick="oMapViewer.whole()">
</center>
如果您熟悉HTML的语法,您可以看到我们只是增加了四个按钮,在每个按钮的onclick事件中我们调用了oMapViewer对象的一些方法。
oMapViewer.setCurrentTool(oper)这一方法将激发地图的交互操作,传入不同的oper参数就会调用相应的地图操作。
oMapViewer.setCurrentTool(1)激发地图的放大操作,调用后鼠标光标将显示为一个十字,用户可以点击地图上的任意点放大相应区域,用户也可以在地图上拖拉出矩形框放大相应区域。
oMapViewer.setCurrentTool(2)激发地图的缩小操作,调用后鼠标光标将显示为一个十字,用户可以点击地图上的任意点缩小相应区域,用户也可以在地图上拖拉出矩形框缩小相应区域。
oMapViewer.setCurrentTool(3)激发地图的移动操作,调用后鼠标光标将显示为移动光标。用户可以拖动地图进行浏览。
oMapViewer.whole() 这一方法我们前面再打开地图的时候已经用过,调用这一方法将使得地图显示为全图状态。
完整HTML代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>朝夕科技 MapEngine IMS 2007</title>
<script language="JavaScript" for=oMapViewer event=EventHappen(eventName)>
if (eventName=='initcomplete')
{
oMapViewer.openDB("[]http://www.mapok.com/mapokstudy/DataServer/MapData/4-10web/");
oMapViewer.openMap("中国地图");
oMapViewer.whole();
oMapViewer.redraw();
}
</SCRIPT>
</head>
<body>
<center>
<input type=button value="放大" onclick="oMapViewer.setCurrentTool(1)">
<input type=button value="缩小" onclick="oMapViewer.setCurrentTool(2)">
<input type=button value="移动" onclick="oMapViewer.setCurrentTool(3)">
<input type=button value="全图" onclick="oMapViewer.whole()">
</center>
<center>
<center>
<OBJECT id=oMapViewer codeBase=http://www.mapok.com/mapokstudy/MeInclude/MeMapViewer.CAB#version=2,0,2,19 height="100%" width="100%" classid=CLSID:D19243C5-D51A-4624-A5CB-ECA63DC9D894></OBJECT>
</center>
</body>
</html>

查看运行结果