Arcgis Api for JavaScript4.x 打印地图

最新推荐文章于 2022-10-07 19:47:06 发布

GISer_CV攻城狮

最新推荐文章于 2022-10-07 19:47:06 发布

阅读量875

点赞数 1

分类专栏： ArcGIS API For Javascript

本文链接：https://blog.csdn.net/weixin_44011559/article/details/109597150

版权

ArcGIS API For Javascript 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

先打开你的arcgis service,点击Utilities。如果没有这个选项。去http://localhost:6080/arcgis/manager/ 里面把Utilities服务打开
如图所示。
在这里插入图片描述

在这里插入图片描述
点击Utilities/PrintingTools (GPServer)

如图：需要这个地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引用在线arcgis api -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>
    <!-- 引用在线Jquery -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        require([
            "esri/Map",
            "esri/Basemap",
            "esri/views/MapView",
            "esri/geometry/Extent",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ], function(
            Map,
            Basemap,
            MapView,
            Extent,
            dom,
            on) {
            var startExtent = new Extent({
                xmin: 120.236368,
                ymin: 36.043567,
                xmax: 120.579018,
                ymax: 36.196569,
                spatialReference: {
                    wkid: 4549
                }
            });
            var map = new Map({
                basemap: "hybrid"
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 11,
                Extent: startExtent,
                center: [120.369174, 36.097245]
            });
            $(".btn").click(function() {
                print();
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv">
        <button class="btn">点击打印</button>
    </div>
</body>

</html>
<script>
    require([
        "esri/Map",
        "esri/Basemap",
        "esri/views/MapView",
        "esri/tasks/PrintTask",
        "esri/tasks/support/PrintTemplate",
        "esri/tasks/support/PrintParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
    ], function(
        Map,
        Basemap,
        MapView,
        PrintTask,
        PrintTemplate,
        PrintParameters,
        dom,
        on) {
        function print() {
            var printTask = new PrintTask({
                url: "http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
            });
            var template = new PrintTemplate({
                format: "pdf",
                exportOptions: {
                    dpi: 300
                },
                layout: "a4-portrait",
                layoutOptions: {
                    titleText: "打印一张地图",
                    authorText: "Sam"
                }
            });
            var params = new PrintParameters({
                view: view,
                template: template
            });
            printTask.execute(params).then(function(data) { //printResult printError
                window.open(data.url, "_blank");
                //console.log(data["url"]);
            }, function() {
                console.log(Error);
            });
        };
    });
</script>

tip:遇到一个坑，为什么打印不出来地图？？？？

在这里插入图片描述
打印出来：上面的图控制台的地址是打印图纸出来地图的地址，点进去。
没图，啥也没有，以为是代码写错了，但检查了几遍，发现代码没问题。后来我在想，是不是由于，地图还没完全加载出来，就执行了打印，导致打印一个空白的东西。后来我试了一下，把打开写在一个按钮click事件里面。等地图加载出来，再点击打印按钮。一试，果然是这样。确实是地图没加载完成，就执行打印，结果就是打印不出来地图。
在这里插入图片描述

粘贴上错误的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引用在线arcgis api -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>
    <!-- 引用在线Jquery -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/Basemap",
            "esri/views/MapView",
            "esri/geometry/Extent",
            "esri/tasks/PrintTask",
            "esri/tasks/support/PrintTemplate",
            "esri/tasks/support/PrintParameters",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ], function(
            Map,
            Basemap,
            MapView,
            Extent,
            PrintTask,
            PrintTemplate,
            PrintParameters,
            dom,
            on) {
            var startExtent = new Extent({
                xmin: 120.236368,
                ymin: 36.043567,
                xmax: 120.579018,
                ymax: 36.196569,
                spatialReference: {
                    wkid: 4549
                }
            });
            var map = new Map({ //属性：allLayers、ground、layers
                basemap: "topo-vector"
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 11,
                Extent: startExtent,
                center: [120.369174, 36.097245] // longitude, latitude
            });
            var printTask = new PrintTask({
                url: "http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
            });
            var template = new PrintTemplate({
                format: "pdf",
                exportOptions: {
                    dpi: 300
                },
                showLabels: true,
                layout: "a4-portrait",
                layoutOptions: {
                    titleText: "Warren Wilson College Trees",
                    scalebarUnit: "Miles",
                    authorText: "Sam"
                }
            });
            var params = new PrintParameters({
                view: view,
                template: template
            });
            printTask.execute(params).then(function(data) {
                console.log(data["url"]);
            }, function() {
                console.log(Error);
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

对view添加on事件。
view.on(“mouse-wheel”, function(event) {
var num = view.scale;
console.log(num);
});
前提：事先在view初始化的时候，添加scale属性，不然获取不到比例尺，

var view = new MapView({
container: “viewDiv”,
map: map,
zoom: 4,
scale: 24000,
center: [15, 65]
});
随着鼠标滚轮滑动，比例尺也变动。
在这里插入图片描述

GISer_CV攻城狮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Arcgis Api for JavaScript4.x 打印地图

先打开你的arcgis service,点击Utilities。如果没有这个选项。去http://localhost:6080/arcgis/manager/ 里面把Utilities服务打开如图所示。点击Utilities/PrintingTools (GPServer)如图：需要这个地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫