@mapgis/leaflet-easyprint 17.4.0 → 17.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +104 -104
- package/package.json +39 -39
- package/src/index.js +14 -23
package/index.html
CHANGED
|
@@ -1,104 +1,104 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html>
|
|
4
|
-
<head>
|
|
5
|
-
<title>Leaflet easyPrint plugin Demo</title>
|
|
6
|
-
<meta charset="utf-8" />
|
|
7
|
-
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
9
|
-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
|
|
10
|
-
<link href='https://fonts.googleapis.com/css?family=Lato:900,300' rel='stylesheet' type='text/css'>
|
|
11
|
-
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
|
12
|
-
|
|
13
|
-
<style>
|
|
14
|
-
html {background: #222222; padding: 40px 200px;font-family: 'Lato', sans-serif;}
|
|
15
|
-
h2,p {color: white;}
|
|
16
|
-
.gitButton{
|
|
17
|
-
padding:15px 30px;
|
|
18
|
-
background-color: #47a230;
|
|
19
|
-
text-decoration: none;
|
|
20
|
-
font-weight: 900;
|
|
21
|
-
color: white;
|
|
22
|
-
text-transform:uppercase;
|
|
23
|
-
transition: background-color .5s;
|
|
24
|
-
border: none;
|
|
25
|
-
border-radius: 2px;
|
|
26
|
-
cursor: pointer;
|
|
27
|
-
}
|
|
28
|
-
.gitButton:hover {background-color: #1d7806}
|
|
29
|
-
.gitButton:visited {color: white;}
|
|
30
|
-
.manualButton {
|
|
31
|
-
padding:15px 30px;
|
|
32
|
-
background-color: #308ba2;
|
|
33
|
-
margin-left: 40px;
|
|
34
|
-
text-decoration: none;
|
|
35
|
-
font-weight: 900;
|
|
36
|
-
color: white;
|
|
37
|
-
text-transform:uppercase;
|
|
38
|
-
transition: background-color .5s;
|
|
39
|
-
border: none;
|
|
40
|
-
border-radius: 2px;
|
|
41
|
-
cursor: pointer;
|
|
42
|
-
}
|
|
43
|
-
</style>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
</head>
|
|
47
|
-
|
|
48
|
-
<body class="easyPrint">
|
|
49
|
-
<h2>Welcome to the Leaflet easyPrint demo</h2>
|
|
50
|
-
<p>All this text will be hidden when I print my map.</p>
|
|
51
|
-
<div id="map" style="height:400px; width:900px"></div>
|
|
52
|
-
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
|
|
53
|
-
|
|
54
|
-
<script src="dist/bundle.js"></script>
|
|
55
|
-
|
|
56
|
-
<script>
|
|
57
|
-
|
|
58
|
-
var map = L.map('map').setView([51.505, -0.09], 13);
|
|
59
|
-
|
|
60
|
-
var tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png', {
|
|
61
|
-
maxZoom: 18,
|
|
62
|
-
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
|
|
63
|
-
}).addTo(map);
|
|
64
|
-
|
|
65
|
-
L.marker([51.5, -0.09]).addTo(map)
|
|
66
|
-
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
|
67
|
-
|
|
68
|
-
L.circle([51.508, -0.11], 500, {
|
|
69
|
-
color: 'red',
|
|
70
|
-
fillColor: '#f03',
|
|
71
|
-
fillOpacity: 0.5
|
|
72
|
-
}).addTo(map).bindPopup("I am a circle.");
|
|
73
|
-
|
|
74
|
-
L.polygon([
|
|
75
|
-
[51.509, -0.08],
|
|
76
|
-
[51.503, -0.06],
|
|
77
|
-
[51.51, -0.047]
|
|
78
|
-
]).addTo(map).bindPopup("I am a polygon.");
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
var popup = L.popup();
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
var printer = L.easyPrint({
|
|
85
|
-
tileLayer: tiles,
|
|
86
|
-
sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
|
|
87
|
-
filename: 'myMap',
|
|
88
|
-
exportOnly: true,
|
|
89
|
-
hideControlContainer: true
|
|
90
|
-
}).addTo(map);
|
|
91
|
-
|
|
92
|
-
function manualPrint () {
|
|
93
|
-
printer.printMap('CurrentSize', 'MyManualPrint')
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
</script>
|
|
97
|
-
<p class="testing">So will this boring sentence.</p>
|
|
98
|
-
<br><br>
|
|
99
|
-
<a href="https://github.com/rowanwins/leaflet-easyPrint"><button class="gitButton"><i class="fa fa-github fa-lg"></i> Download me on github</button></a>
|
|
100
|
-
<button class="manualButton" onclick="manualPrint()">Manual print</button>
|
|
101
|
-
|
|
102
|
-
</body>
|
|
103
|
-
|
|
104
|
-
</html>
|
|
1
|
+
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>Leaflet easyPrint plugin Demo</title>
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
9
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
|
|
10
|
+
<link href='https://fonts.googleapis.com/css?family=Lato:900,300' rel='stylesheet' type='text/css'>
|
|
11
|
+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
html {background: #222222; padding: 40px 200px;font-family: 'Lato', sans-serif;}
|
|
15
|
+
h2,p {color: white;}
|
|
16
|
+
.gitButton{
|
|
17
|
+
padding:15px 30px;
|
|
18
|
+
background-color: #47a230;
|
|
19
|
+
text-decoration: none;
|
|
20
|
+
font-weight: 900;
|
|
21
|
+
color: white;
|
|
22
|
+
text-transform:uppercase;
|
|
23
|
+
transition: background-color .5s;
|
|
24
|
+
border: none;
|
|
25
|
+
border-radius: 2px;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
}
|
|
28
|
+
.gitButton:hover {background-color: #1d7806}
|
|
29
|
+
.gitButton:visited {color: white;}
|
|
30
|
+
.manualButton {
|
|
31
|
+
padding:15px 30px;
|
|
32
|
+
background-color: #308ba2;
|
|
33
|
+
margin-left: 40px;
|
|
34
|
+
text-decoration: none;
|
|
35
|
+
font-weight: 900;
|
|
36
|
+
color: white;
|
|
37
|
+
text-transform:uppercase;
|
|
38
|
+
transition: background-color .5s;
|
|
39
|
+
border: none;
|
|
40
|
+
border-radius: 2px;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
</head>
|
|
47
|
+
|
|
48
|
+
<body class="easyPrint">
|
|
49
|
+
<h2>Welcome to the Leaflet easyPrint demo</h2>
|
|
50
|
+
<p>All this text will be hidden when I print my map.</p>
|
|
51
|
+
<div id="map" style="height:400px; width:900px"></div>
|
|
52
|
+
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
|
|
53
|
+
|
|
54
|
+
<script src="dist/bundle.js"></script>
|
|
55
|
+
|
|
56
|
+
<script>
|
|
57
|
+
|
|
58
|
+
var map = L.map('map').setView([51.505, -0.09], 13);
|
|
59
|
+
|
|
60
|
+
var tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png', {
|
|
61
|
+
maxZoom: 18,
|
|
62
|
+
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
|
|
63
|
+
}).addTo(map);
|
|
64
|
+
|
|
65
|
+
L.marker([51.5, -0.09]).addTo(map)
|
|
66
|
+
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
|
67
|
+
|
|
68
|
+
L.circle([51.508, -0.11], 500, {
|
|
69
|
+
color: 'red',
|
|
70
|
+
fillColor: '#f03',
|
|
71
|
+
fillOpacity: 0.5
|
|
72
|
+
}).addTo(map).bindPopup("I am a circle.");
|
|
73
|
+
|
|
74
|
+
L.polygon([
|
|
75
|
+
[51.509, -0.08],
|
|
76
|
+
[51.503, -0.06],
|
|
77
|
+
[51.51, -0.047]
|
|
78
|
+
]).addTo(map).bindPopup("I am a polygon.");
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
var popup = L.popup();
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
var printer = L.easyPrint({
|
|
85
|
+
tileLayer: tiles,
|
|
86
|
+
sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
|
|
87
|
+
filename: 'myMap',
|
|
88
|
+
exportOnly: true,
|
|
89
|
+
hideControlContainer: true
|
|
90
|
+
}).addTo(map);
|
|
91
|
+
|
|
92
|
+
function manualPrint () {
|
|
93
|
+
printer.printMap('CurrentSize', 'MyManualPrint')
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
</script>
|
|
97
|
+
<p class="testing">So will this boring sentence.</p>
|
|
98
|
+
<br><br>
|
|
99
|
+
<a href="https://github.com/rowanwins/leaflet-easyPrint"><button class="gitButton"><i class="fa fa-github fa-lg"></i> Download me on github</button></a>
|
|
100
|
+
<button class="manualButton" onclick="manualPrint()">Manual print</button>
|
|
101
|
+
|
|
102
|
+
</body>
|
|
103
|
+
|
|
104
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@mapgis/leaflet-easyprint",
|
|
3
|
-
|
|
4
|
-
"description": "A leaflet plugin which adds an icon to print the map",
|
|
5
|
-
"main": "dist/bundle.js",
|
|
6
|
-
"repository": {
|
|
7
|
-
"type": "git",
|
|
8
|
-
"url": "git+https://github.com/rowanwins/leaflet-easyPrint.git"
|
|
9
|
-
},
|
|
10
|
-
"scripts": {
|
|
11
|
-
"build": "rollup -c",
|
|
12
|
-
"dev": "rollup -c -w"
|
|
13
|
-
},
|
|
14
|
-
"keywords": [
|
|
15
|
-
"leaflet"
|
|
16
|
-
],
|
|
17
|
-
"author": "Rowan Winsemius <rowanwins@yahoo.com.au>",
|
|
18
|
-
"license": "MIT",
|
|
19
|
-
"bugs": {
|
|
20
|
-
"url": "https://github.com/rowanwins/leaflet-easyPrint/issues"
|
|
21
|
-
},
|
|
22
|
-
"homepage": "https://github.com/rowanwins/leaflet-easyPrint#readme",
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"dom-to-image": "^2.5.2",
|
|
25
|
-
"file-saver": "^1.3.3"
|
|
26
|
-
},
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"babel-plugin-external-helpers": "^6.22.0",
|
|
29
|
-
"babel-preset-latest": "^6.24.1",
|
|
30
|
-
"eslint": "^4.0.0",
|
|
31
|
-
"eslint-config-mourner": "^2.0.1",
|
|
32
|
-
"rollup": "^0.41.6",
|
|
33
|
-
"rollup-plugin-babel": "^2.7.1",
|
|
34
|
-
"rollup-plugin-commonjs": "^8.0.2",
|
|
35
|
-
"rollup-plugin-node-resolve": "^3.0.0",
|
|
36
|
-
"rollup-plugin-uglify": "^1.0.2",
|
|
37
|
-
"rollup-watch": "^3.2.2"
|
|
38
|
-
}
|
|
39
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@mapgis/leaflet-easyprint",
|
|
3
|
+
"version":"17.8.0",
|
|
4
|
+
"description": "A leaflet plugin which adds an icon to print the map",
|
|
5
|
+
"main": "dist/bundle.js",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/rowanwins/leaflet-easyPrint.git"
|
|
9
|
+
},
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "rollup -c",
|
|
12
|
+
"dev": "rollup -c -w"
|
|
13
|
+
},
|
|
14
|
+
"keywords": [
|
|
15
|
+
"leaflet"
|
|
16
|
+
],
|
|
17
|
+
"author": "Rowan Winsemius <rowanwins@yahoo.com.au>",
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/rowanwins/leaflet-easyPrint/issues"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "https://github.com/rowanwins/leaflet-easyPrint#readme",
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"dom-to-image": "^2.5.2",
|
|
25
|
+
"file-saver": "^1.3.3"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"babel-plugin-external-helpers": "^6.22.0",
|
|
29
|
+
"babel-preset-latest": "^6.24.1",
|
|
30
|
+
"eslint": "^4.0.0",
|
|
31
|
+
"eslint-config-mourner": "^2.0.1",
|
|
32
|
+
"rollup": "^0.41.6",
|
|
33
|
+
"rollup-plugin-babel": "^2.7.1",
|
|
34
|
+
"rollup-plugin-commonjs": "^8.0.2",
|
|
35
|
+
"rollup-plugin-node-resolve": "^3.0.0",
|
|
36
|
+
"rollup-plugin-uglify": "^1.0.2",
|
|
37
|
+
"rollup-watch": "^3.2.2"
|
|
38
|
+
}
|
|
39
|
+
}
|
package/src/index.js
CHANGED
|
@@ -199,38 +199,28 @@ function EasyPrint(L) {
|
|
|
199
199
|
}, plugin.options.tileWait);
|
|
200
200
|
},
|
|
201
201
|
|
|
202
|
-
_getValidDom: function(dom){
|
|
203
|
-
// var cloneDom = dom.cloneNode(true)
|
|
204
|
-
var cloneDom = dom
|
|
205
|
-
var leafletTileDoms = cloneDom.getElementsByClassName("leaflet-tile")
|
|
206
|
-
for(var i = 0; i < leafletTileDoms.length; i++){
|
|
207
|
-
var el = leafletTileDoms[i]
|
|
208
|
-
if ( !el.classList.contains('leaflet-tile-loaded') && el.parentElement.classList.contains('leaflet-tile-container')) {
|
|
209
|
-
el.remove()
|
|
210
|
-
i --
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
dom.parentNode.appendChild(cloneDom)
|
|
214
|
-
return cloneDom
|
|
215
|
-
},
|
|
216
|
-
|
|
217
202
|
_printOpertion: function (sizemode) {
|
|
218
203
|
var plugin = this;
|
|
219
|
-
var widthForExport = this.mapContainer.style.width
|
|
220
|
-
|
|
221
|
-
// var heightForExport = this.options.height
|
|
204
|
+
var widthForExport = this.options.width ? this.options.width : this.mapContainer.style.width.replace('px');
|
|
205
|
+
var heightForExport = this.options.height ? this.options.height : this.mapContainer.style.height.replace('px');
|
|
222
206
|
var isDownload = this.options.isDownload
|
|
223
207
|
if (this.originalState.widthWasAuto && sizemode === 'CurrentSize' || this.originalState.widthWasPercentage && sizemode === 'CurrentSize') {
|
|
224
208
|
widthForExport = this.originalState.mapWidth
|
|
225
209
|
}
|
|
210
|
+
var domFiletr = function (node) {
|
|
211
|
+
// 剔除瓦片图片资源img没有加载完毕的dom元素、image标签src为空的dom、mapboxg商标样式的a标签（mapboxgl-ctrl-logo)(没有加载完毕的img标签会导致domToSVG报错)
|
|
212
|
+
var exclude = (node.classList && !node.classList.contains('leaflet-tile-loaded') && node.parentElement.classList.contains('leaflet-tile-container')) ||
|
|
213
|
+
(node.tagName && node.tagName.toLowerCase() === 'image' && node.src === '') ||
|
|
214
|
+
(node.tagName && node.tagName.toLowerCase() === 'a' && node.classList && node.classList.contains('mapboxgl-ctrl-logo'))
|
|
215
|
+
return !exclude;
|
|
216
|
+
}
|
|
226
217
|
|
|
227
218
|
return new Promise((resolve)=>{
|
|
228
|
-
domtoimage[this.formatFun](
|
|
219
|
+
domtoimage[this.formatFun](plugin.mapContainer, {
|
|
229
220
|
// domtoimage.toPng(plugin.mapContainer, {
|
|
230
|
-
// width: parseInt(widthForExport),
|
|
231
|
-
// height: parseInt(heightForExport)
|
|
232
221
|
width: parseInt(widthForExport),
|
|
233
|
-
height: parseInt(
|
|
222
|
+
height: parseInt(heightForExport),
|
|
223
|
+
filter: domFiletr
|
|
234
224
|
})
|
|
235
225
|
.then(function (dataUrl) {
|
|
236
226
|
var blob = plugin._dataURItoBlob(dataUrl);
|
|
@@ -264,7 +254,8 @@ function EasyPrint(L) {
|
|
|
264
254
|
})
|
|
265
255
|
.catch(function (error) {
|
|
266
256
|
console.error('Print operation failed', error);
|
|
267
|
-
})
|
|
257
|
+
})
|
|
258
|
+
.finally(()=>{});
|
|
268
259
|
})
|
|
269
260
|
},
|
|
270
261
|
|