源碼：
| 變量 | 含義 |
|---|---|
| dongURL | 發佈的點圖層 |
| pmapURL | 地理處理服務 |
<!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>書籤控件</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.31/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.31/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.31/"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
/* 指定樣式 */
html,
body,
#map {
height: 100%;
margin: 0;
}
.bookmark-container {
position: absolute;
top: 100px;
left: 15px;
padding: 1rem;
background: #fff;
border-radius: 4px;
border: 1px solid #eee;
z-index: 50;
}
.defult {
position: absolute;
z-Index: 999;
background-color: #FFF;
border: 1px solid #ccc;
}
</style>
</head>
<body class="claro">
<!-- 地圖容器 -->
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;margin:0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">
<div class="bookmark-container">
<input id="Btn" type="button" value="地圖打印" class="btn btn-primary" style="margin: 5px;" />
<div id="bookmarks"></div>
</div>
<div class="defult" style="right:20px; bottom:20px;">
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'切換底圖', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 60px; left: 40px; z-Index:999;">
<div id="basemapToggle"></div>
</div>
</div>
<div class="defult" style="top:300px ; right: 10px ;margin: 10px;">
<button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled" class="center-block"
style="margin-bottom:10px;">Lendge</button>
<div id="legendDiv"></div>
</div>
</div>
<!--圖層列表顯示的div控件-->
<div class="defult" style="top:400px; left: 40px;">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false">
<div id="measurementDiv"></div>
</div>
</div>
</div>
<!-- 比例尺（Scalebar）
鷹眼圖（OverviewMap）
底圖庫（BasemapGallery）
底圖切換器（BasemapToggle）
書籤（Bookmarks）
圖層列表（LayerList）
打印（Print）
測量工具（Measurement）
圖例（Legend） -->
<script>
require([
"esri/map",
"dojo/dom", "dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Scalebar",
"esri/dijit/OverviewMap",
"esri/dijit/BasemapToggle",
"esri/dijit/BasemapGallery",
"esri/dijit/Bookmarks",
"esri/dijit/Measurement",
"esri/dijit/Legend",
"esri/dijit/LayerList",
"esri/tasks/PrintTask",
"esri/tasks/PrintTemplate",
"esri/tasks/PrintParameters",
"dojo/domReady!"
], function (
Map, dom, on, ArcGISDynamicMapServiceLayer,
Scalebar,
OverviewMap,
BasemapToggle,
BasemapGallery,
Bookmarks,
Measurement,
Legend,
LayerList,
PrintTask, PrintTemplate, PrintParameters
) {
var dongURL = "http://localhost:6080/arcgis/rest/services/webgis/China_POI/MapServer";
var donglayer = new ArcGISDynamicMapServiceLayer(dongURL);
// 初始化容器
const map = new Map("map", {
center: [108.934518, 34.35333],
zoom: 7,
logo: false,
basemap: "oceans"
});
map.addLayer(donglayer);
// 比例尺
var scalebar = new Scalebar({
map: map,
attachTo: "bottom-left"
});
// 鷹眼
var overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
// 地圖庫
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function (msg) {
console.log("basemap gallery error: ", msg);
});
// 地圖切換
var basemapToggle = new BasemapToggle({
map: map,
visible: true,
}, "basemapToggle")
basemapToggle.startup();
// 書籤
var bookmarks_list = [
{ "extent": { "xmin": 106, "ymin": 39, "xmax": 112, "ymax": 32 }, "name": "陝西" },
{ "extent": { "xmin": 111, "ymin": 31, "xmax": 117, "ymax": 35 }, "name": "河南" },
{ "extent": { "xmin": 109, "ymin": 35, "xmax": 121, "ymax": 42 }, "name": "河北" },
{ "extent": { "xmin": 115, "ymin": 31, "xmax": 121, "ymax": 34 }, "name": "江蘇" },
{ "extent": { "xmin": 90, "ymin": 22, "xmax": 114, "ymax": 36 }, "name": "四川" }
]
const bookmarks = new Bookmarks({
map: map,
bookmarks: bookmarks_list,
editable: true
}, "bookmarks");
bookmarks.startup();
// 測量工具
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();
//圖例
var legend = new Legend({
map: map
}, "legendDiv");
legend.startup();
// 圖層列表
var myWidget = new LayerList({
map: map,
layers: donglayer
}, "layerList");
myWidget.startup();
//打印地圖
on(dom.byId("Btn"), "click", function () {
var pmapURL="http://localhost:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task" ;
//創建地圖打印對象
var printMap = new PrintTask(pmapURL);
//創建地圖打印模版
var template = new PrintTemplate();
//創建地圖的打印參數，參數裏面包括：模版和地圖
var params = new PrintParameters();
//輸出圖片的空間參考
printMap.outSpatialReference = map.SpatialReference
//打印圖片的各種參數
template.exportOptions = {
width: 850,
height: 650,
dpi: 96
};
//打印輸出的格式
template.format = "PDF";
//輸出地圖的佈局
template.layout = "MAP_ONLY";
PrintTemplate
//設置參數地圖
params.map = map;
//設置參數模版
params.template = template;
console.log(params)
//運行結果
printMap.execute(params, function (result) {
console.log("123")
if (result != null) {
//網頁打開生成的地圖
window.open(result.url);
}
})
})
})
</script>
</body>
</html>
打印地圖，不顯示參考博文
效果圖：
