2.4 地图中加载数据
在使用SDK进行业务功能开发前,需要加载必需的模型数据、地形影像数据,在其基础上进行业务的开发和拓展。
我们先加载地形影像数据(DomData、DemData)。 地形影像的路径格式一般如下:
var domUrl = "X:/XXX/....../XXX/tms.xml";
或者:
var domUrl = "http://XXX/....../XXX/tms.xml";
创建DomData对象,传入路径:
var domData = new CooSDK.DomData({
url: domUrl,
isLocate: true
});
同理,DemData对象也可这么传。
我们通过点击一个button按钮来触发地形影像的加载,并进行自动定位:
<input id="Button0" type="button" value="创建DOM" onclick="loadDomData()" />
<script type="text/javascript">
var cooMap = new CooSDK.CooMap("map", {
licIp: "xxx.xxx.xxx.xxx",
licPort: xxxx
});
var domUrl = "http://XXX/....../DOM/tms.xml";
function loadDomData(){
var domData = new CooSDK.DomData({
url: domUrl,
isLocate: true
});
}
</script>
加载效果如图:
DemData数据同理:
var demUrl = "http://XXX/....../DEM/tms.xml";
function loadDemData(){
var demData = new CooSDK.DemData({
url: demUrl
});
}
加载效果如图:
人工模型数据同理:
var modelUrl = "http://XXX/....../XXX/0.c3s.zip";
var modelData = new CooSDK.ModelData({
url: modelUrl
});
加载效果如图:
完整网页代码如下,仅供参考,数据路径请根据实际情况自行修改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="demo for CooSDK.">
<title>CooSDK Demo</title>
</head>
<body>
<script type="text/javascript" src="../dist/cooSdkApi.js"></script>
<div id="map" style="width: 100%; height: 700px;"></div>
<input id="Button0" type="button" value="创建DOM" onclick="loadDomData()" />
<input id="Button1" type="button" value="创建DEM" onclick="loadDemData()" />
<input id="Button2" type="button" value="创建人工模型" onclick="loadModelData()" />
</body>
<script type="text/javascript">
var cooMap = new CooSDK.CooMap("map", {
licIp: "xxx.xxx.xxx.xxx",
licPort: xxxx
});
var domUrl = "http://XXX/....../DOM/tms.xml";
function loadDomData() {
var domData = new CooSDK.DomData({
url: domUrl,
isLocate: true
});
}
var demUrl = "http://XXX/....../DEM/tms.xml";
function loadDemData() {
var demData = new CooSDK.DemData({
url: demUrl
});
}
var modelUrl = "http://XXX/....../XXX/0.c3s.zip";
function loadModelData(){
var modelData = new CooSDK.ModelData({
url: modelUrl
});
}
</script>
</html>
现在你已经学会在三维地图中加载数据,可以继续开发相关业务功能,请查看详细的API文档和相关示例。