运行范例

描述

该范例展示如何通过已有路径和自定义路径展示和设置节点动画

了解微软脚本库的更多信息请参见微软官方帮助文档.

代码 (文件格式为 UTF-8)


<!DOCTYPE>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> 节点动画</title>
<script type="text/javascript" src="SuperMap.Include.js"> </script>

<script type="text/javascript">
var htmlUrl = document.location.host;
var scene = null;
var jeepModel;
var trackline;
var nodeAnmination;
var geoline;
var geomodel
var model;

//判断网页的打开方式是本地打开还是通过网络打开
//不同的打开方式url赋值不同
if (htmlUrl == "") {
    htmlUrl = "http://localhost:8090";
}
else {
    htmlUrl = "http://" + htmlUrl;
}
var sceneUrl = htmlUrl + "/iserver/services/3D-sample/rest/realspace";

function onPageLoad() {
    //初始化三维场景控件
    try {
        //初始化三维场景控件实例,参数为包含控件的HTML元素
        sceneControl = new SuperMap.Web.UI.Controls.SceneControl($get("sceneControlDiv"), initCallback, failedCallback);
    }
    catch (e) {
        //若没有安装插件,则抛出该异常
        if (e.name == SuperMap.Web.Realspace.ExceptionName.PlugInNotInstalled) {
            var url = htmlUrl + "/iserver/iClient/for3D/plugin/Setup.exe";
            document.write("<a href='" + url + "'> 未检测到 SuperMap iClient3D for  Plugin 插件,请单击此处下载并安装插件。</a> ");
            return;
        }
        //若使用非IE浏览器,则抛出该异常
        else if (e.name == SuperMap.Web.Realspace.ExceptionName.BrowserNotSupport) {
            document.write("<p> SuperMap iClient3D for  Plugin 目前仅支持 InternetExplorer 浏览器,请更换浏览器后重新尝试加载本页面。</p> ");
            return;
        }
        //抛出其他异常
        else {
            alert(e.message);
        }
    }
}
//控件初始化完成后的回调函数,初始化完成之后才能进行数据加载
function initCallback() {
    //获取Realspace控件的场景,控件和场景是一对一的捆绑关系
    scene = sceneControl.get_scene();
    scene.open(sceneUrl, "scene_CBD")
}

//控件初始化失败后的回调函数
function failedCallback() {
    alert("Realspace initialized failed!");
}

function drawLine() {
    var newAction = new SuperMap.Web.UI.Action3Ds.DrawLine3D(sceneControl);
    sceneControl.set_sceneAction(newAction);
}

function clearAll() {
    scene.get_trackingLayer3D().removeAll();
}

SuperMap.Web.UI.Action3Ds.DrawLine3D = function (sceneControl) {
    SuperMap.Web.UI.Action3Ds.DrawLine3D.initializeBase(this);
    this._name = "DrawLine3D";
    this._sceneControl = sceneControl;
    this._points = new SuperMap.Web.Core.Point3Ds();
    this._point;
    this._type = SuperMap.Web.UI.Action3Ds.SceneActionType.POINTSELECT;
    this._id1;//记录静态id
    this._id2;//记录动态id
    //this._line;
};
SuperMap.Web.UI.Action3Ds.DrawLine3D.prototype = {

    dispose: function () {
        this._sceneControl = null;
    },

    onMouseDown: function (e) {
        if (e.get_flagType() % 2 == 1) {
            if (this._point == null) {
                var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
                this._point = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);
                this._points.add(new SuperMap.Web.Core.Point3D(this._point.x, this._point.y, (this._point.z + 0.5)));
                jeepModel = new SuperMap.Web.Core.GeoModel();
                var modelurl = htmlUrl + "/RealspaceSample/jeep.zip";
                jeepModel.fromModelFile(modelurl);
                jeepModel.set_position(this._point);
                var style = new SuperMap.Web.Core.Style3D();
                style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.RELATIVE_TO_GROUND);
                style.set_bottomAltitude("0.5");
                var feature = new SuperMap.Web.Core.Feature3D();
                feature.set_geometry(jeepModel);
                feature.set_style3D(style);
                var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
                trackingLayer.add(feature, "qc");
            } else {
                var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
                this._point = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);

                this._points.add(new SuperMap.Web.Core.Point3D(this._point.x, this._point.y, (this._point.z + 0.5)));
                trackline = new SuperMap.Web.Core.GeoLine3D([this._points]);
                var feature3D = new SuperMap.Web.Core.Feature3D();
                var style = new SuperMap.Web.Core.Style3D();
                style.set_lineColor(new SuperMap.Web.Core.Color(0, 255, 0, 255));
                style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.RELATIVE_TO_GROUND);
                style.set_lineWidth(3);
                feature3D.set_style3D(style);
                feature3D.set_geometry(trackline);
                var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
                trackingLayer.set_isVisible(true);
                trackingLayer.removeAt(this._id2);
                trackingLayer.removeAt(this._id1);
                this._id2 = null;
                this._id1 = trackingLayer.add(feature3D, "line3D1");
            }
        } else {
            var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
            trackingLayer.removeAt(this._id2);
            this._point = null;
            this._id1 = null;
            this._id2 = null;
            this._points = new SuperMap.Web.Core.Point3Ds();
            var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl);
  
            sceneControl.set_sceneAction(panAction);
            nodeAnmination = jeepModel.get_nodeAnimationState();
            nodeAnmination.setTrack(trackline);
            nodeAnmination.set_isEnabled(true);
            nodeAnmination.set_length(10);
            nodeAnmination.set_timePosition(0);
        }

    },

    onMouseMove: function (e) {
        if (this._point != null) {
            var points = new SuperMap.Web.Core.Point3Ds();
            points.add(this._point)
            var pt = new SuperMap.Pixel(e.get_clientX(), e.get_clientY());
            var temppoint = this._sceneControl.pixelToGlobe(pt, SuperMap.Web.Realspace.PixelToGlobeMode.TerrainAndModel);

            //var temppoint = new SuperMap.Web.Core.Point3D(e.get_longitude(), e.get_latitude(), e.get_altitude());
            points.add(new SuperMap.Web.Core.Point3D(temppoint.x, temppoint.y, (temppoint.z + 0.5)));
            var line = new SuperMap.Web.Core.GeoLine3D([points]);

            var feature3D = new SuperMap.Web.Core.Feature3D();
            var style = new SuperMap.Web.Core.Style3D();
            // style.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.RELATIVE_TO_GROUND);
            style.set_lineWidth(3);
            style.set_lineColor(new SuperMap.Web.Core.Color(0, 255, 0, 255));
            feature3D.set_style3D(style);
            feature3D.set_geometry(line);
            var trackingLayer = this._sceneControl.get_scene().get_trackingLayer3D();
            trackingLayer.set_isVisible(true);
            trackingLayer.removeAt(this._id2);
            this._id2 = trackingLayer.add(feature3D, "line3D2");
        }
    }
};
SuperMap.Web.UI.Action3Ds.DrawLine3D.registerClass('SuperMap.Web.UI.Action3Ds.DrawLine3D', SuperMap.Web.UI.Action3Ds.SceneAction, Sys.IDisposable);

function setTrackline() {
	var camera = new SuperMap.Web.Realspace.Camera(116.458686,39.909235,19.529652);
	camera.set_heading(5.488544);
	camera.set_tilt(74.728929);
	scene.set_firstPersonCamera(camera);
    model = scene.get_layer3Ds().get_item("NodeAnimation").get_feature3Ds().get_item(0).get_geometry();

    if (model.get_type() == SuperMap.Web.Core.GeometryType.GEOPLACEMARK) {
        if (model.get_geometry() != null) {
            geomodel = new SuperMap.Web.Core.GeoModel();
            geomodel._set_innerGeometry(model.get_geometry());
        }
    }
    nodeAnmination = geomodel.get_nodeAnimationState();
    line = scene.get_layer3Ds().get_item("NodeAnimation").get_feature3Ds().get_item(1).get_geometry();
    if (line.get_type() == SuperMap.Web.Core.GeometryType.GEOPLACEMARK) {
        if (line.get_geometry() != null) {
            geoline = new SuperMap.Web.Core.GeoLine3D();
            geoline._set_innerGeometry(line.get_geometry());
        }
    }
    nodeAnmination.setTrack(geoline);
    nodeAnmination.set_isEnabled(true);
    var nodeLeng = document.getElementById("len").value;
    nodeAnmination.set_length(nodeLeng);
    nodeAnmination.set_timePosition(0);
}

function run() {
    nodeAnmination.set_isEnabled(true);
}

function stop() {
    nodeAnmination.set_isEnabled(false);
}

function setPlayMode() {
    if (model1[0].checked) {
        nodeAnmination.set_playMode(SuperMap.Web.Realspace.PlayMode.SRONCE);
    }
    if (model1[1].checked) {
        nodeAnmination.set_playMode(SuperMap.Web.Realspace.PlayMode.SRLOOP);
    }
}
</script>
</head>
<body onLoad="onPageLoad()">

<div id="parameters"
     style="position: absolute; left: 1%; top: 1%; width: 23%; height: 100%; padding: 10px; border:2px solid #cfcfcf;">
    </br> </br> <br/> 参数设置:</br> </br> </br>
    <div style="width:250px;padding: 10px; border:2px solid #cfcfcf;">
        设置动画时长:<input id="len" type="text" value="10" style="width: 70px"> 秒<br/> <br/>
        设置播放模式:<br/> <br/> <input id="model" name="model1" type="radio" value="1" onclick="setPlayMode()"> 播放一次<input
            name="model1" type="radio" value="0" onclick="setPlayMode()"> 循环播放<br/> <br/>

        <div style="">
            <input id="viewpoint" type="button" value="绘制轨迹" style="width: 70px;height: 27px" onClick="drawLine()"/>   
            <input id="settrack" type="button" value="已有轨迹" style="width: 70px;height: 27px" onClick="setTrackline()"/>   
            <br/> <br/> <input id="play" type="button" name="play" value="播放" onclick="run()">    <input
                type="button" name="stop" value="停止" onclick="stop()">

               <input id="clear" type="button" value="清除结果" style="width: 70px;height: 25px"
                                     onClick="clearAll()"/>
        </div>
    </div>
</div>
<div id="sceneControlDiv"
     style="position: absolute; height: 98%; left: 23%; top: 1%;width: 80%;border:3px solid #cfcfcf;">
</div>

            </div>
    </body>
</html>