Skip to content

Commit a0545b8

Browse files
gyj12gyj12
committed
Leaflet部分：增加自定义范围打印输出.绘制矩形，输出矩形范围内地图，支持增加图框、标题、左右下角说明文字
1 parent 9ae5c82 commit a0545b8

11 files changed

Lines changed: 1353 additions & 224 deletions

File tree

‎config/config-leaflet.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,16 @@ var config = {
187187
icon: "boundarycanvas.png",
188188
update: "最后更新时间：2018-11-2",
189189
person: "基础平台/产品中心-龚跃健"
190-
}
190+
},
191+
{
192+
name: "自定义范围打印输出",
193+
file: "customprint",
194+
diffcult: "1",
195+
detail: "绘制矩形，输出矩形范围内地图，支持增加图框、标题、左右下角说明文字",
196+
icon: "customprint.png",
197+
update: "最后更新时间：2018-12-18",
198+
person: "基础平台/产品中心-龚跃健"
199+
}
191200
]
192201
},
193202
{

‎demo/leaflet/example/map/mapoperation/customprint.htm‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>导出成图片</title>
6+
<script include="filesaver,draw,domtoimage"
7+
src="../../libs/zondyclient/include-leaflet-local.js"></script>
8+
<style>
9+
body {
10+
height: 700px;
11+
}
12+
</style>
13+
<script type="text/javascript">
14+
//定义地图
15+
var map;
16+
var extent = {};//地图范围
17+
var scale;//比例尺
18+
var extent_km = 111.319490793274;
19+
/**初始化地图显示
20+
*/
21+
function init() {
22+
//地图容器
23+
map = L.map('leaf_map', {
24+
//参考坐标系
25+
crs: L.CRS.EPSG3857,
26+
//显示中心
27+
center: [40, 116.3],
28+
//最小显示等级
29+
minZoom: 0,
30+
//最大显示等级
31+
maxZoom: 16,
32+
//当前显示等级
33+
zoom: 12
34+
});
35+
//加载瓦片图层数据（OSM）
36+
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
37+
//只显示一个图层,不平铺显示
38+
noWrap: true
39+
}).addTo(map);
40+
41+
//添加绘制图层
42+
var drawnItems = new L.FeatureGroup();
43+
map.addLayer(drawnItems);
44+
//添加绘制控件
45+
var drawControl = new L.Control.Draw({
46+
draw: {
47+
//绘制线
48+
polyline: false,
49+
//绘制多边形
50+
polygon: false,
51+
//绘制矩形
52+
rectangle: true,
53+
//绘制圆
54+
circle: false,
55+
//绘制标注
56+
marker: false,
57+
//绘制圆形标注
58+
circlemarker: false
59+
}
60+
});
61+
//添加绘制控件
62+
map.addControl(drawControl);
63+
//绘制事件
64+
map.on(L.Draw.Event.CREATED, function (e) {
65+
66+
var bounds = e.layer._bounds;
67+
//地图边框，已放入绘制接口(dom-to-image)中绘制
68+
// var Rectangle = L.rectangle(bounds, {
69+
// color: '#000',
70+
// weight: 1,
71+
// fillColor: 'rgba(255, 255, 255, 0)'
72+
// }).addTo(map);
73+
// Rectangle.name = "MapFrame";
74+
extent.xmin = bounds._southWest.lng;
75+
extent.ymin = bounds._southWest.lat;
76+
extent.xmax = bounds._northEast.lng;
77+
extent.ymax = bounds._northEast.lat;
78+
79+
getRecommendScale();
80+
81+
var a1 = map.options.crs.latLngToPoint(L.latLng(bounds._northEast.lat, bounds._southWest.lng), map.getZoom());//左上
82+
var a4 = map.options.crs.latLngToPoint(L.latLng(bounds._southWest.lat, bounds._northEast.lng), map.getZoom());//右下
83+
var mapBounds = map.getBounds();
84+
var mapLeftTopPoint = map.options.crs.latLngToPoint(L.latLng(mapBounds._northEast.lat, mapBounds._southWest.lng), map.getZoom());
85+
var startPointX = mapLeftTopPoint.x - a1.x - 7;
86+
var startPointY = mapLeftTopPoint.y - a1.y - 7;
87+
var mapParams = {};
88+
mapParams.width = parseInt(a4.x - mapLeftTopPoint.x + 9);
89+
mapParams.height = parseInt(a4.y - mapLeftTopPoint.y + 10);
90+
mapParams.startPointX = startPointX;
91+
mapParams.startPointY = startPointY;
92+
93+
var layExtent = layoutSetting();
94+
var laya1 = map.options.crs.latLngToPoint(L.latLng(layExtent.ymax, layExtent.xmin), map.getZoom());//左上
95+
var laya4 = map.options.crs.latLngToPoint(L.latLng(layExtent.ymin, layExtent.xmax), map.getZoom());//右下
96+
var laystartPointX = mapLeftTopPoint.x - laya1.x - 9;
97+
var laystartPointY = mapLeftTopPoint.y - laya1.y - 9;
98+
99+
var layParams = {};
100+
layParams.width = parseInt(laya4.x - mapLeftTopPoint.x + 7);//输出地图版面宽
101+
layParams.height = parseInt(laya4.y - mapLeftTopPoint.y + 8);//输出地图版面高
102+
layParams.startPointX = laystartPointX;//输出地图版面的x像素坐标
103+
layParams.startPointY = laystartPointY;//输出地图版面的y像素坐标
104+
105+
//以下参数都是在有layParams的前提下,位置已设置为固定
106+
var mapFrameStyleParams = {};
107+
mapFrameStyleParams.strokeStyle = "black"; //图像的边框线颜色
108+
mapFrameStyleParams.lineWidth = 2;
109+
110+
var titleParams = {};
111+
titleParams.font = '30px 微软雅黑';
112+
titleParams.textAlign = 'center';
113+
titleParams.textBaseline = 'bottom';
114+
titleParams.text = '地图标题';
115+
116+
var leftTextParams = {};
117+
leftTextParams.font = '15px 微软雅黑';
118+
leftTextParams.textAlign = 'left';
119+
leftTextParams.textBaseline = 'top';
120+
leftTextParams.text = '左下角文字';
121+
122+
var rightTextParams = {};
123+
rightTextParams.font = '15px 微软雅黑';
124+
rightTextParams.textAlign = 'right';
125+
rightTextParams.textBaseline = 'top';
126+
rightTextParams.text = '右下角文字';
127+
128+
//width和height为必须参数，其他参数为可选参数(扩展参数)
129+
domtoimage.toPng(map.getContainer(), {
130+
width: mapParams.width,//输出地图内容的宽
131+
height: mapParams.height,//输出地图内容的高
132+
startPointX: mapParams.startPointX,//输出地图内容左上角x像素坐标
133+
startPointY: mapParams.startPointY,//输出地图内容左上角y像素坐标
134+
layParams: layParams,//输出版面参数
135+
mapFrameStyleParams: mapFrameStyleParams,//图框参数
136+
titleParams: titleParams,//标题参数
137+
leftTextParams: leftTextParams,//左下角文字参数
138+
rightTextParams: rightTextParams//右下角文字参数
139+
}).then(function (dataUrl) {
140+
var blob = _dataURItoBlob(dataUrl);
141+
saveAs(blob, 'map.png');
142+
});
143+
});
144+
}
145+
146+
/**
147+
* 将获取的图片路径转成blob
148+
* @param dataURI
149+
* @returns {*}
150+
* @private
151+
*/
152+
function _dataURItoBlob(dataURI) {
153+
var byteString = atob(dataURI.split(',')[1]);
154+
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
155+
var ab = new ArrayBuffer(byteString.length);
156+
var dw = new DataView(ab);
157+
for (var i = 0; i < byteString.length; i++) {
158+
dw.setUint8(i, byteString.charCodeAt(i));
159+
}
160+
return new Blob([ab], {type: mimeString});
161+
}
162+
163+
/**
164+
* 获取建议的比例尺，比例尺也可以自己设置
165+
*/
166+
function getRecommendScale() {
167+
var x_min = extent.xmin;
168+
var y_min = extent.ymin;
169+
var x_max = extent.xmax;
170+
var y_max = extent.ymax;
171+
var map_width = (x_max - x_min) * extent_km * 1000 * 1000;
172+
var map_height = (y_max - y_min) * extent_km * 1000 * 1000;
173+
//纸张宽度,默认为横版A4大小
174+
var paper_width = 297;
175+
//纸张高度,默认为横版A4大小
176+
var paper_height = 210;
177+
var r_scale = (map_width / paper_width) > (map_height / paper_height) ? Math.ceil(map_width / paper_width) : Math.ceil(map_height / paper_height);
178+
var log10 = r_scale.toString().length - 1;
179+
var pow10 = Math.pow(10, log10);
180+
scale = Math.ceil(r_scale / pow10) * pow10;//直接使用推荐的比例尺
181+
}
182+
183+
/**
184+
* 获取输出版面坐标范围，默认以横版A4大小输出
185+
* @returns {{}}
186+
*/
187+
function layoutSetting() {
188+
var x_min = extent.xmin;
189+
var y_min = extent.ymin;
190+
var x_max = extent.xmax;
191+
var y_max = extent.ymax;
192+
//地图实际宽度
193+
var map_width = (x_max - x_min) * extent_km * 1000 * 1000;
194+
//地图实际高度
195+
var map_height = (y_max - y_min) * extent_km * 1000 * 1000;
196+
//纸张宽度,默认为横版A4大小
197+
var paper_width = 297;
198+
//纸张高度,默认为横版A4大小
199+
var paper_height = 210;
200+
//根据比例尺调整后的地图宽度(mm)
201+
var scale_map_width = Math.round(map_width / scale);
202+
//根据比例尺调整后的地图高度(mm)
203+
var scale_map_height = Math.round(map_height / scale);
204+
//纸张与地图的宽度差值
205+
var differ_width_val = (paper_width - scale_map_width) / 2;
206+
//纸张与地图的高度差值
207+
var differ_height_val = (paper_height - scale_map_height) / 2;
208+
var differ_x_extent = differ_width_val * scale / 1000 / 1000 / this.extent_km;
209+
var differ_y_extent = differ_height_val * scale / 1000 / 1000 / this.extent_km;
210+
//版面的左上角x坐标
211+
var layout_l_x = x_min - differ_x_extent;
212+
//版面的左上角y坐标
213+
var layout_l_y = y_max + differ_y_extent;
214+
//版面的右下角x坐标
215+
var layout_r_x = x_max + differ_x_extent;
216+
//版面的右下角y坐标
217+
var layout_r_y = y_min - differ_y_extent;
218+
219+
//输出版面范围
220+
// var bounds = [[layout_l_y, layout_l_x], [layout_r_y, layout_r_x]];
221+
// var Rectangle = L.rectangle(bounds, {
222+
// color: '#ffcc33',
223+
// weight: 2,
224+
// fillColor: 'rgba(255, 255, 255, 0)'
225+
// });
226+
// Rectangle.name = "layoutSetting";
227+
// Rectangle.addTo(map);
228+
var layExtent = {};
229+
layExtent.xmin = layout_l_x;
230+
layExtent.ymin = layout_r_y;
231+
layExtent.xmax = layout_r_x;
232+
layExtent.ymax = layout_l_y;
233+
return layExtent;
234+
}
235+
</script>
236+
</head>
237+
<body onload="init()">
238+
<div id="leaf_map" style="width: 100%; height: 95%;position: absolute">
239+
</div>
240+
</body>
241+
</html>

‎demo/leaflet/example/office/plugins/draw.htm‎

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,65 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3+
34
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
56
<title>Draw</title>
67
<script include="Draw" src="../../libs/zondyclient/include-leaflet-local.js"></script>
78
<style>
8-
#map{height:600px}
9+
#map {
10+
height: 600px
11+
}
912
</style>
1013
</head>
14+
1115
<body>
12-
<div id="map"></div>
13-
<script>
14-
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
15-
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
16-
osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' +
17-
'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw', {
18-
attribution: '<a href="#">Mapbox</a>',
19-
maxZoom: 18,
20-
id: 'mapbox.streets',
21-
}),
22-
map = new L.Map('map', { center: new L.LatLng(30.58791323870018, 114.3474077911377), zoom: 10 }),
23-
drawnItems = L.featureGroup().addTo(map);
24-
L.control.layers({
25-
'osm': osm.addTo(map),
26-
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
27-
attribution: 'google'
28-
})
29-
}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
30-
map.addControl(new L.Control.Draw({
31-
edit: {
32-
featureGroup: drawnItems,
33-
poly: {
34-
allowIntersection: false
16+
<div id="map"></div>
17+
<script>
18+
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
19+
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
20+
osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' +
21+
'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw', {
22+
attribution: '<a href="#">Mapbox</a>',
23+
maxZoom: 18,
24+
id: 'mapbox.streets',
25+
}),
26+
map = new L.Map('map', {
27+
center: new L.LatLng(30.58791323870018, 114.3474077911377),
28+
zoom: 10
29+
}),
30+
drawnItems = L.featureGroup().addTo(map);
31+
L.control.layers({
32+
'osm': osm.addTo(map),
33+
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
34+
attribution: 'google'
35+
})
36+
}, {
37+
'drawlayer': drawnItems
38+
}, {
39+
position: 'topleft',
40+
collapsed: false
41+
}).addTo(map);
42+
map.addControl(new L.Control.Draw({
43+
edit: {
44+
featureGroup: drawnItems,
45+
poly: {
46+
allowIntersection: false
47+
}
48+
},
49+
draw: {
50+
polygon: {
51+
allowIntersection: false,
52+
showArea: true
53+
}
3554
}
36-
},
37-
draw: {
38-
polygon: {
39-
allowIntersection: false,
40-
showArea: true
41-
}
42-
}
43-
}));
55+
}));
4456

45-
map.on(L.Draw.Event.CREATED, function (event) {
46-
var layer = event.layer;
57+
map.on(L.Draw.Event.CREATED, function (event) {
58+
var layer = event.layer;
4759

48-
drawnItems.addLayer(layer);
49-
});
50-
</script>
60+
drawnItems.addLayer(layer);
61+
});
62+
</script>
5163
</body>
52-
</html>
64+
65+
</html>

‎demo/leaflet/gallery/map/mapoperation/customprint.png‎

319 KB
Loading

‎demo/leaflet/markdown/map/mapoperation/customprint.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
### 自定义范围打印输出
2+
> `说明:`只要map.getContainer()里有的图层都支持，包括标注、绘制的图层等。
3+
> 图框、标题、左下角文字、右下角文字必须在有输出版面参数的前提下，才能添加
4+
5+
```javascript
6+
//关键代码:
7+
//width和height为必须参数，其他参数为可选参数(扩展参数)
8+
domtoimage.toPng(map.getContainer(), {
9+
width: mapParams.width,//输出地图内容的宽
10+
height: mapParams.height,//输出地图内容的高
11+
startPointX: mapParams.startPointX,//输出地图内容左上角x像素坐标
12+
startPointY: mapParams.startPointY,//输出地图内容左上角y像素坐标
13+
layParams: layParams,//输出版面参数
14+
mapFrameStyleParams: mapFrameStyleParams,//图框参数
15+
titleParams: titleParams,//标题参数
16+
leftTextParams: leftTextParams,//左下角文字参数
17+
rightTextParams: rightTextParams//右下角文字参数
18+
}).then(function (dataUrl) {
19+
var blob = _dataURItoBlob(dataUrl);
20+
saveAs(blob, 'map.png');
21+
});
22+
```

‎libs/google/KFOmCnqEu92Fr1Mu4mxK.woff2‎

15 KB
Binary file not shown.

0 commit comments

Comments
 (0)