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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_animatorMigrate"></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;
            width: 230px;
            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_animatorMigrate"></h5></div>
    <div class='panel-body content'>
        <div class='panel'>
            <div class='input-group'>
                <label data-i18n="resources.text_currentTime" style="display:inline"></label>
                <label style="display:inline" id="timeDate"></label>
                <label style="display:inline" id="timeHour"></label>
            </div>
        </div>
        <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()"/>
    </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">
    @color:#111;
    #World_Continent_txt___China::hover{
    text-fill:#0f0;
    }
    #World_Division_pl___China{
    polygon-fill:#123;
    ::click{
    polygon-fill:#123;
    }
    }
    #World_Continent_pl___China{
    polygon-fill:#000002;
    line-width:1;
    line-color:#888;
    ::hover[featureID=73]{
    polygon-fill:#f00;
    }
    }
    #China_Capital_Pt___China [zoom>4] {
    point-file:url("../examples/images/marker2.png");
    }
    #China_Province_pl___China{
    polygon-fill:#555;
    }
    #China_Boundary_A___China{
    line-color:#000000;
    }


</script>
<script>
    var map, layer, animatorVector, vectorLayer, url2,
        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 items = [
        {
            start: 0,
            end: 101,
            length: 55,
            style: {
                strokeOpacity: 1,
                strokeColor: "#000000",
                strokeWidth: 1
            }
        },
        {
            start: 101,
            end: 201,
            length: 60,
            style: {
                strokeOpacity: 1,
                strokeColor: "#0000FF",
                strokeWidth: 1.5
            }
        },
        {
            start: 201,
            end: 301,
            length: 65,
            style: {
                strokeOpacity: 1,
                strokeColor: "#FF00FF",
                strokeWidth: 2
            }
        },
        {
            start: 301,
            end: 401,
            length: 70,
            style: {
                strokeOpacity: 1,
                strokeColor: "#FF0000",
                strokeWidth: 2.5
            }
        },
        {
            start: 401,
            end: 501,
            length: 75,
            style: {
                strokeOpacity: 1,
                strokeColor: "#FFCCFF",
                strokeWidth: 3
            }
        },
        {
            start: 501,
            end: 601,
            length: 80,
            style: {
                strokeOpacity: 1,
                strokeColor: "#00FF00",
                strokeWidth: 3.5
            }
        },
        {
            start: 601,
            end: 701,
            length: 85,
            style: {
                strokeOpacity: 1,
                strokeColor: "#00FFFF",
                strokeWidth: 4
            }
        },
        {
            start: 701,
            end: 801,
            length: 90,
            style: {
                strokeOpacity: 1,
                strokeColor: "#FFFF00",
                strokeWidth: 4.5
            }
        },
        {
            start: 801,
            end: 901,
            length: 95,
            style: {
                strokeOpacity: 1,
                strokeColor: "#66CCCC",
                strokeWidth: 5
            }
        },
        {
            start: 901,
            end: 1001,
            length: 100,
            style: {
                strokeOpacity: 1,
                strokeColor: "#FF9999",
                strokeWidth: 5.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("春运", {rendererType: "RadiatePoint"}, {
            frameRate: 20,
            //设置速度为每帧播放0.01小时的数据
            speed: 0.01,
            //开始时间为0晨
            startTime: 0,
            //结束时间设置为第七天，也就是大年三十
            endTime: 7
        });
        animatorVector.renderer.items = items;
        animatorVector.renderer.dataField = "POPULATION";
        animatorVector.animator.events.on({"framestart": framestart});
        vectorLayer = new SuperMap.Layer.Vector("point");
        map.addLayers([layer, animatorVector, vectorLayer]);
        map.setCenter(new SuperMap.LonLat(12009634.286396, 4208716.5813769), 5);
        //增加数据
        addMigrate();

    }

    function framestart(time) {
        //从服务端获取数据
        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;

        getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "Migrate@DynamicData",
            attributeFilter: "SmID < 809"
        });
        getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            datasetNames: ["DynamicData:Migrate"]
        });
        getFeatureBySQLParams.toIndex = 808;
        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;
            }
            //计算每个featureid相同的点个数
            var court = [];
            court[0] = 0;
            var mm = 0;
            var kk = 0;
            var arr = []; //用来存储ID相同的要素；
            var featurearr = [];
            for (var i = 0; i < features.length; i++) {
                if (features[i].data.AREA == mm) {
                    court[kk] = court[kk] + 1;
                    arr.push(features[i]);
                }
                else {
                    featurearr.push(arr);
                    arr = [];
                    kk = kk + 1;
                    court[kk] = 1;
                    arr.push(features[i]);
                    mm = mm + 1;
                }
                if (court[27] == 11) {
                    featurearr.push(arr);
                }
            }
            //遍历每个区域
            changeTime(time);
            vectorLayer.removeAllFeatures();
            var pointFeatures = [];
            //循环遍历区域
            for (var j = 0; j < court.length; j++) {
                var area = featurearr[j];
                var population = 0;
                for (var z = 0; z < area.length; z++) {
                    if ((area[z].attributes.MIGRATION == "true" && area[z].attributes.TIME >= time) || (area[z].attributes.MIGRATION == "false" && area[z].attributes.TIME <= time)) {
                        population += Number(area[z].attributes.POPULATION);
                    }
                }
                var point = new SuperMap.Geometry.Point(area[0].geometry.x, area[0].geometry.y);
                var pointFeature = new SuperMap.Feature.Vector(point, {}, {
                    fillColor: "#ff8000",
                    fillOpacity: 0.8,
                    strokeOpacity: 0,
                    label: population + "",
                    fontColor: "#ffffff",
                    fontOpacity: "1",
                    fontFamily: "隶书",
                    fontSize: "1em",
                    pointRadius: Math.sqrt(population / 50)
                });
                pointFeatures.push(pointFeature);
            }
            vectorLayer.addFeatures(pointFeatures);
        }

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

    function changeTime(time) {
        if (time >= 0 && time < 1) {
            document.getElementById("timeDate").innerHTML = resources.text_24;
        }
        else if (time >= 1 && time < 2) {
            document.getElementById("timeDate").innerHTML = resources.text_25;
        }
        else if (time >= 1 && time < 3) {
            document.getElementById("timeDate").innerHTML = resources.text_26;
        }
        else if (time >= 1 && time < 4) {
            document.getElementById("timeDate").innerHTML = resources.text_27;
        }
        else if (time >= 1 && time < 5) {
            document.getElementById("timeDate").innerHTML = resources.text_28;
        }
        else if (time >= 1 && time < 6) {
            document.getElementById("timeDate").innerHTML = resources.text_29;
        }
        else if (time >= 1 && time < 7) {
            document.getElementById("timeDate").innerHTML = resources.text_23;
        }
        document.getElementById("timeHour").innerHTML = parseInt((time - parseInt(time)) * 24) + resources.text_clock;
    }

    //添加迁徙数据
    function addMigrate() {
        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;

        getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "Migrate@DynamicData",
            attributeFilter: "SmID < 809"
        });
        getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            datasetNames: ["DynamicData:Migrate"]
        });
        getFeatureBySQLParams.toIndex = 808;
        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;
        }
        var pointFeatures = [];
        //循环遍历区域
        for (var i = 0, len = features.length; i < len; i++) {
            var point = features[i].geometry;
            var pointFeature = new SuperMap.Feature.Vector(point, {
                FEATUREID: features[i].data.FEATUREID,
                TIME: features[i].data.TIME,
                POPULATION: features[i].data.POPULATION
            });
            pointFeatures.push(pointFeature);

        }
        animatorVector.addFeatures(pointFeatures);
    }

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

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

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

</script>

</body>
</html>