Drawsee Earth三维开发平台由后端的数据准备工具和前台发布系统组成,开发商可以把影像、地形、矢量数据集成起来,向互联网或企业内网用户提供告诉浏览、查询、分析功能;通过平台丰富的二次开发接口,可以在三维场景中实现各种特化的行业应用。
1. 放置插件:
首先创建一个html页面,在<body>标签中插入如下内容:
2. 打开地图
插件放置后,就可以通过JavaScript函数打开地图影像数据。只需在<head>标签中插入如下内容:
<script language="javascript" for="oEarthViewer" event="eventHappen(eventName)">
if(eventName == "initcomplete")
{
oEarthViewer.openTerrain("http://www.mapok.com/service20/TerrainService/TerrainService.asmx/","China",
"http://www.mapok.com/service20/TerrainImageService/TerrainImageService.asmx/","earthnew");
dynLayer = oEarthViewer.classFactory.createDynamicLayer3d();
dynLayer.name = "NewLayer";
oEarthViewer.dynamicLayers.addLayer(dynLayer);
}
</script>
3. 添加简单实体
通过上述两步步骤之后便可以显示三维图像了,现在添加一些新功能来丰富三维WebGis的应用。
可以通过地图插件提供的相关方法向地图中添加不同的实体。同样需要在html的<head>标签中插入函数来实现:
<script language="javascript" for="oEarthViewer">
function addBall()
{
var ptCenter = oEarthViewer.camera.getCenter();
var ptEye = oEarthViewer.camera.getEye();
var radius = ptEye.y*0.02;
var height = oEarthViewer.camera.getGroundHeight(ptCenter.x, ptCenter.z);
var blueBall = dynLayer.addBallObject(ptCenter.x, height, ptCenter.z, radius);
blueBall.text = '小球';
}
</script>
4. 添加事件响应
除了上面所述的操作外还可以向地图添加事件响应,捕捉事件响应需要得到插件发出的消息。例如,添加鼠标按下事件:
<script language="javascript" for="oEarthViewer" event="mouseDown(button, x, y)"> window.status = "X坐标: " + x + " Y坐标: " + y; </script>
经过上述的4个步骤后,一个简单的三维WebGis应用就完成了。查看运行结果或者您也可以手动创建一个html文件,并将如下的内容复制到里面保存,然后直接打开浏览。
完整代码如下:
<!-- 3d 快速入门演示页面 -->
<html>
<head>
<title></title>
<script language="javascript" for="oEarthViewer">
function addBall()
{
var ptCenter = oEarthViewer.camera.getCenter();
var ptEye = oEarthViewer.camera.getEye();
var radius = ptEye.y * 0.02;
var height = oEarthViewer.camera.getGroundHeight(ptCenter.x, ptCenter.z);
var ball = dynLayer.addBallObject(ptCenter.x, height, ptCenter.z, radius);
ball.text = "小球";
}
</script>
<script language="javascript" for="oEarthViewer" event="eventHappen(eventName)">
if(eventName == "initcomplete")
{
oEarthViewer.openTerrain("http://www.mapok.com/service20/TerrainService/TerrainService.asmx/","China", "http://www.mapok.com/service20/TerrainImageService/TerrainImageService.asmx/","earthnew");
dynLayer = oEarthViewer.classFactory.createDynamicLayer3d();
dynLayer.name = "NewLayer";
oEarthViewer.dynamicLayers.addLayer(dynLayer);
}
</script>
<script language="javascript" for="oEarthViewer" event="mouseDown(button, x, y)">
window.status = "X坐标: " + x + " Y坐标: " + y;
</script>
</head>
<body>
<center>
<input type="button" value="添加球" onclick="addBall()" />
</center>
<object id="oEarthViewer" codeBase="http://dev.drawsee.com/cab/MeEarth20.CAB#version=1,0,0,5" height="97%" width="100%" classid="CLSID:C54A9308-CECF-42F4-85DD-96F8AD9A67C6" viewastext></object>
</body>
</html>