fuyuhang
/
Project_yhfu
peilaus alkaen http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
							<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsTimeLineCloud_Vue"></title>
        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
        <script
            include="echarts-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }
            .sm-component-time-line {
                position: absolute;
                bottom: 20px;
                width: 100%;
                height: 80px;
                z-index: 1000;
            }
            .sm-cloud-info {
                position: absolute;
                right: 10px;
                top: 20px;
                width: 290px;
                height: 310px;
                z-index: 1000;
            }
            .sm-header {
                display: inline-flex;
                align-items: center;
                height: 25px;
            }
            .sm-header-style {
                width: 6px;
                height: 16px;
                background: #fff;
            }
            .sm-current-info {
                display: inline-flex;
                align-items: center;
            }
            .sm-other-info {
                width: 180px;
            }
            .sm-temperature {
                display: inline-flex;
                align-items: center;
                width: 120px;
            }
            .sm-other-info div {
                display: inline-flex;
                justify-content: center;
                align-items: center;
            }
            .sm-other-info .sm-component-text {
                justify-content: flex-start;
            }

            .sm-today-weather {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 100%;
            }
            .sm-day-info {
                width: 130;
                height: 110px;
            }
            .sm-day-info > div {
                display: flex;
                justify-content: center;
            }
            .sm-day-info .sm-component-image {
                display: block;
                margin: 0 auto;
            }
            .sm-today-rain {
                position: absolute;
                bottom: -10px;
                display: flex;
                justify-content: center;
                width: 100%;
            }
            .sm-component-spin {
                background: transparent !important;
            }
        </style>
    </head>

    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
        <div id="main">
            <sm-web-map
                server-url="https://www.supermapol.com"
                :map-id="235407763"
                :tianditu-key="tiandituKey"
                :map-options="mapOptions"
                :loading="loading"
                @load="load"
            ></sm-web-map>
            <sm-time-line
                ref="timeLine"
                :data="data"
                :play-interval="800"
                :next-enable="nextEnable"
                :label="label"
                @timelinechanged="timelineChanged"
                @timelineplaychanged="timelineplaychanged"
            ></sm-time-line>

            <sm-border type="border6" class="sm-cloud-info">
                <div class="sm-cloud-info__content">
                    <div class="sm-header">
                        <div class="sm-header-style"></div>
                        <sm-text title="当前实况" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
                    </div>
                    <div class="sm-current-info">
                        <div class="sm-temperature">
                            <sm-image src="./img/cloud/icon_wendu.png" style="width:36px;height:41px"></sm-image>
                            <sm-text title="27.2℃"></sm-text>
                        </div>
                        <div class="sm-other-info">
                            <div>
                                <sm-image src="./img/cloud/icon_rain.png" style="width:12px;height:12px"></sm-image>
                                <sm-text title="降水：1mm"></sm-text>
                            </div>
                            <div>
                                <sm-image src="./img/cloud/icon_sidu.png" style="width:12px;height:12px"></sm-image>
                                <sm-text title="相对湿度:81%"></sm-text>
                            </div>
                            <div>
                                <sm-image src="./img/cloud/icon_wind.png" style="width:12px;height:12px"></sm-image>
                                <sm-text title="风向风速：东偏北一级"></sm-text>
                            </div>
                        </div>
                    </div>
                    <div class="sm-header">
                        <div class="sm-header-style"></div>
                        <sm-text title="今日天气" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
                    </div>
                    <div class="sm-today-weather">
                        <div class="sm-day-info">
                            <sm-text title="今日白天" :font-style="{textAlign: 'center'}"></sm-text>
                            <sm-image src="./img/cloud/cloud.png" style="width:45px;height:45px"></sm-image>
                            <sm-text title="小雨" :font-style="{textAlign: 'center'}"></sm-text>
                            <div><sm-text title="32.5℃ 南偏西1级"></sm-text></div>
                        </div>
                        <div class="sm-day-info">
                            <sm-text title="今日夜间" :font-style="{textAlign: 'center'}"></sm-text>
                            <sm-image src="./img/cloud/cloud.png" style="width:45px;height:45px"></sm-image>
                            <sm-text title="小雨" :font-style="{textAlign: 'center'}"></sm-text>
                            <div><sm-text title="24.2℃ 西偏北1级"></sm-text></div>
                        </div>
                    </div>
                    <div class="sm-today-rain">
                        <sm-text title="24小时降水：3.8mm"></sm-text>
                    </div>
                </div>
            </sm-border>
        </div>
        <script>
            var label = [
                '7月20日22点',
                '7月20日23点',
                '7月21日0点',
                '7月21日1点',
                '7月21日2点',
                '7月21日3点',
                '7月21日4点',
                '7月21日5点',
                '7月21日6点',
                '7月21日7点'
            ];
            new Vue({
                el: '#main',
                data() {
                    return {
                        mapStatus: [],
                        mapQueue: [],
                        loading: false,
                        readyNext: true,
                        nextEnable: false,
                        tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
                        tooltip: {
                            formatter: function(params) {
                                return params.name;
                            }
                        },
                        label: {
                            formatter: function(val, index) {
                                return label[index];
                            }
                        },
                        url: 'https://www.supermapol.com/proxy/iserver/services/map_qixiangyun_l93wywbb/rest/maps/',
                        encodeUrl:
                            '/image.png?viewBounds=%7B"leftBottom"%3A%7B"x"%3A9293238.75%2C"y"%3A3677548.75%7D%2C"rightTop"%3A%7B"x"%3A11189787.25%2C"y"%3A5574097.25%7D%7D&center=%7B"x"%3A10241513.0%2C"y"%3A4625823.0%7D&width=1090&scale=0.000000035714&prjCoordSys=%7B"epsgCode"%3A3857%7D&transparent=true&height=880',
                        data: [
                            'T202007202200',
                            'T202007202300',
                            'T202007210000',
                            'T202007210100',
                            'T202007210200',
                            'T202007210300',
                            'T202007210400',
                            'T202007210500',
                            'T202007210600',
                            'T202007210700'
                        ],
                        mapOptions: {
                            style: { version: 8, sources: {}, layers: [] },
                            zoom: 4.6
                        }
                    };
                },
                computed: {
                    allLoaded() {
                        if (this.mapStatus.length) {
                            var allLoaded = true;
                            this.mapStatus.forEach(function(item) {
                                if (!item.status) {
                                    allLoaded = false;
                                }
                            });
                            return allLoaded;
                        }
                        return false;
                    }
                },
                watch: {
                    mapStatus: {
                        handler() {
                            var nextEnable = false;
                            var currentIndex = this.currentIndex;
                            this.mapStatus.forEach(function(item, index) {
                                if (currentIndex === index && item.status) {
                                    nextEnable = true;
                                }
                            });
                            this.nextEnable = nextEnable;
                        }
                    },
                    allLoaded() {
                        this.playState && this.setPlayState(true);
                        this.nextEnable = null;
                    }
                },
                created() {
                    SuperMap.Components.setTheme({ textColor: '#fff', background: 'rgb(0,0,0,0)' });
                    this.$on('addlayerssucceeded', this.updateNextRasterSource);
                    this.$on('loadingChange', this.loadingChange);
                },
                methods: {
                    load(e) {
                        this.map = e.map;
                        this.resetMapLoadStatus();
                    },
                    loadingChange(status) {
                        this.loading = status;
                    },
                    timelineplaychanged(val) {
                        this.playState = val.playState;
                    },
                    timelineChanged(val) {
                        var currentIndex = (val && val.currentIndex) || 0;
                        var dataId = this.data[currentIndex];
                        var imageUrl = this.url + dataId + this.encodeUrl;
                        this.currentIndex = currentIndex;
                        var sourceId = this.data[0];
                        if (!this.readyNext) {
                            this.mapQueue.push({ key: dataId, sourceId: sourceId, imageUrl: imageUrl });
                            return;
                        }
                        this.readyNext = false;
                        this.updateRasterSource(sourceId, imageUrl);
                    },
                    updateRasterSource(sourceId, imageUrl) {
                        if (this.map.getLayer(sourceId)) {
                            this.map.setLayoutProperty(sourceId, 'visibility', 'none');
                        }
                        sourceId = sourceId + '_image';
                        var source = this.map.getSource(sourceId);
                        if (!source) {
                            this.map.addSource(sourceId, {
                                type: 'image',
                                url: imageUrl,
                                coordinates: [
                                    [50, 61],
                                    [145.9, 61],
                                    [145.9, 0],
                                    [50, 0]
                                ]
                            });
                            this.map.addLayer({
                                id: sourceId,
                                type: 'raster',
                                source: sourceId,
                                paint: {
                                    'raster-fade-duration': 0
                                }
                            });
                        } else {
                            source.updateImage({ url: imageUrl });
                        }
                        this.$emit('addlayerssucceeded');
                    },
                    updateNextRasterSource() {
                        this.readyNext = true;
                        if (this.mapQueue.length) {
                            var { id: mapId, sourceId, imageUrl } = this.mapQueue.shift();
                            this.updateRasterSource(sourceId, imageUrl);
                        } else {
                            var key = this.data[this.currentIndex];
                            var sourceCaches = this.map.style.sourceCaches;
                            var beforeIds = [];
                            for (var sourceId in sourceCaches) {
                                beforeIds.push(sourceId);
                            }
                        }
                        !this.allLoaded && this.isAllSourceLoaded(key, beforeIds);
                    },
                    setPlayState(status) {
                        this.$refs.timeLine.setPlayState(status);
                    },
                    isAllSourceLoaded(key, sourceIds) {
                        if (this.timer) {
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                        var map = this.map;
                        var _this = this;
                        this.timer = setInterval(function() {
                            _this.$emit('loadingChange', true);
                            var loaded = true;
                            sourceIds.forEach(function(id) {
                                if (_this.map && _this.map.style) {
                                    if (!_this.map.getSource(id)) {
                                        return true;
                                    }
                                    if (!_this.map.isSourceLoaded(id)) {
                                        loaded = false;
                                    }
                                    return _this.map.isSourceLoaded(id);
                                }
                                return true;
                            });
                            _this.nextEnable = false;
                            if (loaded && _this.mapStatus) {
                                clearInterval(_this.timer);
                                _this.timer = null;
                                var mapStatus = _this.mapStatus.concat();
                                mapStatus.forEach(function(info) {
                                    if (info.key === key) {
                                        info.status = true;
                                    }
                                });
                                _this.mapStatus = mapStatus;
                                _this.$emit('loadingChange', false);
                            }
                        }, 100);
                    },
                    resetMapLoadStatus() {
                        var mapStatus = [];
                        if (this.mapStatus && this.mapStatus.length) {
                            mapStatus = this.mapStatus.map(function(info) {
                                info.status = false;
                                return info;
                            });
                        } else {
                            this.data.forEach(function(key) {
                                mapStatus.push({ key: key, status: false });
                            });
                        }
                        this.mapStatus = mapStatus;
                    }
                }
            });
        </script>
    </body>
</html>