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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=9,IE=10,IE=11"/>
    <title data-i18n="resources.title_mapPrint"></title>
    <style type="text/css">
        .editPane {
            position: absolute;
            right: 180px;
            top: 10px;
            text-align: center;
            background: #FFF;
            z-index: 1000;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">

<div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.text_mapPrint"></h5>
    </div>
    <div class='panel-body' id='params'>
        <p></p>
        <div align='right' class='button-group'>
            <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.btn_marker" onclick="createMarker()"/>
            <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.btn_print" onclick="createPrintMap('map')"/>
            <input type='button' id='btn3' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear" onclick="clearAllFeatures()"/>
        </div>
    </div>
</div>

<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>

<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
    var map, layer, markerLayer;
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    smCompanyArr = [
        ["北京超图软件股份有限公司上海分公司", 13522414.5106, 3662690.3875, "上海市闸北虬江路1000号聚源大厦办公楼1505室"],
        ["北京超图软件股份有限公司广州分公司", 12608758.6677, 2647887.5456, "广州市体育西路109号高盛大厦9楼G单元"],
        ["北京超图软件股份有限公司成都分公司", 11584664.2393, 3588559.6862, "成都市高新区天府大道中段1268号天府软件园E区"],
        ["北京超图软件股份有限公司杭州分公司", 13375617.5430, 3538667.9064, "杭州市天目山路159号现代国际大厦A座"],
        ["北京超图软件股份有限公司西安分公司", 12127616.0783, 4064501.0071, "西安高新区丈八一路一号 汇鑫IBC（A座）"],
        ["北京超图软件股份有限公司长沙分公司", 12573006.2587, 3277897.5105, "长沙市芙蓉中路二段359号佳天国际新城北栋8H"],
        ["北京超图软件股份有限公司沈阳分公司", 13740261.8165, 5131821.5120, "沈阳市沈河区市府大路262甲号新华科技大厦"]
    ],
        url = host + "/iserver/services/map-china400/rest/maps/China";
    function init() {
        //定义layer图层，TiledDynamicRESTLayer：分块动态 REST 图层
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {
            transparent: true,
            cacheEnabled: true
        }, {maxResolution: "auto", useCanvas: false, useCORS: true});
        //为图层初始化完毕添加addLayer()事件
        layer.events.on({"layerInitialized": addLayer});
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.OverviewMap(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })
            ]
        });
        markerLayer = new SuperMap.Layer.Markers("Markers");
    }
    $(document).ready(function () {
        init();
    });
    function addLayer() {
        map.addLayers([layer, markerLayer]);
        map.setCenter(new SuperMap.LonLat(11733502.481499, 4614406.969325), 4);
    }

    //移除整个图层要素
    function clearAllFeatures() {
        markerLayer.clearMarkers();
        if (map.popups.length != 0) {
            var i = 0, lengthPopup = map.popups.length;
            while (i < lengthPopup) {
                map.removePopup(map.popups[0]);
                i++;
            }
        }
    }

    /**
     *打印地图，支持ie9及以上，chrome，firefox等.
     *请注意相关css,js文件是否存在.
     *Parameters:
     *id <String>  id 为map div的id
     */
    function createPrintMap(id) {
        var broz = SuperMap.Browser.name;
        if (broz == 'msie' && parseInt(SuperMap.Browser.version) < 9) {
            widgets.alert.showAlert(resources.msg_supportPrint,false);
            return;
        }
        var printWindow = window.open("");
        var strInnerHTML = document.getElementById(id).innerHTML;

        var strHeader = "<!DOCTYPE html><html><head><META HTTP-EQUIV='pragma' CONTENT='no-cache'><META HTTP-EQUIV='Cache-Control' CONTENT='no-cache, must-revalidate'><META HTTP-EQUIV='expires' CONTENT='Wed, 26 Feb 1997 08:21:57 GMT'><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /><meta name='apple-mobile-web-app-capable' content='yes' /><title>地图打印</title>";
        var strCSS = "<script type='text/javascript' include='style,sm-doc'exclude='iclient-classic' src='../../dist/classic/include-classic.js'>";
        var strScript = "<script src='https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js'><\/script><script type = 'text/javascript'>" + "\n" + "function printDiv(){document.getElementsByClassName('newuiPrint')[0].style.display ='none';window.print();document.getElementsByClassName('newuiPrint')[0].style.display ='block';}<\/script>";
        var strBody = "</head><body><div class='print-header'><div class='superD'><h3>地图</h3></div><div id='" + id + "' >" + strInnerHTML + "</div><div id='superft'><div class='printClose'>" + "<span class='newuiPrint' onclick = 'printDiv()'></span></div></div></div></body></html>";

        var strHTML = strHeader + strCSS + strScript + strBody;
        printWindow.document.write(strHTML);
        printWindow.document.close();
        function onloadHTML() {
            var strDOM = printWindow.document.getElementById(id).children[0].children;
            for (var i = 0, length = strDOM.length; i < length; i++) {
                var idStr = strDOM[i].id;
                if (idStr.indexOf("SuperMap.Control.ScaleLine") == -1 && idStr.indexOf("SuperMap.Map") == -1) {
                    strCss = strDOM[i].style.cssText;
                    strCss = strCss + "display: none;";
                    strDOM[i].style.cssText = strCss;
                }
            }

            var canvasPrint = printWindow.document.getElementsByTagName("canvas");
            var canvasMap = document.getElementsByTagName("canvas");
            for (var i = 0, length = canvasPrint.length; i < length; i++) {
                pasteCanvas(canvasMap[i], canvasPrint[i]);
            }
        }

        if (broz == 'firefox') {
            printWindow.onload = onloadHTML;
        } else if (broz == 'safari' || broz == 'chrome' || broz == 'msie') {
            window.setTimeout(onloadHTML, 50);
        }
    }
    //如果涉及到Canvas的图层打印，需要将范例发布出来运行，否则会产生跨域的问题
    function pasteCanvas(sCanvas/*source*/, dCanvas/*destination*/) {
        var w = sCanvas.width,
            h = sCanvas.height;
        dCanvas.width = w;
        dCanvas.height = h;
        var viewerImageSrc = sCanvas.toDataURL("image/png");
        var viewerImage = new Image();
        viewerImage.src = viewerImageSrc;
        var dContext = dCanvas.getContext("2d");
        dContext.drawImage(viewerImage, 0, 0, w, h);
    }

    //添加标注
    function createMarker() {
        markerLayer.clearMarkers();
        for (var i = 0, lengthCompany = smCompanyArr.length; i < lengthCompany; i++) {
            var point = new SuperMap.Geometry.Point(parseFloat(smCompanyArr[i][1]), parseFloat(smCompanyArr[i][2])),
                strContent = new Array(smCompanyArr[i][0], smCompanyArr[i][3]),
                size = new SuperMap.Size(32, 32),
                offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                feature = new SuperMap.Feature(markerLayer, new SuperMap.LonLat(point.x, point.y));
            feature.data.icon = new SuperMap.Icon("./images/markerflag.png", size, offset);
            var marker = feature.createMarker();
            var markerClick = function (evt, feature, strContent) {
                SuperMap.Event.stop(evt);
                this.win.open(feature, {
                    "name": strContent[0],
                    "informition": strContent[1]
                });
            };
            marker.events.register("click", feature, function (feature, strContent) {
                return function (evt) {
                    markerClick(evt, feature, strContent);
                }
            }(feature, strContent));
            markerLayer.addMarker(marker);
        }
    }

    this.win = new InforWindow_z({"map": map});
    function InforWindow_z(param) {
        var t = this;
        t.infowin = null;
        t.map = null;
        t.init = function (param) {
            for (var key in param) {
                t[key] = param[key];
            }
        }
        t.open = function (feature, data) {
            t.close();
            t.create(feature, data);
        }
        t.create = function (feature, data) {
            var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>" +
                "<span style='font-weight: bold; font-size: 18px;'>详细信息</span><br>";
            contentHTML += "公司名称：" + data.name + "<br>";
            contentHTML += "公司地址：" + data.informition + "</div>";
            //初始化一个弹出窗口，当某个地图要素被选中时会弹出此窗口，用来显示选中地图要素的属性信息
            var popup = new SuperMap.Popup.FramedCloud("chicken",
                feature.marker.lonlat,
                null,
                contentHTML,
                null,
                true);
            feature.popup = popup;
            map.addPopup(popup);
            t.infowin = popup;
        }
        t.close = function () {
            if (t.infowin) {
                try {
                    t.infowin.hide();
                    t.infowin.destroy();
                }
                catch (e) {
                }
            }
        }
        t.init(param);
    }

</script>
</body>
</html>