Drawsee IMS 二维地图开发 快速入门

一. 简介

    Drawsee IMS 二维开发平台可以帮助您开发自己的WebGis应用，您只需要有基本的网页编程知识就可以通过本教程的学习了解基本的IMS二维开发平台知识。

二. 快速入门

1. 放置插件：

    首先创建一个html页面，在<body>标签中插入如下内容：

<OBJECT id="oMapViewer" codeBase=http://dev.drawsee.com/CAB/MeMapViewer.CAB#version=2,0,2,26 height="500px" width="100%" classid=CLSID:D19243C5-D51A-4624-A5CB-ECA63DC9D894></OBJECT>

2. 打开地图

    放置插件后，需要使用JavaScript函数打开地图。在<head>标签中插入如下内容：

<script language="JavaScript" for="oMapViewer" event="EventHappen(eventName)">
if (eventName=='initcomplete')
{
 oMapViewer.openDB("[http://www.mapok.com/Service20/MapServer/MapService.asmx]shuixi");

	oMapViewer.openMap("中国水系图");
	oMapViewer.whole();
	oMapViewer.redraw();
}
</script>

3. 添加地图控制操作

    通过上述两个步骤之后便可以在网页上显示地图了。现在需要给地图添加一些基本功能如“放大”，“缩小”等功能来丰富WebGis的应用。

    添加“放大”，“缩小”,“漫游”等操作只需要创建一个JavaScript函数，并调用地图插件提供的相应方法即可。例如，如果要添加上述操作只需要在html的<head>标记中插入如下内容即可：

function zoomIn()
{
	oMapViewer.setCurrentTool(1); //调用地图提供的放大方法
}

function zoomOut()
{
	oMapViewer.setCurrentTool(2); //调用地图提供的缩小方法
}

function cruiseMap() //漫游
{
	oMapViewer.setCurrentTool(3);
}
function wholeMap() //全图
{
	oMapViewer.whole();
}

4. 添加简单实体

    可以通过地图插件提供的相关方法向地图中添加不同的实体。同样在html的<head>标签中插入一个JavaScript函数，并将添加实体的方法写入其中。如添加一个简单的点实体：

<script language="javascript" for="oMapViewer" event="EventHappen(eventName)">
function addPoint()

	oClassFactory = oMapViewer.classFactory;
	x = oMapViewer.renderContext.coordSystem.centerPoint.x;
	y = oMapViewer.renderContext.coordSystem.centerPoint.y;
	var blueColor = oClassFactory.createColorAdvance(0, 0, 255, 0.7);
	var pointLegend = oClassFactory.createLegend();
	pointLegend.initSimplePoint(3, blueColor, true);
	var oLayerUser = oMapViewer.dynamicLayers.addLayer('NewPointLayer');
	var pointObject = oLayerUser.addPointObject(x, y);
	pointObject.legend = pointLegend;
	pointObject.text = "点实体";
		
	oMapViewer.redraw();
}
</script>

5. 添加响应事件

    除了上面所述的操作外还可以向地图添加事件响应，事件响应需要捕捉插件发出的事件消息。例如添加鼠标右键按下事件的代码如下：

<script language="javascript" for="oMapViewer" event="rButtonDown(flag, x, y)">
	alert("X坐标: " + x + " Y坐标: " + y);
</script>

    经过上面的5个步骤后，一个简单的WebGIS应用就完成了。查看运行结果或者您也可以手动创建一个html文件，并将如下的内容复制到里面保存，然后直接打开浏览。

    完整代码如下：

<!-- 2d 快速入门演示页面 -->

<html>
<head>
<title>Drawsee IMS 2D 快速入门演示页面</title>

<script language="javascript" for="oMapViewer" event="EventHappen(eventName)">
if(eventName == 'initcomplete')
{
oMapViewer.openDB("[http://www.mapok.com/Service20/MapServer/MapService.asmx]shuixi");
oMapViewer.openMap("中国水系图");
oMapViewer.whole();
oMapViewer.redraw();
}
</script>

<script language="javascript" for="oMapViewer">
function zoomIn()
{
oMapViewer.setCurrentTool(1);
}

function zoomOut()
{
oMapViewer.setCurrentTool(2);
}

function cruiseMap()
{
oMapViewer.setCurrentTool(3);
}

function wholeMap()
{
oMapViewer.whole();
}

function addPoint()
{
oClassFactory = oMapViewer.classFactory;
x = oMapViewer.renderContext.coordSystem.centerPoint.x;
y = oMapViewer.renderContext.coordSystem.centerPoint.y;
var blueColor = oClassFactory.createColorAdvance(0, 0, 255, 0.7);
var pointLegend = oClassFactory.createLegend();
pointLegend.initSimplePoint(3, blueColor, true);
var oLayerUser = oMapViewer.dynamicLayers.addLayer('NewPointLayer');
var pointObject = oLayerUser.addPointObject(x, y);
pointObject.legend = pointLegend;
pointObject.text = "点实体";

oMapViewer.redraw();
}
</script>

<script language="javascript" for="oMapViewer" event="rButtonDown(flag, x, y)">
alert("X坐标: " + x + " Y坐标: " + y);
</script>

</head>

<body>
<center>
<input type="button" value="放大" onclick="zoomIn()" />
<input type="button" value="缩小" onclick="zoomOut()" />
<input type="button" value="漫游" onclick="cruiseMap()" />
<input type="button" value="全图" onclick="wholeMap()">
<input type="button" value="添加点" onclick="addPoint()" />
</center>

<OBJECT id="oMapViewer" codeBase=http://dev.drawsee.com/CAB/MeMapViewer.CAB#version=2,0,2,26 height="100%" width="100%" classid=CLSID:D19243C5-D51A-4624-A5CB-ECA63DC9D894></OBJECT>
</body>
</html>