ArcGIS API for javascript开发笔记 —— 地图打印

最新推荐文章于 2023-12-11 15:54:36 发布

iForget7

最新推荐文章于 2023-12-11 15:54:36 发布

阅读量6.9k

点赞数 4

分类专栏：系统开发文章标签： arcgis javascript 乱码字体源码

本文链接：https://blog.csdn.net/jingxinwjb/article/details/51906464

版权

系统开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前段时间的一个项目用到了地图的打印功能。当时遇到了一个GraphicLayer中TextSymbol汉字打印乱码和文字在地图中过大的问题，
后来经过分析发现，汉字乱码是中文字体的原因，文字太大是由于DPI参数设置过高导致的。下面是dpi为96和300的对比图片：

附上源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="" name="description">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>地图打印DPI测试</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
        html,body{
            margin: 0;
            width: 100%;
            height: 100%;;
        }
        #map{
            width: 100%;
            height: 100%;;
        }
        #PrinterDiv{
            position: absolute;
            top: 0px;
            right: 0px;;
            width: 120px;
            height: 100px;
            background-color: #fff;
            border: 1px solid #ddd;
            text-align: center;
            line-height: 30px;
            padding: 10px;;
        }
    </style>
</head>

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

<div id="PrinterDiv">
    <span style="width: 100%;font-weight: bold;text-align: left">设置打印DPI：</span>
    <input id="dpi" style="width: 100%" value="96">
    <button id="print">打印</button>
</div>
</body>
<script src="https://js.arcgis.com/3.14/"></script>
<script type="text/javascript">
    require([
                "esri/map",
                "esri/dijit/Print",
                "esri/tasks/PrintTask",
                "esri/tasks/PrintParameters",
                "esri/tasks/PrintTemplate",
                "esri/symbols/TextSymbol",
                "esri/symbols/Font",
                "esri/graphic",
                "esri/geometry/Point",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/Color",
                "dojo/domReady!"
            ],
            function(
                    Map,
                    Print,
                    PrintTask,
                    PrintParameters,
                    PrintTemplate,
                    TextSymbol,
                    Font,
                    Graphic,
                    Point,
                    SimpleMarkerSymbol,
                    SimpleLineSymbol,
                    Color
            ){
                var map = new Map("map", {
                    center: [-118, 34.5],
                    zoom: 8,
                    basemap: "topo"
                });
                map.on("load", function() {
                    var point = new Point(-118,34.5);
                    var symbols_point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
                    var graphic = new Graphic(point, symbols_point);
                    map.graphics.add(graphic);
                    var symbols_text = new TextSymbol("测试DPI").setColor(
                            new Color([128,0,0])).setAlign(Font.ALIGN_START).setFont(
                            new Font("12pt").setWeight(Font.WEIGHT_BOLD).setFamily("微软雅黑")).setOffset(5, 5) ;
                    var graphic = new Graphic(point, symbols_text);
                    map.graphics.add(graphic);
                });


                var button = document.getElementById("print");
                button.onclick = function(){
                    var printTask = new PrintTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
                    var template = new PrintTemplate();
                    var dpi = document.getElementById("dpi").value ;
                    template.exportOptions = {
                        width: 800,
                        height: 600,
                        dpi: Number(dpi)
                    };
                    template.format = "PDF";
                    template.layout = "MAP_ONLY";
                    template.preserveScale = false;
                    var params = new PrintParameters();
                    params.map = map;
                    params.template = template;
                    printTask.execute(params, function(evt){
                        window.open(evt.url,"_blank");
                    });
                }
            });
</script>
</html>