toolMapShotAndDownLoad_bak.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. /**
  2. * @fileoverview 工具 测量地图面积 模块
  3. * @author Song.Huang
  4. * @version 1.0.0
  5. */
  6. define(['vendorDir/map23dlib/leaflet.mapshot',
  7. 'css!vendorDir/map23dlib/leaflet.mapshot'],
  8. function(){
  9. /**
  10. * 状态值
  11. * @type {Boolean}
  12. * @default false
  13. * @private
  14. */
  15. var status ={
  16. initialized:false//是否初始化
  17. }
  18. /**
  19. * 模块数据 用于数据存储和外部调用
  20. * @type {Object}
  21. * 数据存放
  22. */
  23. var modValue ={
  24. loopAjaxTimeOut:{},
  25. time_stamp:'',
  26. postData:null,
  27. mapShotControl:null,
  28. BLC: [200000000, 100000000, 50000000, 25000000, 12000000, 6000000, 1600000, 1550000, 800000, 400000, 200000, 100000, 50000, 25000, 12000, 2300, 3000, 1500, 800]
  29. }
  30. var status = {
  31. countingLock:false
  32. }
  33. /**
  34. * 初始化
  35. * 监听事件
  36. * @type {Function}
  37. */
  38. function init(){
  39. if(!status.initialized){
  40. status.initialized = true;
  41. setLayout();
  42. bindEvent();
  43. subscribe();
  44. modValue.mapShotControl = L.control.mapShot().addTo(map2DViewer.map);
  45. //map2DViewer.map.on('mapShot:postData',modValue.mapShotPostData,this);
  46. }
  47. ONEMAP.C.publisher.publish({
  48. modName:'toolMapShot'
  49. },'tools:active');
  50. }
  51. function setLayout(){
  52. $('body').append($('<div id="mapShotDownload"><p></p></div>'));
  53. $(window).resize(function() {
  54. layoutResize();
  55. });
  56. };
  57. function bindEvent(){
  58. };
  59. function layoutResize(){
  60. };
  61. function mapfishPostData(postData){
  62. var newPostData = encodeURIComponent(changeMapShotData(postData));
  63. // console.log(modValue.mapShotDrawData)
  64. //var appId = 'print_osm_new_york_EPSG_900913';
  65. var appId = 'print_osm_EPSG3857';
  66. var format = postData.ext;
  67. //console.log(changeMapShotData(postData));
  68. var startTime = new Date().getTime();
  69. console.log(newPostData);
  70. ONEMAP.C.publisher.publish({ type: 'success', message: '开始下载' }, 'noteBar::add');
  71. //return false;
  72. $.ajax({
  73. type: 'POST',
  74. url: onemapUrlConfig.mapFishServerUrl+'/print/' + appId + '/report.' + format,
  75. data: newPostData,
  76. success: function(data) {
  77. downloadWhenReady(startTime, data);
  78. },
  79. error: function(data) {
  80. ONEMAP.C.publisher.publish({ type: 'error', message: '下载出错' }, 'noteBar::add');
  81. },
  82. dataType: 'json'
  83. });
  84. };
  85. function downloadWhenReady(startTime, data) {
  86. if ((new Date().getTime() - startTime) > 30000) {
  87. ONEMAP.C.publisher.publish({ type: 'success', message: '准备下载' }, 'noteBar::add');
  88. } else {
  89. updateWaitingMsg(startTime, data);
  90. setTimeout(function() {
  91. $.getJSON(onemapUrlConfig.mapFishServerUrl + data.statusURL, function(statusData) {
  92. if (!statusData.done) {
  93. downloadWhenReady(startTime, data);
  94. } else {
  95. window.location = onemapUrlConfig.mapFishServerUrl + statusData.downloadURL;
  96. //ONEMAP.C.publisher.publish({ type: 'success', message: 'Downloading: ' + data.ref }, 'noteBar::add');
  97. }
  98. }, function error(data) { ONEMAP.C.publisher.publish({ type: 'error', message: '下载出错' }, 'noteBar::add') });
  99. }, 1000);
  100. }
  101. }
  102. function changeMapShotData(postData) {
  103. //计算截图中心点
  104. var scale = modValue.BLC[postData.zoom - 1];
  105. var mapcenter = lonlatToMercator(postData.center);
  106. var geojsonFeatures = [];
  107. var geojsonStyles = {};
  108. // modValue.mapShotDrawData = {}
  109. // modValue.mapShotDrawData = map2DViewer.map._layers;
  110. //获取截图元素数据
  111. // $.each(modValue.mapShotDrawData,function(i,t){
  112. $.each(map2DViewer.map._layers,function(i,t){
  113. var guid = map23DControl.buildGuid('mapfish_style');
  114. // if(t.drawType == 'marker'){
  115. if(t.shape == 'Marker'){
  116. // var curmarkerCoor = stringToParse([t.drawInfo.center[1],t.drawInfo.center[0]]);
  117. var curmarkerCoor = stringToParse([t._latlng.lng,t._latlng.lat]);
  118. curmarkerCoor = lonlatToMercator(curmarkerCoor)
  119. var fItem = {
  120. "geometry": {
  121. "coordinates": curmarkerCoor,
  122. "type": "Point"
  123. },
  124. "properties": {
  125. "_gx_style": guid
  126. },
  127. "type": "Feature"
  128. };
  129. var iconUrl = onemapUrlConfig.siteUrl+'/scripts/vendor/leaflet/draw_new/images/marker-icon.png';
  130. // if(t.options.icon){
  131. // iconUrl = t.options.icon.options.iconUrl;
  132. // }
  133. geojsonStyles[guid] = {
  134. "fillColor": "#ff0000",
  135. "fillOpacity": 1,
  136. "pointRadius": 5,
  137. "externalGraphic":iconUrl,
  138. "graphicOpacity":1,
  139. "graphicFormat":"image/png"
  140. };
  141. geojsonFeatures.push(fItem);
  142. // }else if(t.drawType == 'polyline'){
  143. }else if(t.shape == 'polyline'){
  144. var polylinescoor = [];
  145. for (var i = 0; i < t.drawInfo.LatLngs.length; i++) {
  146. curpolylinescoor = stringToParse([t.drawInfo.LatLngs[i].lng,t.drawInfo.LatLngs[i].lat]);
  147. curpolylinescoor = lonlatToMercator(curpolylinescoor);
  148. polylinescoor.push(curpolylinescoor);
  149. }
  150. var guid = guid;
  151. var fItem = {
  152. "geometry": {
  153. "coordinates": polylinescoor,
  154. "type": "LineString"
  155. },
  156. "properties": {
  157. "_gx_style": guid
  158. },
  159. "type": "Feature"
  160. };
  161. geojsonStyles[guid] = {
  162. "strokeColor": t.drawInfo.shapeOptions.color,
  163. "strokeDashstyle": "solid",
  164. "strokeLinecap": "round",
  165. "strokeOpacity": t.drawInfo.shapeOptions.opacity,
  166. "strokeWidth": t.drawInfo.shapeOptions.weight
  167. };
  168. geojsonFeatures.push(fItem);
  169. // }else if(t.drawType == 'polygon'){
  170. }else if(t.shape == 'polygon'){
  171. var polygonscoor = [];
  172. polygonscoor[0] = [];
  173. for (var i = 0; i < t.drawInfo.LatLngs[0].length+1; i++) {
  174. if(i<t.drawInfo.LatLngs[0].length){
  175. var curpolygonscoor = stringToParse([t.drawInfo.LatLngs[0][i].lng,t.drawInfo.LatLngs[0][i].lat]);
  176. curpolygonscoor = lonlatToMercator(curpolygonscoor);
  177. polygonscoor[0].push(curpolygonscoor);
  178. }else{
  179. var curpolygonscoor = stringToParse([t.drawInfo.LatLngs[0][0].lng,t.drawInfo.LatLngs[0][0].lat]);
  180. curpolygonscoor = lonlatToMercator(curpolygonscoor);
  181. polygonscoor[0].push(curpolygonscoor);
  182. }
  183. }
  184. var fItem = {
  185. "geometry": {
  186. "coordinates": polygonscoor,
  187. "type": "Polygon"
  188. },
  189. "properties": {
  190. "_gx_style": guid
  191. },
  192. "type": "Feature"
  193. };
  194. geojsonStyles[guid] = {
  195. "fillColor": t.drawInfo.shapeOptions.fillColor,
  196. "fillOpacity": t.drawInfo.shapeOptions.fillOpacity,
  197. "strokeColor": t.drawInfo.shapeOptions.color,
  198. "strokeDashstyle": "solid",
  199. "strokeLinecap": "round",
  200. "strokeOpacity": t.drawInfo.shapeOptions.opacity,
  201. "strokeWidth": t.drawInfo.shapeOptions.weight
  202. };
  203. geojsonFeatures.push(fItem);
  204. }else if(t.drawType == 'circle'){
  205. //圆心
  206. var allCirclePoint = [];
  207. var center_lat = t.drawInfo.startLatLng[0];
  208. var center_lon = t.drawInfo.startLatLng[1];
  209. //半径
  210. var radius = t.drawInfo.radius; //米
  211. //转换定义 核心
  212. var epsg_4326 = "+proj=longlat +datum=WGS84 +no_defs "
  213. var esri_102016 = "+proj=aeqd +lat_0=90 +lon_0=0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m no_defs"
  214. var self_defined = "+proj=aeqd +lat_0=" + center_lat + "+lon_0=" + center_lon + "+x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m no_defs"
  215. //生成圆平面点;
  216. var pointArr = L.Util.getCirclePoint(0, 0, radius);
  217. //圆的轮廓点转换为经纬度,当做GeoJSON来使用。
  218. var circlePoints = [];
  219. for (var k = 0; k < pointArr.length; k++) {
  220. var item = pointArr[k];
  221. //核心 将平面坐标转经纬度坐标
  222. var xy = proj4(self_defined, epsg_4326, [item.x, item.y]);
  223. circlePoints.push([
  224. xy[0],
  225. xy[1]
  226. ])
  227. }
  228. var polygonscoor = [];
  229. polygonscoor[0] = [];
  230. for (var i = 0; i < circlePoints.length+1; i++) {
  231. if(i<circlePoints.length){
  232. var curpolygonscoor = stringToParse([circlePoints[i][0],circlePoints[i][1]]);
  233. curpolygonscoor = lonlatToMercator(curpolygonscoor);
  234. polygonscoor[0].push(curpolygonscoor);
  235. }else{
  236. var curpolygonscoor = stringToParse([circlePoints[0][0],circlePoints[0][1]]);
  237. curpolygonscoor = lonlatToMercator(curpolygonscoor);
  238. polygonscoor[0].push(curpolygonscoor);
  239. }
  240. }
  241. var fItem = {
  242. "geometry": {
  243. "coordinates": polygonscoor,
  244. "type": "Polygon"
  245. },
  246. "properties": {
  247. "_gx_style": guid
  248. },
  249. "type": "Feature"
  250. };
  251. geojsonStyles[guid] = {
  252. "fillColor": t.drawInfo.shapeOptions.fillColor,
  253. "fillOpacity": t.drawInfo.shapeOptions.fillOpacity,
  254. "strokeColor": t.drawInfo.shapeOptions.color,
  255. "strokeDashstyle": "solid",
  256. "strokeLinecap": "round",
  257. "strokeOpacity": t.drawInfo.shapeOptions.opacity,
  258. "strokeWidth": t.drawInfo.shapeOptions.weight
  259. };
  260. geojsonFeatures.push(fItem);
  261. // }else if(t.drawType == 'rectangle'){
  262. }else if(t.shape == 'rectangle'){
  263. var polygonscoor = [];
  264. polygonscoor[0] = [];
  265. var LatLngs = [];
  266. // LatLngs.push([t.drawInfo.bounds._southWest.lng,t.drawInfo.bounds._northEast.lat]);
  267. // LatLngs.push([t.drawInfo.bounds._southWest.lng,t.drawInfo.bounds._southWest.lat]);
  268. // LatLngs.push([t.drawInfo.bounds._northEast.lng,t.drawInfo.bounds._southWest.lat]);
  269. // LatLngs.push([t.drawInfo.bounds._northEast.lng,t.drawInfo.bounds._northEast.lat]);
  270. // LatLngs.push([t.drawInfo.bounds._southWest.lng,t.drawInfo.bounds._northEast.lat]);
  271. // for (var i = 0; i < LatLngs.length; i++) {
  272. // var curpolygonscoor = stringToParse([LatLngs[i][0],LatLngs[i][1]]);
  273. // curpolygonscoor = lonlatToMercator(curpolygonscoor);
  274. // polygonscoor[0].push(curpolygonscoor);
  275. // }
  276. var fItem = {
  277. "geometry": {
  278. // "coordinates": polygonscoor,
  279. "coordinates": t._latlngs,
  280. "type": "Polygon"
  281. },
  282. "properties": {
  283. "_gx_style": guid
  284. },
  285. "type": "Feature"
  286. };
  287. geojsonStyles[guid] = {
  288. "fillColor": t.drawInfo.shapeOptions.fillColor,
  289. "fillOpacity": t.drawInfo.shapeOptions.fillOpacity,
  290. "strokeColor": t.drawInfo.shapeOptions.color,
  291. "strokeDashstyle": "solid",
  292. "strokeLinecap": "round",
  293. "strokeOpacity": t.drawInfo.shapeOptions.opacity,
  294. "strokeWidth": t.drawInfo.shapeOptions.weight
  295. };
  296. geojsonFeatures.push(fItem);
  297. }
  298. })
  299. geojsonStyles.styleProperty = "_gx_style";
  300. geojsonStyles.version = 1;
  301. var curpostData = {
  302. "attributes": {
  303. "description": postData.mapshotcopyright,
  304. "map": {
  305. "center": mapcenter,
  306. "dpi": 72,
  307. "layers": [{
  308. "geoJson": {
  309. "features": geojsonFeatures,
  310. "type": "FeatureCollection"
  311. },
  312. "style": geojsonStyles,
  313. "type": "geojson"
  314. }, {
  315. // "baseURL": map23DConfig.tileServerUrl + "/" + postData.guid + "?l={z}&x={x}&y={y}",
  316. "baseURL": map23DConfig.tileServerFo3DUrl + "/" + postData.guid + "?l={z}&x={x}&y={y}",
  317. "imageExtension": "png",
  318. "type": "OSM"
  319. }],
  320. "projection": "EPSG:3857",
  321. "rotation": 0,
  322. "scale": scale
  323. },
  324. "title": postData.mapshotName
  325. },
  326. "layout": "A4 landscape"
  327. }
  328. return postData = JSON.stringify(curpostData);
  329. };
  330. function updateWaitingMsg(startTime, data) {
  331. var elapsed = Math.floor((new Date().getTime() - startTime) / 100);
  332. var time = '';
  333. if (elapsed > 5) {
  334. time = (elapsed / 10) + " sec";
  335. }
  336. ONEMAP.C.publisher.publish({ type: 'success', message: '等候时间' + time }, 'noteBar::add');
  337. }
  338. //经纬度转魔卡托
  339. function lonlatToMercator(lonlat) {
  340. var mercator = [];
  341. var x = lonlat[0] * 20037508.34 / 180;
  342. var y = Math.log(Math.tan((90 + lonlat[1]) * Math.PI / 360)) / (Math.PI / 180);
  343. y = y * 20037508.34 / 180;
  344. mercator.push(x);
  345. mercator.push(y);
  346. return mercator;
  347. }
  348. function stringToParse(lnglat) {
  349. var x = JSON.parse(lnglat[0]);
  350. var y = JSON.parse(lnglat[1]);
  351. var parsecoor = [x, y];
  352. return parsecoor;
  353. }
  354. function mapShotPostData(postData){
  355. modValue.postData = postData;
  356. var LTpx = map2DViewer.map.project(
  357. new L.LatLng(JSON.parse(postData.bbox)[1],JSON.parse(postData.bbox)[0]),
  358. postData.zoom
  359. );
  360. var RBpx = map2DViewer.map.project(
  361. new L.LatLng(JSON.parse(postData.bbox)[3],JSON.parse(postData.bbox)[2]),
  362. postData.zoom
  363. );
  364. var countDownTF = parseInt(((RBpx.x-LTpx.x)*(RBpx.y-LTpx.y))/(5120*5120));
  365. if(countDownTF > onemapUrlConfig.mapShotMaxPicCount){
  366. var xiangsu = parseInt(5120*Math.sqrt(onemapUrlConfig.mapShotMaxPicCount));
  367. /*$('#mapShotDownload p').html('当前范围产生'+countDownTF+'个图幅数,'+
  368. '<br/>已经超过单次下载'+onemapUrlConfig.mapShotMaxPicCount+'个最大图幅数(5120×5120像素/图幅),请分开截图!<br/>'+
  369. '<span id="continueMapShot" onclick="ONEMAP.M.toolMapShot.continueMapShot()">修改区域</span>')*/
  370. $('#mapShotDownload p').html('地图拼接下载像素超过了'+xiangsu+'×'+xiangsu+'像素,请缩小截图下载区域<br/>'+
  371. '<span id="continueMapShot" onclick="ONEMAP.M.toolMapShot.continueMapShot()">修改区域</span>')
  372. $('#mapShotDownload').show();
  373. return false;
  374. }
  375. // if((RBpx.x-LTpx.x)>onemapUrlConfig.mapShotMaxPicWidth){
  376. // alert('截图宽度不能大于 '+onemapUrlConfig.mapShotMaxPicWidth+' 像素!');
  377. // return false;
  378. // }
  379. // if((RBpx.y-LTpx.y)>onemapUrlConfig.maxPicHeight){
  380. // alert('截图高度不能大于 '+onemapUrlConfig.maxPicHeight+' 像素!');
  381. // return false;
  382. // }
  383. $('#mapShotDownload').show();
  384. var nDate = new Date();
  385. modValue.time_stamp = nDate.getTime();
  386. var url = onemapUrlConfig.mapShotDownServerUrl+'/puzzles/?bbox='+postData.bbox+'&zoom='+postData.zoom+'&type='+postData.guid+'&ext='+postData.ext+'&time_stamp='+modValue.time_stamp+'&name='+encodeURI(postData.name);
  387. $.ajax({
  388. type:"get",
  389. url:url,
  390. dataType:'jsonp',
  391. jsonp:'callback',
  392. success:function(data){
  393. //modValue._loopGetResult({ajaxKey:'1'});
  394. }
  395. });
  396. setTimeout(function(){
  397. loopGetResult({ajaxKey:modValue.time_stamp});
  398. }, 1000);
  399. };
  400. function againMapShotPostData(){
  401. mapShotPostData(modValue.postData);
  402. }
  403. function loopGetResult(options){
  404. $.ajax({
  405. url:onemapUrlConfig.mapShotDownServerUrl+'/processing/'+modValue.time_stamp,
  406. type:"get",
  407. dataType:'jsonp',
  408. jsonp:'callback',
  409. success:function(data){
  410. if(data.processing == ''){
  411. $('#mapShotDownload p').html('服务器处理失败,请重试! <br/><span id="continueMapShot" onclick="ONEMAP.M.toolMapShot.againMapShot()">再次提交</span>');
  412. }
  413. if(data.processing.length<3){
  414. if(modValue.loopAjaxTimeOut.hasOwnProperty(options.ajaxKey)){
  415. clearTimeout(modValue.loopAjaxTimeOut[options.ajaxKey]);
  416. }
  417. $('#mapShotDownload p').html('服务器正在截图,截图进度 '+data.processing +' %. <br/><span id="continueMapShot" onclick="ONEMAP.M.toolMapShot.continueMapShot()">取消截图</span>');
  418. modValue.loopAjaxTimeOut[options.ajaxKey] = setTimeout(function(){
  419. loopGetResult(options);
  420. },1000);
  421. }else if(data.processing == '100'){
  422. if(modValue.loopAjaxTimeOut.hasOwnProperty(options.ajaxKey)){
  423. clearTimeout(modValue.loopAjaxTimeOut[options.ajaxKey]);
  424. }
  425. $('#mapShotDownload p').html('服务器已完成截图,正在进行打包. <br/><span id="continueMapShot" onclick="ONEMAP.M.toolMapShot.continueMapShot()">取消截图</span>');
  426. modValue.loopAjaxTimeOut[options.ajaxKey] = setTimeout(function(){
  427. loopGetResult(options);
  428. },1000);
  429. }else {
  430. delete modValue.loopAjaxTimeOut[options.ajaxKey];
  431. //获取最终结果
  432. $('#mapShotDownload p').html('服务器截图完成,<a target="_blank" href="'+onemapUrlConfig.mapShotDownServerUrl+'/image_zip/'+data.processing+'">点击下载!</a><br/><span id="continueMapShot" onclick="ONEMAP.M.toolMapShot.continueMapShot()">继续截图</span><span style="cursor:pointer" onclick="ONEMAP.M.toolMapShot.exitMapShot();">退出截图</span>')
  433. //alert(data);
  434. }
  435. }
  436. });
  437. };
  438. function continueMapShot(){
  439. if(modValue.loopAjaxTimeOut.hasOwnProperty(modValue.time_stamp)){
  440. clearTimeout(modValue.loopAjaxTimeOut[modValue.time_stamp]);
  441. }
  442. $('#mapShotDownload').hide().html('<p>正在提交截图数据到服务器</p>');
  443. }
  444. function exitMapShot(){
  445. $('#mapshotScreen').click();
  446. modValue.mapShotControl.remove();
  447. $('#mapShotDownload').hide()
  448. }
  449. /**
  450. * 注册监听
  451. */
  452. function subscribe(){
  453. ONEMAP.C.publisher.subscribe(remove, 'tools:active');
  454. ONEMAP.C.publisher.subscribe(mapShotPostData,'mapShot:postData');
  455. ONEMAP.C.publisher.subscribe(mapfishPostData,'mapFish:postData');
  456. };
  457. /**
  458. * 功能移除
  459. */
  460. function remove(options){
  461. if(options.modName != 'toolMapShot'){
  462. $('.tools-mapshot').removeClass('cur')
  463. modValue.mapShotControl.remove();
  464. }else{
  465. if($('.tools-mapshot').hasClass('cur')){
  466. $('.tools-mapshot').removeClass('cur');
  467. modValue.mapShotControl.remove();
  468. }else{
  469. $('.tools-mapshot').addClass('cur');
  470. modValue.mapShotControl.init();
  471. }
  472. }
  473. };
  474. return ONEMAP.M.toolMapShot = {
  475. init:init,
  476. continueMapShot:continueMapShot,
  477. exitMapShot:exitMapShot
  478. }
  479. });