fuyuhang
/
Project_yhfu
镜像自地址 http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_animatorTrain"></title>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #toolbar {
            position: absolute;
            top: 50px;
            right: 10px;
            text-align: center;
            z-index: 100;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id="toolbar" class="panel panel-primary">
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.title_animatorTrain"></h5></div>
    <div class='panel-body content'>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_play" onclick="startAnimator()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_pause" onclick="pauseAnimator()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_stop" onclick="stopAnimator()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_acceleration" onclick="increaseSpeed()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deceleration" onclick="decreaseSpeed()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_switchDirection" onclick="setReverseAnimator()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_switchTwinkle" onclick="setGlint()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_switchTails" onclick="setTailr()"/>&nbsp;
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_showOrHideTrain" onclick="show()"/>
    </div>
</div>
<div id="map"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text" id="cartocssStr">
          /*此处定义不同的颜色变量，在后面可以重复用这些颜色值*/

        @waterColor:rgb(34,56,78);
        @roadColora:rgb(109,102,91);
        @roadColorb:rgb(109,102,91);
        @railwayColora:rgb(80,80,80);
        @railwayColorb:rgb(137,137,137);
        @vegetationColor:rgb(27,27,27);
        @continentColor:rgb(68,68,68);
        @provinceLineColor:rgb(180,0,0);


        #China_Railway_L___China::a{

        /*每一段的长度为15px,间隔也是15px*/
        line-color:@railwayColora;
        line-width:2.5;
        }
        #China_Railway_L___China::b{

        /*每一段的长度为15px,间隔也是15px*/
        line-dasharray:18,18;
        line-color:@railwayColorb;
        line-width:2;
        }
        /*底下的地图背景图层*/

        #World_Division_pl___China{
        polygon-fill:@waterColor;
        }

        /*中国除外的其他国家的图层*/

        #World_Continent_pl___China{
        polygon-fill:@continentColor;
        line-width:1;
        line-color:rgb(180,180,180);
        }

        #World_Division_pl___China{
        polygon-fill:@waterColor;
        }


</script>
<script>
    var map, layer, animatorVector, lineVector1, lineVector2,
        host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-china400/rest/maps/China",
        url2 = host + "/iserver/services/data-DynamicData/rest/data";
    var style1 =
        {
            fillColor: "#ffff00",
            fillOpacity: 0.8,
            strokeOpacity: 0,
            pointRadius: 5
        };
    var style2 =
        {
            fillColor: "#c165f6",
            fillOpacity: 1,
            strokeOpacity: 0,
            pointRadius: 5
        };

    init();

    function init() {
        if (!document.createElement('canvas').getContext) {
            widgets.alert.showAlert(resources.msg_supportCanvas, false);
            return;
        }
        //初始化地图
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })],
            projection: "EPSG:3857"
        });
        //初始化图层
        var cartoCssStr = document.getElementById("cartocssStr");
        var cartoCss = cartoCssStr.text;
        var layerNames = ["World_Division_pl@China", "World_Continent_pl@China",
            "China_Province_pl@China", "China_Island@China",
            "China_Capital_Pt@China", "China_Boundary_A"].join(",");
        layerNames = "[" + layerNames + "]";
        layer = new SuperMap.Layer.TiledVectorLayer("China", url, {
            cacheEnabled: true,
            layerNames: layerNames
        }, {useLocalStorage: true, cartoCss: cartoCss});
        layer.events.on({"layerInitialized": addLayer});


    }

    function addLayer() {
        //初始化动画矢量图层
        animatorVector = new SuperMap.Layer.AnimatorVector("Train", {rendererType: "TadpolePoint"}, {
            //设置速度为每帧播放0.02小时的数据
            speed: 0.02,
            //开始时间为0晨
            startTime: 0,
            //结束时间设置为最后运行结束的火车结束时间
            endTime: 39
        });
        lineVector1 = new SuperMap.Layer.Vector("Line1");
        lineVector2 = new SuperMap.Layer.Vector("Line2");
        map.addLayers([layer, lineVector1, lineVector2, animatorVector]);

        map.setCenter(new SuperMap.LonLat(12009634.286396, 4258716.5813769), 4);
        //增加数据
        addTrain();

    }

    //添加火车数据
    function addTrain() {
        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;

        getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "Train@DynamicData",
            attributeFilter: "SmID < 2240"
        });
        getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            datasetNames: ["DynamicData:Train"]
        });
        //返回个数
        getFeatureBySQLParams.toIndex = 2240;
        getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
            eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}
        });

        getFeatureBySQLService.processAsync(getFeatureBySQLParams);

    }

    function processCompleted(getFeaturesEventArgs) {
        var features, result = getFeaturesEventArgs.result;
        if (result && result.features) {
            features = result.features;
        }
        console.log(features);

        //使用数据
        var pointFeatures = [];
        var lines1 = [];
        var lines2 = [];
        var points = [];
        var id = 0;
        for (var i = 0, len = features.length; i < len; i++) {
            var point = features[i].geometry;
            var po = features[i].geometry;
            if (id == features[i].data.FEATUREID) {
                points.push(po);
            }
            else {
                id = features[i].data.FEATUREID;
                lines1.push(
                    new SuperMap.Feature.Vector(
                        new SuperMap.Geometry.LineString(points),
                        {},
                        {
                            stroke: true,
                            strokeColor: "#dddddd",
                            strokeWidth: 3,
                            strokeDashstyle: "solid"

                        }
                    )
                );
                lines2.push(
                    new SuperMap.Feature.Vector(
                        new SuperMap.Geometry.LineString(points),
                        {},
                        {
                            stroke: true,
                            strokeColor: "#41403f",
                            strokeWidth: 2,
                            strokeDashstyle: "dash"
                        }
                    )
                );

                points = [];
            }

            if (features[i].data.FEATUREID < 151) {
                var pointFeature = new SuperMap.Feature.Vector(point, {
                    FEATUREID: features[i].data.FEATUREID,
                    TIME: features[i].data.TIME
                }, style1);
            }
            else {
                var pointFeature = new SuperMap.Feature.Vector(point, {
                    FEATUREID: features[i].data.FEATUREID,
                    TIME: features[i].data.TIME
                }, style2);
            }

            pointFeatures.push(pointFeature);
        }
        animatorVector.addFeatures(pointFeatures);
        lineVector1.addFeatures(lines1);
        lineVector2.addFeatures(lines2);

    }

    function processFailed(e) {
        widgets.alert.showAlert(e.error.errorMsg, false);
    }

    //开始播放动画
    function startAnimator() {
        animatorVector.animator.start();
    }

    //暂停播放动画
    function pauseAnimator() {
        animatorVector.animator.pause();
    }

    //停止播放动画
    function stopAnimator() {
        animatorVector.animator.stop();
    }

    //减速播放
    function decreaseSpeed() {
        animatorVector.animator.setSpeed(animatorVector.animator.getSpeed() * 0.7);
    }

    //正反向播放切换
    function setReverseAnimator() {
        animatorVector.animator.setReverse(!animatorVector.animator.getReverse());
    }

    //加速播放
    function increaseSpeed() {
        animatorVector.animator.setSpeed(animatorVector.animator.getSpeed() * 1.5);
    }

    //开关闪烁
    function setGlint() {
        animatorVector.renderer.glint = !animatorVector.renderer.glint;
    }

    //开关尾巴
    function setTailr() {
        animatorVector.renderer.tail = !animatorVector.renderer.tail;
    }

    function show() {
        lineVector1.setVisibility(!lineVector1.getVisibility());
        lineVector2.setVisibility(!lineVector2.getVisibility());
    }

</script>

</body>
</html>