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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n='resources.title_componentsSlideshow_Vue'></title>
    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
    <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
        #main {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }

        .sm-component-slideshow {
            position: absolute;
            top: 40px;
            left: 30px;
            width: 400px;
            height: 380px;
            border-radius: 4px;
        }

    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="main">
        <sm-web-map map-id='567946816' :map-options="mapOptions" server-url='https://www.supermapol.com'
            tianditu-key='1d109683f4d84198e37a38c442d68311' @load="mapLoaded">
        </sm-web-map>
        <sm-slideshow :collapsed="false" :autoplay="autoplay" :pagination="pagination" @change="slideChange">
            <sm-slideshow-item v-for="item of content" :key="item.title">
                <h3 style="margin-top: 8px;">{{ item.title }}</h3>
                <p style="padding: 8px;">{{ item.description }}</p>
                <img :src="item.image" style="width: 300px; height: 170px;" />
            </sm-slideshow-item>
        </sm-slideshow>
    </div>

    <script>
        new Vue({
            el: '#main',
            data() {
                return {
                    mapOptions: {
                        zoom: 14,
                        pitch: 60,
                        center: [103.93424623295097, 33.03730377719067]
                    },
                    content: '',
                    pagination: {
                        type: 'bullets',
                        clickable: true
                    },
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false
                    }
                };
            },
            created() {
                this.setDataFn = this.setData.bind(this);
                this.getData(this.setDataFn);
            },
            beforeDestroy() {
                this.marker && this.marker.remove() && (this.marker = null);
            },
            methods: {
                getData(cb) {
                    var jsonName = /en/.test(SuperMap.Lang.getCode()) ? 'jiuzhai-en' : 'jiuzhai';
                    $.get(`../data/jiuzhai/${jsonName}.json`, function (res) {
                        cb && cb(res);
                    });
                },
                setData(res) {
                    this.content = res;
                },
                slideChange(options) {
                    let coordinates = this.content[options.realIndex].coordinates;
                    this.map.flyTo({ center: coordinates });
                    if (!this.marker) {
                        this.marker = new mapboxgl.Marker()
                            .setLngLat(coordinates)
                            .addTo(this.map);
                    } else {
                        this.marker.setLngLat(coordinates)
                    }
                },
                mapLoaded(e) {
                    this.map = e.map;
                }
            }
        })
    </script>
</body>

</html>