1、4API打印天地图4326坐标系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>4API打印天地图4326坐标系</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#print {
position: absolute;
top: 10px;
right: 10px;
z-index: 999;
width: 60px;
height: 40px;
background-color: #fff;
text-align: center;
line-height: 40px;
cursor: pointer;
border: 1px solid #ccc;
}
</style>
<link rel="stylesheet" href="https://js.arcgisonline.cn/4.15/esri/css/main.css">
<script src="https://js.arcgisonline.cn/4.15/init.js"></script>
<script>
require(["esri/Map",
"esri/views/MapView",
"esri/layers/BaseTileLayer",
"esri/layers/support/TileInfo",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
"esri/tasks/PrintTask",
"esri/tasks/support/PrintTemplate",
"esri/tasks/support/PrintParameters",
"esri/config",
"esri/request", "dojo/dom",
"dojo/on", "dojo/domReady!"],
function (Map, MapView, BaseTileLayer, TileInfo,
SpatialReference, Extent, PrintTask, PrintTemplate,
PrintParameters, esriConfig, esriRequest, dom, on) {
var tileInfo = new TileInfo({
"dpi": 96,
"format": "image/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference({
"wkid": 4326
}),
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"lods": [
{ "level": 0, "resolution": 1.4062500000002376, "scale": 590995186.11759996 },
{ "level": 1, "resolution": 0.703125000000119, "scale": 295497593.0588 },
{ "level": 2, "resolution": 0.351562500000059, "scale": 147748796.5294 },
{ "level": 3, "resolution": 0.17578125000003, "scale": 73874398.2647 },
{ "level": 4, "resolution": 0.0878906250000148, "scale": 36937199.1323 },
{ "level": 5, "resolution": 0.0439453125000074, "scale": 18468599.566175 },
{ "level": 6, "resolution": 0.0219726562500037, "scale": 9234299.7830875 },
{ "level": 7, "resolution": 0.0109863281250019, "scale": 4617149.89154375 },
{ "level": 8, "resolution": 0.00549316406250093, "scale": 2308574.94577187 },
{ "level": 9, "resolution": 0.00274658203125046, "scale": 1154287.47288594 },
{ "level": 10, "resolution": 0.00137329101562523, "scale": 577143.736442969 },
{ "level": 11, "resolution": 0.000686645507812616, "scale": 288571.868221484 },
{ "level": 12, "resolution": 0.000343322753906308, "scale": 144285.934110742 },
{ "level": 13, "resolution": 0.000171661376953154, "scale": 72142.9670553711 },
{ "level": 14, "resolution": 8.5830688476577E-05, "scale": 36071.4835276855 },
{ "level": 15, "resolution": 4.29153442382885E-05, "scale": 18035.7417638428 },
{ "level": 16, "resolution": 2.14576721191443E-05, "scale": 9017.87088192139 },
{ "level": 17, "resolution": 1.07288360595721E-05, "scale": 4508.93544096069 },
{ "level": 18, "resolution": 5.36441802978606E-06, "scale": 2254.46772048035 },
{ "level": 19, "resolution": 2.68220901489303E-06, "scale": 1127.23386024017 },
{ "level": 20, "resolution": 1.34110450744652E-06, "scale": 563.616930120087 }
]
});
var tileExtent = new Extent(114.229839088925, 33.9389305555556, 123.400530149205, 38.90481944444446, new SpatialReference({
'wkid': 4326
}));
var MyCustomTileLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
},
getTileUrl: function (level, row, col) {
return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", row);
},
fetchTile: function (level, row, col, options) {
var url = this.getTileUrl(level, row, col);
return esriRequest(url, {
responseType: "image",
allowImageDataAccess: true
})
.then(function (response) {
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
if (this.tint) {
context.fillStyle = this.tint.toCss();
context.fillRect(0, 0, width, height);
context.globalCompositeOperation = "difference";
}
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this));
}
});
var mylayer = new MyCustomTileLayer({
urlTemplate: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=你的tk&TileMatrix={level}&TileCol={col}&TileRow={row}",
tileInfo: tileInfo
});
var map = new Map({
spatialReference: new SpatialReference({ 'wkid': 4326 }),
basemap: {
baseLayers: [mylayer]
}
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: tileExtent,
spatialReference: new SpatialReference({ 'wkid': 4326 }),
scale: 72142,
center: [118.5, 35.5]
});
on(dom.byId("print"), "click", exportMap);
var printUrl = "https://linux111.esrichina.com/server/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
var printTask = new PrintTask({
url: printUrl
});
var template = new PrintTemplate({
format: "pdf",
exportOptions: {
dpi: 96
},
layout: "a4-landscape",
layoutOptions: {
titleText: "Warren Wilson College Trees",
authorText: "Sam"
}
});
var params = new PrintParameters({
view: view,
template: template
});
function exportMap() {
printTask.execute(params).then(printResult, printError);
}
function printResult(value) {
window.open(value.url);
};
function printError(value) {
alert(value.message)
};
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="print">print</div>
</div>
</body>
</html>