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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_animatorMetro"></title>
    <script type="text/javascript" src="./data/animationExtendLineData.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
        }

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

        #toolbar {
            position: absolute;
            top: 50px;
            right: 10px;
            width: 300px;
            text-align: center;
            z-index: 100;
            border-radius: 4px;
        }

        #d_GroupDiv .smPopupContent {
            padding-top: 0px;
            display: inline;
        }
    </style>
</head>
<body>
<div id="toolbar" class="panel panel-primary">
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.title_animatorMetro"></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_showOrHide" onclick="show()"/>
    </div>
</div>
<div id="map"></div>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript" include="responsive,bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script>
    var map, layer, animatorVector, vectorLayer, popup,
        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 features = {};
    var popups = {};
    var style = {
        style1: {
            fillColor: "#cc0000",
            pointRadius: 3,
            strokeColor: "#cc0000",
            strokeWidth: 5
        },
        style2: {
            fillColor: "#0066cc",
            pointRadius: 3,
            strokeColor: "#0066cc",
            strokeWidth: 5
        },
        style4: {
            fillColor: "#008d9e",
            pointRadius: 3,
            strokeColor: "#008d9e",
            strokeWidth: 5
        },
        style5: {
            fillColor: "#a71c81",
            pointRadius: 3,
            strokeColor: "#a71c81",
            strokeWidth: 5
        },
        style6: {
            fillColor: "#d19708",
            pointRadius: 3,
            strokeColor: "#d19708",
            strokeWidth: 5
        },
        style8: {
            fillColor: "#019a6b",
            pointRadius: 3,
            strokeColor: "#019a6b",
            strokeWidth: 5
        },
        style9: {
            fillColor: "#8cc31f",
            pointRadius: 3,
            strokeColor: "#8cc31f",
            strokeWidth: 5
        },
        style10: {
            fillColor: "#019bc1",
            pointRadius: 3,
            strokeColor: "#019bc1",
            strokeWidth: 5
        },
        style13: {
            fillColor: "#fad15c",
            pointRadius: 3,
            strokeColor: "#fad15c",
            strokeWidth: 5
        },
        style14: {
            fillColor: "#d6a6a2",
            pointRadius: 3,
            strokeColor: "#d6a6a2",
            strokeWidth: 5
        },
        style15: {
            fillColor: "#69347c",
            pointRadius: 3,
            strokeColor: "#69347c",
            strokeWidth: 5
        },
        style16: {
            fillColor: "#cc0000",
            pointRadius: 3,
            strokeColor: "#cc0000",
            strokeWidth: 5
        },
        style17: {
            fillColor: "#db83b3",
            pointRadius: 3,
            strokeColor: "#db83b3",
            strokeWidth: 5
        },
        style18: {
            fillColor: "#e50075",
            pointRadius: 3,
            strokeColor: "#e50075",
            strokeWidth: 5
        },
        style19: {
            fillColor: "#e46022",
            pointRadius: 3,
            strokeColor: "#e46022",
            strokeWidth: 5
        },
        style20: {
            fillColor: "#a49abc",
            pointRadius: 3,
            strokeColor: "#a49abc",
            strokeWidth: 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.MousePosition(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })],
            projection: "EPSG:3857"
        });
        layer = new SuperMap.Layer.CloudLayer();
        addLayer();
    }

    function addLayer() {
        //初始化动画矢量图层
        animatorVector = new SuperMap.Layer.AnimatorVector("Metro", {rendererType: "StretchLine"}, {
            repeat: false,
            //设置速度为每帧播放0.05的数据
            speed: 0.05,
            //开始时间为0
            startTime: 0,
            //每秒渲染12帧
            frameRate: 12,
            //结束时间设置为10
            endTime: 10
        });
        vectorLayer = new SuperMap.Layer.Vector("point");
        animatorVector.events.on({"drawfeaturestart": drawfeaturestart});
        animatorVector.animator.events.on({"firstframestart": framestart});
        map.addLayers([layer, animatorVector, vectorLayer]);
        map.setCenter(new SuperMap.LonLat(12958264.797366, 4846889.6362871), 11);
        var selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {
            onSelect: onFeatureSelected
        });
        map.addControl(selectFeature);
        selectFeature.activate();
        addMetro();
        layer.setVisibility(true);
    }

    function framestart() {
        vectorLayer.removeAllFeatures();
        map.removeAllPopup();
    }

    function drawfeaturestart(feature) {
        var featureId = feature.attributes.FEATUREID;
        //删除弹出框
        if (!popups[featureId]) popups[featureId] = [];
        for (var n = 0; n < popups[featureId].length; n++) {
            map.removePopup(popups[featureId][n]);
        }
        popups[featureId] = [];
        var arr = [];
        for (var i = 0; i < feature.geometry.components.length; i++) {
            var ml = feature.geometry.components[i];
            var po = ml.components[0];
            var contentHTML = "";
            contentHTML += "<span style='font-size:12px; line-height: 12px;background-color: #fff'>";
            contentHTML += po.MetroName + resources.text_stops;
            contentHTML += "</span>";
            var popup = new SuperMap.Popup("d",
                new SuperMap.LonLat(po.x, po.y),
                new SuperMap.Size((po.MetroName.length + 1) * 12, 12),
                contentHTML,
                false);
            popup.setOpacity(0.8);
            popup.setBackgroundColor("#fff");
            popup.setBorder("1px solid " + feature.style.fillColor);
            popups[featureId].push(popup);
            map.addPopup(popup);

            var fea = new SuperMap.Feature.Vector(
                po,
                {
                    metro: po.Metro,
                    name: po.MetroName
                },
                feature.style
            );
            arr.push(fea);
        }
        vectorLayer.addFeatures(arr);
    }

    //选择具体地铁站
    function onFeatureSelected(e) {
        if (popup) {
            map.removePopup(popup);
        }

        popup = new SuperMap.Popup.FramedCloud("chicken",
            new SuperMap.LonLat(e.geometry.x, e.geometry.y),
            null,
            resources.text_metro + e.attributes["metro"] + "</br>" + e.attributes["name"] + resources.text_stops,
            null,
            true);
        map.addPopup(popup);
    }

    //添加数据
    function addMetro() {
        var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;

        getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "Metro@DynamicData",
            attributeFilter: "SmID < 138"
        });
        getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            datasetNames: ["DynamicData:Metro"]
        });
        getFeatureBySQLParams.toIndex = 137;
        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 lineFeatures = [];
        //循环有几条地铁
        for (var i = 0, len = features.length; i < len; i++) {
            //有几个部分的情况
            var arrL = [];
            if (features[i].geometry.CLASS_NAME == "SuperMap.Geometry.MultiLineString") {
                var metro = features[i].geometry.components;
                //循环每一条地铁分几部分修建
                for (var j = 0; j < metro.length; j++) {
                    var part = metro[j];
                    var arrP = [];
                    var m = 0;
                    for (var k = 0; k < part.components.length; k++) {
                        var pp = part.components[k];
                        var point = new SuperMap.Geometry.Point(pp.x, pp.y);
                        //名字
                        var metroname = [];
                        metroname = features[i].attributes.ATTRIBUTION.split(",");
                        point.MetroName = metroname[m];
                        m = m + 1;
                        point.Metro = features[i].attributes.LINENAME;
                        arrP.push(point);
                    }
                    var lineString = new SuperMap.Geometry.LineString(arrP);
                    arrL.push(lineString);
                }
            }
            else {
                var metro1 = features[i].geometry.components;
                var arrP1 = [];
                for (var a = 0; a < metro1.length; a++) {
                    var point1 = metro1[a];
                    metroname1 = features[i].attributes.ATTRIBUTION.split(",");
                    point1.MetroName = metroname1[a];
                    point1.Metro = features[i].attributes.LINENAME;
                    arrP1.push(point1);
                }
                var lineString1 = new SuperMap.Geometry.LineString(arrP1);
                arrL.push(lineString1);
            }
            var multiLineString = new SuperMap.Geometry.MultiLineString(arrL);

            var mm = parseInt(features[i].attributes.LINENUMBER);
            var sty = style["style" + mm];

            var lineFeature = new SuperMap.Feature.Vector(multiLineString, {
                FEATUREID: features[i].attributes.FEATUREID,
                TIME: features[i].attributes.TIME
            }, sty);
            lineFeatures.push(lineFeature);
        }
        animatorVector.addFeatures(lineFeatures);
    }

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

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

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

    //切换底图的显示
    function show() {
        layer.setVisibility(!layer.getVisibility());
    }

</script>
</body>
</html>