fuyuhang
/
Project_yhfu
spiegel van http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


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

<head>
    <meta charset="UTF-8">
    <title data-i18n='resources.title_componentsCompare_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%;
        }

        .compare-title {
            position: absolute;
            top: 20px;
            left: 12%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 74%;
            z-index: 100;
        }

        .compare-title .sm-component-border {
            width: 334px;
            height: 48px;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="main">
        <div class="compare-title">
            <sm-border type="border6">
                <sm-text v-bind="textProps" title="全球疫情累积确诊">
                </sm-text>
            </sm-border>
            <sm-border type="border6">
                <sm-text v-bind="textProps" title="全球疫情累积发病率">
                </sm-text>
            </sm-border>
        </div>
        <sm-compare :before-map-options="beforeMapOptions" :after-map-options="afterMapOptions"></sm-compare>
        <!-- <sm-compare>
            <sm-web-map slot="beforeMap" target="beforeMap" server-url="https://www.supermapol.com/" @load="load"
                :map-id="2134374143">
            </sm-web-map>
            <sm-web-map slot="afterMap" target="afterMap" server-url="https://www.supermapol.com/"
                :map-id="1127786844">
            </sm-web-map>
        </sm-compare> -->
    </div>

    <script>
        new Vue({
            el: '#main',
            data() {
                return {
                    beforeMapOptions: {
                        target: 'beforeMap',
                        serverUrl: 'https://www.supermapol.com',
                        mapId: 2134374143,
                        mapOptions: {
                            center: [-39.9535, 38.0542],
                            zoom: 2.44

                        },
                        legendControl: {
                            background: "rgba(0,0,0,0.3)",
                            textColor: "#fff",
                            show: true,
                            position: "bottom-left",
                            layerNames: ["0315countrycenternpc"],
                            mode: "simple"
                        }
                    },
                    afterMapOptions: {
                        target: 'afterMap',
                        serverUrl: 'https://www.supermapol.com/',
                        mapId: 1127786844,
                        mapOptions: {
                            center: [-39.9535, 38.0542],
                            zoom: 2.44

                        },
                        legendControl: {
                            background: "rgba(0,0,0,0.3)",
                            textColor: "#fff",
                            show: true,
                            position: "bottom-right",
                            layerNames: ["0315contryregion"],
                            mode: "simple"
                        }
                    },
                    textProps: {
                        textColor: "#fff",
                        background: "rgba(0,0,0,0)",
                        fontStyle: {
                            fontSize: '27px',
                            lineHeight: 1.5,
                            fontWeight: "normal",
                            justifyContent: "center",
                            textIndent: 0,
                            fontFamily: "微软雅黑",
                        }
                    }
                };
            }
        })

    </script>
</body>

</html>