fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html style="  width: 100%;height: 100%;">

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_webPrinting_landUse"></title>
    <script type="text/javascript" include='mapbox-gl-enhance' src="../../dist/mapboxgl/include-mapboxgl.js"></script>

    <style>
        .sidebar-config-wrap {
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            width: 360px;
            padding: 20px;
            background: #2c2c2c;
        }

        .sidebar-config-wrap .panel-group .panel {
            border-color: transparent;
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
        }

        .sidebar-config-wrap .panel .panel-heading {
            background: #383838;
            color: rgba(255, 255, 255, 0.85);
            border-color: #383838;
            position: relative;
        }

        .sidebar-config-wrap .panel .panel-heading::before {
            content: "";
            height: 50%;
            width: 2px;
            background: #3394dc;
            position: absolute;
            top: 25%;
            left: 0;
            display: block;
        }

        .form-group {
            overflow: hidden;
        }

        .sidebar-config-wrap .form-control,
        .sidebar-config-wrap .btn-group {
            width: 70%;
            float: right;
        }

        .sidebar-config-wrap .form-group label {
            margin-bottom: 0;
            line-height: 34px;
        }

        .sidebar-config-wrap .btn-group {
            display: block;
            margin-bottom: 10px;

        }

        .sidebar-config-wrap .btn-group button {
            width: 50%;
            outline: none;
        }

        .sidebar-config-wrap .btn-group button:focus {
            outline: none;
        }

        .sidebar-config-wrap .panel-title a {
            width: 100%;
            display: block;
            text-decoration: none !important;
            overflow: hidden;
        }

        .sidebar-config-wrap .panel-title a span.glyphicon {
            float: right;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded="true"] .glyphicon-chevron-down {
            display: none;
        }

        .sidebar-config-wrap .panel-title a[aria-expanded="false"] .glyphicon-chevron-up {
            display: none;
        }

        .sidebar-config-wrap .submit-btn-wrap {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            line-height: 80px;
            border-top: 2px solid #323232;
            text-align: center;
        }

        .sidebar-config-wrap #printBtn,
        .sidebar-config-wrap .progress {
            width: 80%;
        }

        .sidebar-config-wrap .progress {
            margin: 30px auto 0;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height: 100%">
    <div id="map" style="width: 100%;height:100%"></div>
    <form id="printForm" class="sidebar-config-wrap" role="form">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                            aria-expanded="true" aria-controls="collapseOne">
                            <span data-i18n="resources.text_baseInfo"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="templateName" data-i18n="resources.text_layoutTemplates"></label>
                            <select class="form-control" id="templateName">
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="title" data-i18n="resources.text_title"></label>
                            <input type="text" class="form-control" id="title"
                                data-i18n="[value]resources.title_mvtVectorLayer_mapboxStyle_landuse" />
                        </div>
                        <div class="form-group">
                            <label for="subTitle" data-i18n="resources.text_subTitle"></label>
                            <input type="text" class="form-control" id="subTitle" />
                        </div>
                        <div class="form-group">
                            <label for="copyright" data-i18n="resources.text_copyRightInfo"></label>
                            <input type="text" class="form-control" id="copyright" />
                        </div>
                        <div class="form-group">
                            <label for="author" data-i18n="resources.text_author"></label>
                            <input type="text" class="form-control" id="author" value="北京超图软件股份有限公司" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            <span data-i18n="resources.text_littleMap"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="scale" data-i18n="resources.text_scale"></label>
                            <input type="text" class="form-control" id="scale" value="0" />
                        </div>
                        <div class="form-group">
                            <label for="center" data-i18n="resources.text_center"></label>
                            <input type="text" class="form-control" id="center"
                                data-i18n="[title]resources.text_centerTip" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="scaleOptions">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                            <span data-i18n="resources.text_scale"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="scaleOptions">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="scaleText" data-i18n="resources.text_scaleText"></label>
                            <input type="text" class="form-control" id="scaleText" />
                        </div>
                        <div class="form-group">
                            <label for="type" data-i18n="resources.text_style"></label>
                            <select class="form-control" id="type">
                                <option value="LINE">line</option>
                                <option value="BAR" selected>bar</option>
                                <option value="BAR_SUB">bar_sub</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="intervals" data-i18n="resources.text_intervals"></label>
                            <input type="text" class="form-control" id="intervals" />
                        </div>
                        <div class="form-group">
                            <label for="unit" data-i18n="resources.text_unit"></label>
                            <select class="form-control" id="unit">
                                <option value="METER" data-i18n="resources.option_meterUnit"></option>
                                <option value="FOOT" data-i18n="resources.option_mileUnit"></option>
                                <option value="DEGREES" data-i18n="resources.option_degreeUnit"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="exportOptions">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                            <span data-i18n="resources.text_exportOptions"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="exportOptions">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="format" data-i18n="resources.text_format">格式</label>
                            <select class="form-control" id="format">
                                <option value="PDF">PDF</option>
                                <option value="PNG">PNG</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="dpi">DPI</label>
                            <input type="text" class="form-control" id="dpi" value="96" />
                        </div>
                        <div class="form-group">
                            <label for="exportScale" data-i18n="resources.text_scale"></label>
                            <input type="text" class="form-control" id="exportScale" value="0" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit-btn-wrap">
            <button type="submit" class="btn btn-primary" id="printBtn" data-i18n="resources.text_print"></button>
            <div class="progress">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100"
                    aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    printing...
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" include="bootstrap,jquery" src="../js/include-web.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var webMap = new mapboxgl.supermap.WebMap(1887887232, {
            target: 'map',
            server: 'https://www.supermapol.com'
        });
        webMap.on('addlayerssucceeded', function (e) {
            $('#center').val(e.map.getCenter().toArray().join(','));
            var extent = e.map.getCRS().extent;
            var res = Math.max(extent[2] - extent[0], extent[3] - extent[2]) / 512 / Math.pow(2, e.map.getZoom());
            var scale = SuperMap.Util.getScaleFromResolutionDpi(res, 96, e.map.getCRS().unit);
            $('#scale').val(scale * 2);
            $('#exportScale').val(scale);
        });
        var webPrintingJobService = new mapboxgl.supermap.WebPrintingJobService(host + '/iserver/services/webprinting/rest/webprinting/v1', {
            withCredentials: window.isLocal
        });
        webPrintingJobService.getLayoutTemplates(function (e) {
            e.result.forEach(function(item){
                $('#templateName').append('<option value='+item.templateName+'>'+item.templateName+'</option}');
            });
        });

        $('.progress').hide();
        $('#printForm').on('submit', printMap);
        function printMap(e) {
            e.preventDefault();
            $('#printBtn').hide();
            $('.progress').show();
            var params = new SuperMap.WebPrintingJobParameters({
                content: new SuperMap.WebPrintingJobContent({
                    type: "WEBMAP",
                    url: "https://www.supermapol.com/web/maps/1887887232/map.json"
                }),
                layoutOptions: new SuperMap.WebPrintingJobLayoutOptions({
                    templateName: $('#templateName').val(),
                    title: $('#title').val(),
                    subTitle: $('#subTitle').val(),
                    author: $('#author').val(),
                    copyright: $('#copyright').val(),
                    scaleBarOptions: new SuperMap.WebPrintingJobScaleBarOptions({
                        scaleText: $('#scaleText').val(),
                        type: $('#type').val(),
                        intervals: $('#intervals').val(),
                        unit: $('#unit').val(),
                    }),
                    littleMapOptions: new SuperMap.WebPrintingJobLittleMapOptions({
                        scale: +$('#scale').val() || 0,
                        center: { x: $('#center').val().split(',')[0], y: $('#center').val().split(',')[1] },
                        layerNames: webMap.layers && webMap.layers.map(function(item) {return item.name})
                    }),
                    legendOptions: new SuperMap.WebPrintingJobLegendOptions({
                        picAsBase64: "data:image/png;base64,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"
                    })
                }),
                exportOptions: new SuperMap.WebPrintingJobExportOptions({
                    format: $('#format').val(),
                    dpi: +$('#dpi').val(),
                    scale: +$('#exportScale').val()
                })
            });
            filterEmptyData(params);
            webPrintingJobService.createWebPrintingJob(params, function (e) {
                if (e.result && e.result[0] && e.result[0].path) {
                    webPrintingJobService.getPrintingJob(e.result[0].resourceConfigID, function ( res ) {
                        if (res.result && res.result.status === 'FINISHED') {
                            let link = document.createElement('a');
                            link.href = res.result.result.downloadUrl;
                            link.download = 'supermap-webprinting-report.pdf';
                            link.target = '_blank';
                            link.click();
                            // 释放内存
                            window.URL.revokeObjectURL(link.href);
                            $('#printBtn').show();
                            $('.progress').hide();
                        } else {
                            alert('打印失败');
                            $('#printBtn').show();
                            $('.progress').hide();
                        }
                    });
                } else {
                    alert('打印失败');
                    $('#printBtn').show();
                    $('.progress').hide();
                }
            });
        }
        function filterEmptyData(params) {
            for (let key in params) {
                if (params[key] === undefined) {
                    delete params[key];
                } else if (typeof params[key] === 'object') {
                    filterEmptyData(params[key]);
                    if (JSON.stringify(params[key]) === '{}') {
                        delete params[key];
                    }
                }
            }
        }
        $('#legendBtnGroup').click(function (e) {
            $(this).children(".active").removeClass('active');
            $(e.target).addClass('active');
            $(this).attr('aria-active', e.target.getAttribute('id'));
        });
    </script>
</body>