fuyuhang
/
Project_yhfu
同期ミラー http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_animatorMetro2"></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: 300px;
            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_animatorMetro2"></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" 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>
    var map, layer, animatorVector, labelLayer, pointLayer, popup, selectFeature,
        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
        }
    };
    var styleM = {
        fontColor: "#000000",
        fill: true,
        fillColor: "#ffffff",
        fillOpacity: 1,
        stroke: true,
        strokeColor: "#ff0000",
        labelAlign: "lb",
        labelXOffset: 9,
        labelYOffset: 5,
        fontSize: "12px"
    };

    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();
        map.events.on({"zoomend": showLayer});
    }

    function showLayer(e) {
        var zoom = e.object.getZoom();
        if (zoom < 12) {
            pointLayer.setOpacity(0);
        }
        else {
            pointLayer.setOpacity(1);
        }
    }

    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
        });
        animatorVector.events.on({"drawfeaturestart": drawfeaturestart});
        animatorVector.animator.events.on({"firstframestart": framestart});
        //新建一个策略
        strategy = new SuperMap.Strategy.GeoText();
        //新建一个标签专题图层
        labelLayer = new SuperMap.Layer.Vector("Label", {strategies: [strategy]});
        //创建地铁站点图层
        pointLayer = new SuperMap.Layer.Vector("Point");
        map.addLayers([layer, animatorVector, labelLayer, pointLayer]);
        map.setCenter(new SuperMap.LonLat(12957247.22943, 4853948.11812), 12);


        //用于标签分组的属性字段名称
        strategy.groupField = "LineID";
        //标签分组数组
        strategy.style = styleM;
        addMetro();
        var callbacks = {
            over: overFunction,
            out: outFunction
        };
        var selectFeature = new SuperMap.Control.SelectFeature(pointLayer, {
            onSelect: onFeatureSelected,
            callbacks: callbacks,
            hover: false
        });
        //map上添加控件
        map.addControl(selectFeature);
        //激活控件
        selectFeature.activate();

    }

    function overFunction(e) {
        var feature = e;
        var label = new SuperMap.Geometry.GeoText(feature.geometry.x, feature.geometry.y, feature.attributes.MetroName);

        labelLayer.addFeatures([new SuperMap.Feature.Vector(label)]);
    }

    function outFunction(e) {
        labelLayer.removeAllFeatures();
    }

    //选择具体地铁站
    function onFeatureSelected(e) {
        if (popup) {
            map.removePopup(popup);
        }
        popup = new SuperMap.Popup.FramedCloud("click",
            new SuperMap.LonLat(e.geometry.x, e.geometry.y),
            null,
            resources.text_metro + e.attributes["Metro"] + "</br>" + e.attributes["MetroName"] + resources.text_stops,
            null,
            true);
        map.addPopup(popup);
    }

    function framestart() {
        if (!animatorVector.animator.getRunning()) {
            return;
        }

        pointLayer.removeAllFeatures();
        map.removeAllPopup();
    }

    function drawfeaturestart(feature) {
        if (!animatorVector.animator.getRunning()) {
            return;
        }
        var featureId = feature.attributes["FEATUREID"];

        var arr = [];
        var labelFeas = [];
        var pointFeas = [];
        for (var i = 0; i < feature.geometry.components.length; i++) {
            var ml = feature.geometry.components[i];
            for (var j = 0; j < ml.components.length; j++) {
                var po = ml.components[j];


                var point = new SuperMap.Geometry.Point(po.x, po.y);

                pointFeas.push(new SuperMap.Feature.Vector(point, {
                        MetroName: po.MetroName,
                        Metro: po.Metro
                    },
                    {
                        externalGraphic: "images/metro.png",
                        graphicWidth: 18,
                        graphicHeight: 18
                    }
                ));

            }
        }


        pointLayer.addFeatures(pointFeas);
    }

    //添加数据
    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>