fuyuhang
/
Project_yhfu
spogulis no http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							<!--********************************************************************
* 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%;
            }
        </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"
                :loading="loading"
                @load="load"
            ></sm-web-map>
            <sm-time-line
                ref="timeLine"
                :data="data"
                :play-interval="1000"
                :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日6点'
            ];
            new Vue({
                el: '#main',
                data() {
                    return {
                        mapStatus: [],
                        mapQueue: [],
                        loading: false,
                        readyNext: true,
                        nextEnable: false,
                        tiandituKey: 'f16b023603de8ae8fdd09a2c0feb1ec2',
                        tooltip: {
                            formatter: function(params) {
                                console.log('params', params);
                                return params.name;
                            }
                        },
                        data: [
                            { name: '7月20日22点', value: 'de4dac90d63311ea8d11cb07464492f0' },
                            { name: '7月20日23点', value: 'deb37340d63311ea8d11cb07464492f0' },
                            { name: '7月21日0点', value: 'df03b620d63311ea8d11cb07464492f0' },
                            { name: '7月21日1点', value: 'df20b400d63311ea8d11cb07464492f0' },
                            { name: '7月21日2点', value: 'df55cdc0d63311ea8d11cb07464492f0' },
                            { name: '7月21日3点', value: 'df9b1420d63311ea8d11cb07464492f0' },
                            { name: '7月21日4点', value: 'dfdf2200d63311ea8d11cb07464492f0' },
                            { name: '7月21日5点', value: '03df7100d63411ea8d11cb07464492f0' },
                            { name: '7月21日6点', value: '64310670d7ad11eab208537bd0e9be18' },
                            { name: '7月21日6点', value: '7de12b80daa111eab51dd76b96acbea5' }
                        ],
                        mapDatas: {
                            de4dac90d63311ea8d11cb07464492f0: {
                                title: '气象云202007202200',
                                id: 235407763,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            deb37340d63311ea8d11cb07464492f0: {
                                title: '气象云202007202300',
                                id: 1219321091,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            df03b620d63311ea8d11cb07464492f0: {
                                title: '气象云202007210000',
                                id: 1047628748,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            df20b400d63311ea8d11cb07464492f0: {
                                title: '气象云202007210100',
                                id: 262101819,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            df55cdc0d63311ea8d11cb07464492f0: {
                                title: '气象云202007210200',
                                id: 1512879278,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            df9b1420d63311ea8d11cb07464492f0: {
                                title: '气象云202007210300',
                                id: 1373748413,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            dfdf2200d63311ea8d11cb07464492f0: {
                                title: '气象云202007210400',
                                id: 240104698,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            '03df7100d63411ea8d11cb07464492f0': {
                                title: '气象云202007210500',
                                id: 1824853281,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            '64310670d7ad11eab208537bd0e9be18': {
                                title: '气象云202007210600',
                                id: 1209527958,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            },
                            '7de12b80daa111eab51dd76b96acbea5': {
                                title: '气象云202007210700',
                                id: 106007908,
                                url: 'https://www.supermapol.com',
                                withCredentials: false
                            }
                        },
                        label: {
                            formatter: function(val, index) {
                                return label[index];
                            }
                        }
                    };
                },
                computed: {
                    allLoaded() {
                        if (this.mapStatus.length) {
                            return this.mapStatus.every(item => {
                                return item.status;
                            });
                        }
                        return false;
                    }
                },
                watch: {
                    mapStatus: {
                        handler() {
                            console.log('mapStatus');
                            this.nextEnable = Boolean(
                                this.mapStatus.find((item, index) => this.currentIndex === index && item.status)
                            );
                            console.log('nextEnable', this.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;
                        var sourceCaches = 'T202007202300' || e.map.style.sourceCaches;
                        window.map = e.map;
                        this.resetMapLoadStatus();
                        // TODO,拿当前地图的sourceId
                    },
                    loadingChange(status) {
                        this.loading = status;
                    },
                    timelineplaychanged(val) {
                        this.playState = val.playState;
                    },
                    timelineChanged(val) {
                        console.log('timelineChanged');
                        var currentIndex = (val && val.currentIndex) || 0;
                        var dataId = this.data[currentIndex].value;
                        var mapInfo = this.mapDatas[dataId];
                        var url = mapInfo.url + '/web/maps/' + mapInfo.id + '/map.json';
                        this.currentIndex = currentIndex;
                        this.requestMapInfo(url, mapInfo, this.updateRasterSource);
                    },
                    requestMapInfo(url, mapInfo, cb) {
                        var rasterTiles = [];
                        var sourceId = 'T202007202200';
                        var _this = this;
                        $.get(url, function(data) {
                            var layers = data.layers;
                            for (var i = 0; i < layers.length; i++) {
                                if (layers[i].layerType === 'TILE' && layers[i].visible) {
                                    rasterTiles.push(layers[i].url);
                                }
                            }
                            if (!_this.readyNext) {
                                _this.mapQueue.push({ ...mapInfo, sourceId, rasterTiles });
                                return;
                            }
                            _this.readyNext = false;
                            cb(sourceId, rasterTiles);
                        });
                    },
                    updateRasterSource(sourceId, rasterTiles) {
                        var options = { proxy: '', tiles: rasterTiles };
                        if (!sourceId) {
                            return;
                        }
                        var source = this.map.getSource(sourceId);
                        for (var key in options) {
                            source[key] = options[key];
                        }
                        this.map.style.sourceCaches[sourceId].clearTiles();
                        this.map.style.sourceCaches[sourceId].update(this.map.transform);
                        this.map.triggerRepaint();

                        this.$emit('addlayerssucceeded');
                    },
                    updateNextRasterSource() {
                        console.log('b');
                        this.readyNext = true;
                        if (this.mapQueue.length) {
                            let { id: mapId, sourceId, rasterTiles } = this.mapQueue.shift();
                            this.updateRasterSource(sourceId, rasterTiles);
                        } else {
                            var key = this.data[this.currentIndex].value;
                            var beforeIds = Object.keys(this.map.style.sourceCaches);
                        }
                        // this.playNextStep();
                        !this.allLoaded && this.isAllSourceLoaded(key, beforeIds);
                    },
                    playNextStep() {
                        console.log('a');
                        if (this.allLoaded) {
                            this.playState && this.setPlayState(true);
                            this.nextEnable = null;
                            return;
                        }
                        const result = this.mapStatus.find((item, index) => this.currentIndex === index && item.status);
                        console.log(this.allLoaded, result, Boolean(result));
                        this.nextEnable = Boolean(
                            this.mapStatus.find((item, index) => this.currentIndex === index && item.status)
                        );
                    },
                    setPlayState(status) {
                        this.$refs.timeLine.setPlayState(status);
                    },
                    isAllSourceLoaded(key, sourceIds) {
                        if (this.timer) {
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                        this.timer = setInterval(() => {
                            this.$emit('loadingChange', true);
                            var loaded = sourceIds.every(id => {
                                if (this.map && this.map.style) {
                                    if (!this.map.getSource(id)) {
                                        return true;
                                    }
                                    return this.map.isSourceLoaded(id);
                                }
                                return true;
                            });
                            console.log('loaded', loaded);
                            if (loaded && this.mapStatus) {
                                clearInterval(this.timer);
                                this.timer = null;
                                var mapStatus = this.mapStatus.concat();
                                mapStatus.forEach(info => {
                                    if (info.key === key) {
                                        info.status = true;
                                    }
                                });
                                this.mapStatus = mapStatus;
                                this.$emit('loadingChange', false);
                            }
                        }, 100);
                    },
                    resetMapLoadStatus() {
                        let mapStatus;
                        if (this.mapStatus && this.mapStatus.length) {
                            mapStatus = this.mapStatus.map(info => {
                                info.status = false;
                                return info;
                            });
                        } else {
                            let mapInfoList = Object.keys(this.mapDatas);
                            if (mapInfoList.length) {
                                mapStatus = [];
                                mapInfoList.forEach(key => {
                                    mapStatus.push({ key, status: false });
                                });
                            }
                        }
                        this.mapStatus = mapStatus;
                    }
                }
            });
        </script>
    </body>
</html>