Skip to content

Commit 08bcefe

Browse files
author
潘卓然-中地数码台式机
committed
补充mapboxgl的地图整饰功能&threejs三维模型示例及其说明
1 parent 0de6c37 commit 08bcefe

65 files changed

Lines changed: 66151 additions & 953 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎config/config-mapboxgl.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,12 +178,20 @@ var config = {
178178
update: "最后更新时间：2018-06-13"
179179
},
180180
{
181-
name: "layersearch",
181+
name: "图层探查",
182182
file: "layersearch",
183183
diffcult: "3",
184184
detail: "",
185185
icon: "layersearch.png",
186186
update: "最后更新时间：2018-06-13"
187+
},
188+
{
189+
name: "地图整饰",
190+
file: "customprint",
191+
diffcult: "3",
192+
detail: "地图整饰打印输出",
193+
icon: "customprint.png",
194+
update: "最后更新时间：2018-12-27"
187195
}
188196
]
189197
},

‎demo/mapbox/example/dataview/threebox/model.htm‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
container: 'map',
3434
style: 'mapbox://styles/mapbox/light-v9',
3535
center: origin,
36-
zoom: 18,
36+
zoom: 20,
3737
pitch: 60,
3838
heading: 41,
3939
hash: true
@@ -46,20 +46,20 @@
4646
id: 'custom_layer',
4747
type: 'custom',
4848
onAdd: function (map, mbxContext) {
49-
5049
window.threebox = new Threebox(map, mbxContext);
5150
threebox.setupDefaultLights();
5251

5352
var loader = new THREE.GLTFLoader();
5453

55-
loader.load('../../data/model/threebox/34M_17.gltf', (function (gltf) {
54+
loader.load('../../data/model/cesium/GroundVehicle/GroundVehicle.glb', (
55+
function (gltf) {
5656

57-
// rotate object so it's sitting on its base
58-
gltf.scene.rotation.x = -Math.PI * 1.5
57+
// rotate object so it's sitting on its base
58+
gltf.scene.rotation.x = -Math.PI * 1.5
5959

60-
threebox.addAtCoordinate(gltf.scene, origin);
60+
threebox.addAtCoordinate(gltf.scene, origin);
6161

62-
}).bind(this));
62+
}).bind(this));
6363

6464
},
6565
render: function (gl, matrix) {

‎demo/mapbox/example/map/operation/customprint.htm‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Mapbox GL JS debug page</title>
5+
<meta charset="utf-8" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, user-scalable=no"
9+
/>
10+
<script
11+
include="filesaver,draw,domtoimage"
12+
src="../../libs/zondyclient/include-mapboxgl-local.js"
13+
></script>
14+
<style>
15+
body {
16+
margin: 0;
17+
padding: 0;
18+
}
19+
20+
html,
21+
body,
22+
#map {
23+
height: 99%;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<div class="ToolLib" onclick="rectAngle()">
30+
<input type="button" class="ButtonLib" id="export-png" value="拉框选择" />
31+
</div>
32+
<div id="map"></div>
33+
<script>
34+
var extent = {}; //地图范围
35+
var scale; //比例尺
36+
var extent_km = 111.319490793274; //在经线上，相差一纬度约111km
37+
var extent_km_lat; //在纬线上，相差一经度约111cosα（α该纬线纬度），1KM就是该纬线应约1/(111*cosα)=0.009cosα度，度数纬度关，这样就是1公里对应的纬线度数。
38+
39+
function rectAngle() {
40+
draw.changeMode("draw_rectangle");
41+
}
42+
43+
/**
44+
* 将获取的图片路径转成blob
45+
* @param dataURI
46+
* @returns {*}
47+
* @private
48+
*/
49+
function _dataURItoBlob(dataURI) {
50+
var byteString = atob(dataURI.split(",")[1]);
51+
var mimeString = dataURI
52+
.split(",")[0]
53+
.split(":")[1]
54+
.split(";")[0];
55+
var ab = new ArrayBuffer(byteString.length);
56+
var dw = new DataView(ab);
57+
for (var i = 0; i < byteString.length; i++) {
58+
dw.setUint8(i, byteString.charCodeAt(i));
59+
}
60+
return new Blob([ab], {
61+
type: mimeString
62+
});
63+
}
64+
65+
/**
66+
* 获取建议的比例尺，比例尺也可以自己设置
67+
*/
68+
function getRecommendScale() {
69+
var x_min = extent.xmin;
70+
var y_min = extent.ymin;
71+
var x_max = extent.xmax;
72+
var y_max = extent.ymax;
73+
var map_width = (x_max - x_min) * extent_km * 1000 * 1000; //宽度 从 度单位 换算成 毫米单位
74+
var map_height = (y_max - y_min) * extent_km * 1000 * 1000; //高度 从 度单位 换算成 毫米单位
75+
var paper_width = 297; //纸张宽度,默认为横版A4大小 毫米
76+
var paper_height = 210; //纸张高度,默认为横版A4大小 毫米
77+
var r_scale =
78+
map_width / paper_width > map_height / paper_height
79+
? Math.ceil(map_width / paper_width)
80+
: Math.ceil(map_height / paper_height);
81+
var log10 = r_scale.toString().length - 1;
82+
var pow10 = Math.pow(10, log10);
83+
scale = Math.ceil(r_scale / pow10) * pow10; //直接使用推荐的比例尺
84+
console.log(r_scale, log10, pow10, scale); //66400 4 10000 70000
85+
}
86+
87+
/**
88+
* 获取输出版面坐标范围，默认以横版A4大小输出
89+
* @returns {{}}
90+
*/
91+
function layoutSetting() {
92+
var x_min = extent.xmin;
93+
var y_min = extent.ymin;
94+
var x_max = extent.xmax;
95+
var y_max = extent.ymax;
96+
//地图实际宽度
97+
var map_width = (x_max - x_min) * extent_km * 1000 * 1000;
98+
//地图实际高度
99+
var map_height = (y_max - y_min) * extent_km * 1000 * 1000;
100+
//纸张宽度,默认为横版A4大小
101+
var paper_width = 297;
102+
//纸张高度,默认为横版A4大小
103+
var paper_height = 210;
104+
//根据比例尺调整后的地图宽度(mm)
105+
var scale_map_width = Math.round(map_width / scale);
106+
//根据比例尺调整后的地图高度(mm)
107+
var scale_map_height = Math.round(map_height / scale);
108+
109+
//纸张与地图的宽度差值
110+
var differ_width_val = (paper_width - scale_map_width) / 2;
111+
//纸张与地图的高度差值
112+
var differ_height_val = (paper_height - scale_map_height) / 2;
113+
114+
var differ_x_extent =
115+
(differ_width_val * scale) / 1000 / 1000 / this.extent_km; //毫米 换算成 度
116+
var differ_y_extent =
117+
(differ_height_val * scale) / 1000 / 1000 / this.extent_km; //毫米 换算成 度
118+
//版面的左上角x坐标
119+
var layout_l_x = x_min - differ_x_extent;
120+
//版面的左上角y坐标
121+
var layout_l_y = y_max + differ_y_extent;
122+
//版面的右下角x坐标
123+
var layout_r_x = x_max + differ_x_extent;
124+
//版面的右下角y坐标
125+
var layout_r_y = y_min - differ_y_extent;
126+
127+
//输出版面范围
128+
// var bounds = [[layout_l_y, layout_l_x], [layout_r_y, layout_r_x]];
129+
// var Rectangle = L.rectangle(bounds, {
130+
// color: '#ffcc33',
131+
// weight: 2,
132+
// fillColor: 'rgba(255, 255, 255, 0)'
133+
// });
134+
// Rectangle.name = "layoutSetting";
135+
// Rectangle.addTo(map);
136+
var layExtent = {};
137+
layExtent.xmin = layout_l_x;
138+
layExtent.ymin = layout_r_y;
139+
layExtent.xmax = layout_r_x;
140+
layExtent.ymax = layout_l_y;
141+
return layExtent;
142+
}
143+
144+
mapboxgl.accessToken =
145+
"pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA";
146+
var osm = {
147+
//来源类型为栅格瓦片
148+
type: "raster",
149+
tiles: [
150+
//来源请求地址
151+
"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
152+
],
153+
//栅格瓦片的分辨率
154+
tileSize: 256
155+
};
156+
157+
var map = new mapboxgl.Map({
158+
container: "map",
159+
zoom: 10,
160+
center: [114.514426, 30.562984],
161+
style: "mapbox://styles/mapbox/streets-v9",
162+
preserveDrawingBuffer: true //特别注意，打印的时候必须启动该配置项
163+
});
164+
165+
var modes = MapboxDraw.modes;
166+
modes.draw_rectangle = DrawRectangle.default;
167+
var draw = new MapboxDraw({
168+
modes: modes,
169+
displayControlsDefault: false,
170+
controls: {
171+
polygon: false,
172+
trash: false
173+
}
174+
});
175+
176+
map.addControl(draw);
177+
178+
map.on("draw.create", function(e) {
179+
draw.deleteAll();
180+
181+
var width_extent_map = 9;
182+
var height_extent_map = 10;
183+
var width_extent_layer = 7;
184+
var height_extent_layer = 8;
185+
186+
if (e.features.length <= 0 || e.features[0].geometry.coordinates <= 0) {
187+
draw.deleteAll();
188+
return;
189+
}
190+
191+
var point = e.features[0].geometry.coordinates[0][0];
192+
193+
var xmin = point[0],
194+
xmax = point[0],
195+
ymin = point[1],
196+
ymax = point[1];
197+
198+
e.features[0].geometry.coordinates[0].forEach(element => {
199+
if (element[0] <= xmin) xmin = element[0];
200+
if (element[0] >= xmax) xmax = element[0];
201+
if (element[1] <= ymin) ymin = element[1];
202+
if (element[1] >= ymax) ymax = element[1];
203+
});
204+
205+
extent.xmin = xmin;
206+
extent.ymin = ymin;
207+
extent.xmax = xmax;
208+
extent.ymax = ymax;
209+
210+
getRecommendScale();
211+
212+
var a1 = map.project(new mapboxgl.LngLat(xmin, ymax));
213+
var a4 = map.project(new mapboxgl.LngLat(xmax, ymin));
214+
215+
var mapBounds = map.getBounds();
216+
var lefttop = new mapboxgl.LngLat(mapBounds._sw.lng, mapBounds._ne.lat);
217+
var mapLeftTopPoint = map.project(lefttop);
218+
219+
var startPointX = mapLeftTopPoint.x - a1.x - 7; //得到一个负数
220+
var startPointY = mapLeftTopPoint.y - a1.y - 7; //得到一个负数
221+
222+
var mapParams = {};
223+
mapParams.width = parseInt(a4.x - mapLeftTopPoint.x + width_extent_map); //
224+
mapParams.height = parseInt(
225+
a4.y - mapLeftTopPoint.y + height_extent_map
226+
);
227+
mapParams.startPointX = startPointX; // ?
228+
mapParams.startPointY = startPointY; // ?
229+
230+
var layExtent = layoutSetting(); //获取根据比例尺调整后的版面范围
231+
232+
var b1 = map.project(
233+
new mapboxgl.LngLat(layExtent.xmin, layExtent.ymax)
234+
); //左上
235+
var b4 = map.project(
236+
new mapboxgl.LngLat(layExtent.xmax, layExtent.ymin)
237+
); //右下
238+
239+
var laystartPointX = mapLeftTopPoint.x - b1.x - 9;
240+
var laystartPointY = mapLeftTopPoint.y - b1.y - 9;
241+
242+
var layParams = {};
243+
layParams.width = parseInt(
244+
b4.x - mapLeftTopPoint.x + width_extent_layer
245+
); //输出地图版面宽
246+
layParams.height = parseInt(
247+
b4.y - mapLeftTopPoint.y + height_extent_layer
248+
); //输出地图版面高
249+
layParams.startPointX = laystartPointX; //输出地图版面的x像素坐标
250+
layParams.startPointY = laystartPointY; //输出地图版面的y像素坐标
251+
252+
//以下参数都是在有layParams的前提下,位置已设置为固定
253+
var mapFrameStyleParams = {};
254+
mapFrameStyleParams.strokeStyle = "black"; //图像的边框线颜色
255+
mapFrameStyleParams.lineWidth = 2;
256+
257+
var titleParams = {};
258+
titleParams.font = "30px 微软雅黑";
259+
titleParams.textAlign = "center";
260+
titleParams.textBaseline = "bottom";
261+
titleParams.text = "地图标题";
262+
263+
var leftTextParams = {};
264+
leftTextParams.font = "15px 微软雅黑";
265+
leftTextParams.textAlign = "left";
266+
leftTextParams.textBaseline = "top";
267+
leftTextParams.text = "左下角文字";
268+
269+
var rightTextParams = {};
270+
rightTextParams.font = "15px 微软雅黑";
271+
rightTextParams.textAlign = "right";
272+
rightTextParams.textBaseline = "top";
273+
rightTextParams.text = "右下角文字";
274+
275+
//width和height为必须参数，其他参数为可选参数(扩展参数)
276+
setTimeout(function() {
277+
domtoimage
278+
.toPng(map.getCanvas(), {
279+
width: mapParams.width, //输出地图内容的宽
280+
height: mapParams.height, //输出地图内容的高
281+
startPointX: mapParams.startPointX, //输出地图内容左上角x像素坐标
282+
startPointY: mapParams.startPointY, //输出地图内容左上角y像素坐标
283+
layParams: layParams, //输出版面参数
284+
mapFrameStyleParams: mapFrameStyleParams, //图框参数
285+
titleParams: titleParams, //标题参数
286+
leftTextParams: leftTextParams, //左下角文字参数
287+
rightTextParams: rightTextParams //右下角文字参数
288+
})
289+
.then(function(dataUrl) {
290+
var blob = _dataURItoBlob(dataUrl);
291+
saveAs(blob, "map.png");
292+
})
293+
.catch(function(err) {
294+
console.log(err);
295+
});
296+
}, 500);
297+
});
298+
</script>
299+
</body>
300+
</html>

‎demo/mapbox/gallery/dataview/threebox/model.png‎

32.3 KB
Loading

‎demo/mapbox/gallery/map/operation/customprint.png‎

183 KB
Loading

libs/zondyclient/cdn/dom-to-image.js renamed to libs/zondyclient/cdn/dom-to-image/dom-to-image.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -513,6 +513,7 @@
513513

514514
function makeImage(uri) {
515515
return new Promise(function (resolve, reject) {
516+
//console.log("makeImage", resolve, reject)
516517
var image = new Image();
517518
image.onload = function () {
518519
resolve(image);

‎libs/zondyclient/cdn/mapboxgl-plugins/mapbox-gl-draw-mode/rectangle/index.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)