顺德区地理信息公共服务平台

控件类API 打印视图

打印视图初始化加载事件

以下是打印视图初始化加载事件的示例代码。

                                                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                        <html xmlns="http://www.w3.org/1999/xhtml">
                                                        <head>
                                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                                        <title>打印视图初始化加载事件Demo </title>
                                                        <script src="https://tianditu.shunde.gov.cn/portalsys/DCIMapMiddleware.initapi" type="text/javascript">
</script>
                                                        <style type="text/css">
                                                            .map_content {
                                                                height: 380px;
                                                                width: 741px;
                                                                text-align: left;
                                                                border: 1px solid #000000;
                                                            }

                                                            #map_div {
                                                                position: absolute;
                                                            }

                                                            .Button {
                                                                position: absolute;
                                                                bottom: 10px;
                                                                left: 20px;
                                                                z-index: 2;
                                                                margin-left: 5px;
                                                                float: left;
                                                            }
</style>
                                                                </head>
                                                        <body>
                                                        <div id="map_div" class="map_content">
                                                        <input type="button" class="Button" value="打印视图" onclick="onclickExportWebMap()" />

                                                                    </div>
                                                                </body>
                                                            </html>
                                                        <script type="text/javascript">
    dojo.require("esri.tasks.PrintTask");
    dojo.require("esri.tasks.PrintParameters");
    var map = null;
    var url = "http://172.26.99.106:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
    var baseurl = "http://192.168.3.170:6080/arcgis/rest/services/CGCS2000_TM_SL_2016/MapServer";
    function printResult(e) {
        alert("已完成");
        window.open(e.url, "_blank");
    }
    function printError(e) {
        alert("打印失败");
    }
    function onclickExportWebMap() {
        var PrintTask = new esri.tasks.PrintTask(url, { async: false });

        var template = new esri.tasks.PrintTemplate();
        template.format = "JPG";
        template.layout = "A4 Landscape";
        template.preserveScale = false;
        template.outScale = 10000;//preserveScale为true时生效
        template.showAttribution = true;
        template.showLabels = true;
        var layouts = [{
            options: {
                scalebarUnit: "Meters",//Kilometers
                titleText: "顺德区地图",
                authorText: "© 顺德区人民政府（系统全空间辅助应用子系统自动生成）",
                legendLayers: []
            }
        }];
        template.layoutOptions = layouts[0].options;

        var PrintParameters = new esri.tasks.PrintParameters();
        PrintParameters.map = map;
        PrintParameters.outSpatialReference = map.spatialReference;
        PrintParameters.template = template;
        //esriConfig.defaults.io.proxyUrl = Portal.Global.getRootPath() + "proxy.ashx";
        //esriConfig.defaults.io.alwaysUseProxy = true;
        PrintTask.execute(PrintParameters, printResult, printError);
    }
    function showMap() {
        map = new esri.Map("map_div", {
            logo: false,
            slider: false
        });
        var baseLyr = new esri.layers.ArcGISTiledMapServiceLayer(baseurl);
        baseLyr.id = "printBaseLyr";
        map.addLayer(baseLyr);
    }
    dojo.addOnLoad(showMap);
                                                            </script>

下面我们分步向您介绍：

加载地图浏览API

将下载的地图浏览API包解压后拷入网页所在的工程文件夹，将如下列代码所示的相对路径加入网页head节内引用。

1.	< !--引入地图框架-->
2.	< script src="http://服务器IP/地图API名称/" type="text/javascript" />< /script>

创建地图容器元素

创建地图浏览应用程序需要在页面中创建一块区域用于显示地图内容，这个区域我们叫做地图容器，即在body中加入的一个div容器，其页面代码为：

1.	<div id="map_div" class="content"> </div>

参数初始化设置

地图实例通过下列代码创建，其中，DCIMapConfig.mapInitParams是地图初始化参数。

1.	var map = new DCIMap("map_div", DCIMapConfig.mapInitParams);

加载图层到地图

根据底图类型，创建底图，添加到地图中。

1.	switch (DCIMapConfig.vecMap.type) {
2.	case 0://WMTS
3.	var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
4.	map.addLayer(layers, 0);
5.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
6.	break;
7.	case 1://1为mapserver切片
8.	var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
9.	map.addLayer(layers, 0);
10.	dojo.connect(layers, "onLoad", function () {
11.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
12.	})
13.	break;
14.	}
15.	}

打印视图

通过定义onclickExportWebMap()方法实现打印视图功能。

1.	function onclickExportWebMap() {
2.	var PrintTask = new esri.tasks.PrintTask(url, { async: false });
3.	var template = new esri.tasks.PrintTemplate();
4.	template.format = "JPG";
5.	template.layout = "A4 Landscape";
6.	template.preserveScale = false;
7.	template.outScale = 10000;
8.	template.showAttribution = true;
9.	template.showLabels = true;
10.	var layouts = [{
10.	options: {
11.	scalebarUnit: "Meters",
12.	titleText: "顺德区地图",
13.	authorText: "© 顺德区人民政府（系统全空间辅助应用子系统自动生成）",
14.	legendLayers: []
15.	}
16.	}];
17.	template.layoutOptions = layouts[0].options;
18.	var PrintParameters = new esri.tasks.PrintParameters();
19.	PrintParameters.map = map;
20.	PrintParameters.outSpatialReference = map.spatialReference;
21.	PrintParameters.template = template;
22.	PrintTask.execute(PrintParameters, printResult, printError);
23.	}

创建打印视图按钮

1.	<input type="button" class="Button" value="打印视图" onclick="onclickExportWebMap()">