fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_plotGOAnimation"></title>
    <style type="text/css">
        #map {
            position: absolute;
            left: 250px;
            right: 0px;
            height: 100%;
        }

        #plottingPanel {
            float: left;
            background: #ffffff;
            width: 250px;
            height: 100%;
            border: 1px solid #3473b7;
        }

        #plottingMenu {
            position: absolute;
            top: 20%;
            z-index: 999999;
            border-radius: 4px;
            padding-top: 2px;
            left: 265px;
            color: #000000;
            background-color: #fff;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary"
     style="   position: absolute;top: 15px;right: 20px;text-align: center;z-index: 2000;border-radius: 4px;">
    <div class="panel-heading" id="panelheading">
        <h5 class="panel-title text-center"  data-i18n="resources.title_plotGOAnimation" style=" font-size: 16px;color: #ffffff;"></h5>
    </div>
    <div class="panel-body content" id="panelbodycontent">
        <div class="input-group" style="margin-top:15px; margin-left: 10px; margin-bottom: 10px;">
            <select class="search-query form-control" id="SLT" data-i18n="[style]resources.style_plotAnimation"></select>&nbsp;&nbsp;
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_createAnimation" onclick="createAnimation()">&nbsp;&nbsp;
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_play" onclick="play()">&nbsp;&nbsp;
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_pause" onclick="pause()">&nbsp;&nbsp;
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_stop" onclick="stop()">&nbsp;&nbsp;
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_reset" onclick="reset()">&nbsp;&nbsp;
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteAnimation" onclick="deleteSelectedFeaturesAnimation()">&nbsp;&nbsp;
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteAllAnimation" onclick="deleteAllAnimation()">&nbsp;&nbsp;
        </div>
    </div>
</div>
<div id="plottingPanel">
    <div class="easyui-panel" style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;">
        <div class="easyui-tabs" style="width: 100%;height: 100%">
            <div id="plotPanel" data-i18n="[title]resources.text_drawPanel" style="overflow: hidden"></div>
            <div id="stylePanel" data-i18n="[title]resources.text_attributePanel"></div>
        </div>
    </div>
</div>
<div id="plottingMenu" class="sticklr">
    <li>
        <a class="glyphicon plotting-glyphicon-draw-deactivate notArrow"
           data-i18n="[title]resources.text_cancelDraw"
           onclick="cancelDraw()"></a>
    </li>
    <li>
        <a class="glyphicon plotting-glyphicon-draw-removeAll notArrow"
           data-i18n="[title]resources.text_input_value_clear"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_deleteMarker" onclick="deleteSymbol()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_clearLayers" onclick="clearLayer()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>
        </ul>
    </li>

    <li>
        <a class="glyphicon plotting-lyphicon-save-simulationMap"
           data-i18n="[title]resources.text_situationMapOperation"></a>
        <ul>
            <li><input type="button" data-i18n="[value]resources.btn_saveSimulationMap" onclick="saveSimulationMap()"
                       style="width:70px;height: 25px ;margin:0 auto;"/> </li>
            <li><input type="button" data-i18n="[value]resources.btn_loadSimulationMap" onclick="loadSimulationMap()"
                       style="width: 70px;height: 25px ;margin:0 auto;"/></li>
        </ul>
    </li>
</div>
<div id="map"></div>
<script type="text/javascript" include="bootstrap,sticklr,plottingPanel" src="../js/include-web.js"></script>
<script type="text/javascript" include="iclient-plot-leaflet"
        src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" include="PlotPanel,StylePanel"
        src="../js/plottingPanel/PlottingPanel.Include.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
    var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
    var map;
    var item = [resources.text_attrAnimation, resources.text_flickerAnimation, resources.text_growthAnimation, resources.text_revolveAnimation, resources.text_proportionAnimation, resources.text_SHAnimation, resources.text_pathAnimation],
            select, animationtype;
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [35, 104],
        maxZoom: 18,
        zoom: 3
    });
    L.supermap.tiledMapLayer(url).addTo(map);
    var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
    plottingLayer.spatialAnalystUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
    plottingLayer.addTo(map);
    var drawControl = L.supermap.plotting.drawControl(plottingLayer);
    drawControl.addTo(map);
    var editControl = L.supermap.plotting.editControl();
    editControl.addTo(map);
    L.supermap.plotting.initPlotPanel("plotPanel", serverUrl, drawControl);
    L.supermap.plotting.initStylePanel("stylePanel", serverUrl, editControl);
    var plotting = L.supermap.plotting.getControl(map, serverUrl);
    var goAnimationManager = plotting.getGOAnimationManager();
    window.setInterval("execute()", 100);
    initHtml();
    loadSmlAndAnimation();

    function initHtml(){
        select = document.getElementById("SLT");
        for (var i = 0, len = item.length; i < len; i++) {
            var options = document.createElement("option");
            options.setAttribute("value", item[i]);
            options.innerHTML = item[i];
            select.appendChild(options);
        }
    }

    function loadSmlAndAnimation(){
        $.getJSON("../data/ZaoYiHuiZhan_Sml.json",function(sitData){
            plotting.getSitDataManager().openSmlData(sitData, true);

			plottingLayer = plotting.getSitDataManager().getSitDataLayers()[0];
			drawControl.setDrawingLayer(plottingLayer);
            $.getJSON("../data/ZaoYiHuiZhan_Animation.json",function(animationJsonData){
                goAnimationManager.fromJSONData(animationJsonData);
            });
        });
    }

    //保存态势图
    function saveSimulationMap() {
        cancelDraw();
        plotting.getSitDataManager().saveAsSmlFile("situationMap");
    }
    function loadSimulationMap() {
        plotting.getSitDataManager().openSmlFileOnServer("situationMap", function (evt) {
            drawControl.setDrawingLayer(evt.sitDataLayers[0]);
        });
    }
    //取消标绘
    function cancelDraw() {
        drawControl.handler.disable();
    }
    //删除选中标号
    function deleteSymbol() {
        editControl.deleteSelectedFeatures();
    }
    //清空绘制
    function clearLayer() {
        cancelDraw();

        for (var i = 0; i < map.getPlottingLayers().length; i++) {
            map.getPlottingLayers()[i].removeAllFeatures();
        }
    }

    //播放动画
    function play() {
        if (null === goAnimationManager.goAnimations) {
            return;
        }

        for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
            goAnimationManager.goAnimations[i].play();
        }
    }

    //暂停
    function pause() {
        if (null === goAnimationManager.goAnimations) {
            return;
        }

        for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
            goAnimationManager.goAnimations[i].pause();
        }
    }

    //停止
    function stop() {
        if (null === goAnimationManager.goAnimations) {
            return;
        }

        for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
            goAnimationManager.goAnimations[i].stop();
        }
    }

    //复位
    function reset() {
        if (null === goAnimationManager.goAnimations) {
            return;
        }

        for (var i = 0; i < goAnimationManager.goAnimations.length; i++) {
            goAnimationManager.goAnimations[i].reset();
        }
    }

    function execute() {
        goAnimationManager.execute();
    }
    function deleteSelectedFeaturesAnimation() {
        if (null === goAnimationManager.goAnimations) {
            return;
        }

        if (0 === editControl.getSelectedFeatures().length) {
            return;
        }
        var selectFeature = editControl.getSelectedFeatures()[0];
        var animations = goAnimationManager.findGOAnimationsByFeature(selectFeature);

        for (var i = 0; i < animations.length; i++) {
            goAnimationManager.removeGOAnimation(animations[i]);
        }

    }

    function deleteAllAnimation() {
        if (null === goAnimationManager.goAnimations) {
            return;
        }
        goAnimationManager.reset();
        goAnimationManager.removeAllGOAnimation();
    }

    //创建动画
    function createAnimation() {
        if (0 === editControl.getSelectedFeatures().length) {
            return;
        }
        var obj = selectAnimationType();
        var feature = editControl.getSelectedFeatures()[0];
        var goAnimationNameUUid = SuperMap.Plot.PlottingUtil.generateUuid();
        var goAnimationName = obj.selectValue + goAnimationNameUUid;

        var goAnimation = goAnimationManager.createGOAnimation(obj.animationType, goAnimationName, feature);

        switch (goAnimation.getGOAnimationType()) {
            case SuperMap.Plot.GOAnimationType.ANIMATION_ATTRIBUTE:
            {//属性动画
                //            goAnimation.startTime=0;//开始时间
//                goAnimation.duration=5;//间隔时间
                //goAnimation.repeat = true;//重复播放
                goAnimation.lineColorAnimation = true;//线色动画
                goAnimation.startLineColor = "#ff0000";//开始线色
                goAnimation.endLineColor = "#1a1817";//结束线色

                goAnimation.lineWidthAnimation = true;//线宽动画
                goAnimation.startLineWidth = 1;//开始线宽
                goAnimation.endLineWidth = 5;//结束线宽

                goAnimation.surroundLineColorAnimation = true;//衬线动画
                goAnimation.startSurroundLineColor = "#ffff00";//开始衬线色
                goAnimation.endSurroundLineColor = "#009933";//结束衬线色

                goAnimation.surroundLineWidthAnimation = true;//衬线宽
                goAnimation.startSurroundLineWidth = 2;//开始衬线宽
                goAnimation.endSurroundLineWidth = 4;//结束衬线宽
                break;
            }
            case SuperMap.Plot.GOAnimationType.ANIMATION_BLINK:
            {//闪烁动画
                //            goAnimation.startTime = 5;
//                goAnimation.duration = 5;
                //goAnimation.repeat = true;//重复播放
                //闪烁类型：次数闪烁
                goAnimation.blinkStyle = SuperMap.Plot.BlinkAnimationBlinkStyle.Blink_Number;
                goAnimation.blinkNumber = 5;//闪烁次数

                //闪烁类型：频率闪烁
                //goAnimation.blinkStyle = SuperMap.Plot.BlinkAnimationBlinkStyle.Blink_Frequency;
                //goAnimation.blinkInterval = 500;//闪烁频率

                //闪烁颜色交替类型:无颜色交替
                //goAnimation.replaceStyle =  SuperMap.Plot.BlinkAnimationReplaceStyle.Replace_NoColor;
                //闪烁颜色交替类型：有颜色交替
                goAnimation.replaceStyle = SuperMap.Plot.BlinkAnimationReplaceStyle.Replace_Color;
                goAnimation.startColor = "#00ff00";
                goAnimation.endColor = "#ff0000";
                break;
            }
            case SuperMap.Plot.GOAnimationType.ANIMATION_GROW:
            {//生长动画
                //             goAnimation.startTime =10;
//                goAnimation.duration = 5;
                //goAnimation.repeat = true;
                goAnimation.startScale = 0;
                goAnimation.endScale = 1;
                break;
            }
            case SuperMap.Plot.GOAnimationType.ANIMATION_ROTATE:
            {//旋转动画
                //             goAnimation.startTime = 15;
//                goAnimation.duration = 5;
                //goAnimation.repeat = true;
                goAnimation.rotateDirection = SuperMap.Plot.RotateDirection.AntiClockWise;//逆时针旋转
                //goAnimation.rotateDirection = SuperMap.Plot.RotateDirection.ClockWise;//顺时针旋转
                goAnimation.startAngle = 0;
                goAnimation.endAngle = 90;
                break;
            }
            case SuperMap.Plot.GOAnimationType.ANIMATION_SCALE:
            {//比例动画
                //              goAnimation.startTime = 20;
//                goAnimation.duration = 5;
                //goAnimation.repeat = true;
                goAnimation.startScale = 1;
                goAnimation.endScale = 2;
                break;
            }
            case SuperMap.Plot.GOAnimationType.ANIMATION_SHOW:
            {//显隐动画
                //              goAnimation.startTime=25;//开始时间
//                goAnimation.duration=5;//间隔时间
                //goAnimation.repeat = true;//重复播放
                goAnimation.finalDisplay = true;
                goAnimation.showEffect = true;
                break;
            }
            case SuperMap.Plot.GOAnimationType.ANIMATION_WAY:
            {//路径动画
             //               goAnimation.startTime = 30;//开始时间
//                goAnimation.duration = 5;//间隔时间
                //goAnimation.repeat = true;//是否重复播放

                var arypts = [];
                var pt = L.latLng(44, 88);
                var pt1 = L.latLng(30, 91);
                var pt2 = L.latLng(37, 102);
                var pt3 = L.latLng(30, 106);
                var pt4 = L.latLng(34, 109);
                var pt5 = L.latLng(35, 114);
                var pt6 = L.latLng(40, 116);


                arypts.push(pt);
                arypts.push(pt1);
                arypts.push(pt2);
                arypts.push(pt3);
                arypts.push(pt4);
                arypts.push(pt5);
                arypts.push(pt6);
                goAnimation.setWayPoints(arypts);

                //路径类型：折线类型
                goAnimation.pathType = SuperMap.Plot.WayPathType.POLYLINE;
                //路径类型：曲线路径
                //goAnimation.pathType=SuperMap.Plot.WayPathType.CURVE;

                goAnimation.pathColor = "#005eff";
                goAnimation.pathWidth = 3;
                //是否是切线方向
                goAnimation.tangentDirection = true;
                goAnimation.setShowPath(true);
                break;
            }
        }
    }

    function selectAnimationType() {

        var select = document.getElementById("SLT");
        var type;
        for (var i = 0; i < select.children.length; i++) {
            if (select.children[i].selected) {
                type = select.children[i].value;

            }
        }
        //item=["属性动画","闪烁动画","生长动画","旋转动画","比例动画","显隐动画","路径动画"]
        if (type === item[0]) {
            animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_ATTRIBUTE;
        }
        else if (type === item[1]) {
            animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_BLINK;
        }
        else if (type === item[2]) {
            animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_GROW;
        }
        else if (type === item[3]) {
            animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_ROTATE;
        }
        else if (type === item[4]) {
            animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_SCALE;
        }
        else if (type === item[5]) {
            animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_SHOW;
        }
        else if (type === item[6]) {
            animationtype = SuperMap.Plot.GOAnimationType.ANIMATION_WAY;
        }
        var obj = new Object();
        obj.selectValue = type;
        obj.animationType = animationtype;
        return obj;
    }
    $(document).ready(function(){
        $('#panelheading').click(function(){
            $('#panelbodycontent').toggle();
        });
    });
</script>
</body>
</html>