2.4 地图中加载数据

在使用SDK进行业务功能开发前,需要加载必需的模型数据、地形影像数据,在其基础上进行业务的开发和拓展。

我们先加载地形影像数据(DomDataDemData)。 地形影像的路径格式一般如下:

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>

加载效果如图:

DOM加载

DemData数据同理:

var demUrl = "http://XXX/....../DEM/tms.xml";
function loadDemData(){
    var demData = new CooSDK.DemData({
        url: demUrl
    });
}

加载效果如图:

DEM加载

人工模型数据同理:

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文档和相关示例。

results matching ""

    No results matching ""