fuyuhang
/
Project_yhfu
réplica de http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsTimeLineSupermap_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-supermap-title {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 600px;
                height: 50px;
                z-index: 1000;
            }
            .sm-time-info {
                position: absolute;
                top: 20px;
                right: 50px;
                width: 300px;
                height: 50px;
                z-index: 1000;
            }
            .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="35063750"
                :tianditu-key="tiandituKey"
                :map-options="mapOptions"
                :loading="loading"
                @load="load"
            ></sm-web-map>
            <sm-time-line
                ref="timeLine"
                :data="data"
                :play-interval="2000"
                :next-enable="nextEnable"
                :label="label"
                @timelinechanged="timelineChanged"
                @timelineplaychanged="timelineplaychanged"
            ></sm-time-line>

            <sm-border type="border6" class="sm-supermap-title">
                <sm-text
                    title="超图大厦（成都）周边历史影像"
                    :font-style="{fontSize: '28px', fontWeight: 600}"
                ></sm-text>
            </sm-border>
            <sm-border type="border6" class="sm-time-info">
                <sm-text :title="timeInfo" :font-style="{fontSize: '18px', fontWeight: 600}"></sm-text>
            </sm-border>
        </div>
        <script>
            var label = [
                '2016年11月26日',
                '2017年4月13日',
                '2017年5月25日',
                '2017年11月11日',
                '2017年12月19日',
                '2018年1月10日',
                '2018年5月25日',
                '2019年11月11日'
            ];
            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_supermap_building1_qqm0ighb/rest/maps/',
                        encodeUrl:
                            '/image.png?viewBounds=%7B"leftBottom"%3A%7B"x"%3A11586898.539611159%2C"y"%3A3570491.9618448047%7D%2C"rightTop"%3A%7B"x"%3A11588127.387288133%2C"y"%3A3571087.184938393%7D%7D%20&center=%7B"x"%3A11587505.74%2C"y"%3A3570771.31%7D&width=1920&scale=0.000346564548&prjCoordSys=%7B"epsgCode"%3A3857%7D&transparent=true&height=930',
                        data: [
                            'T20161126',
                            'T20170413',
                            'T20170525',
                            'T20171111',
                            'T20171219',
                            'T20180110',
                            'T20180525',
                            'T20191111'
                        ],
                        timeInfo: label[0],
                        mapOptions: {
                            style: { version: 8, sources: {}, layers: [] },
                            center: [104.0924, 30.5217],
                            zoom: 18,
                            bearing: 0,
                            pitch: 0,
                            tileSize: 1024,
                            rasterTileSize: 1024
                        }
                    };
                },
                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.timeInfo = label[currentIndex];
                        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: [
                                    [104.08688053674865, 30.524020349913428],
                                    [104.09791946324947, 30.524020349913428],
                                    [104.09791946324947, 30.519414264971005],
                                    [104.08688053674865, 30.519414264971005]
                                ]
                            });
                            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>