compareView.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
  1. /**
  2. * [ATLAS.M.atlasView]
  3. * @return {[object]}
  4. */
  5. define(['html!templates/atlas/compareView',
  6. 'css!styles/atlas/compareView'
  7. ],function(tplLayout){
  8. /**
  9. * 模块数据 用于数据存储和外部调用
  10. * @type {Object}
  11. */
  12. var modValue = {
  13. options:{
  14. viewType:'1', //对比模式 1卷帘对比 2视图并列对比 3上下叠置对比
  15. actionMap:'left' //鼠标操作的地图
  16. },
  17. thematicData:{}
  18. }
  19. var mapLeft,mapRight;
  20. var leftMarker,rightMarker;
  21. var leftMapTile,rightMapTile;
  22. /**
  23. * 模块界面样式 例如:宽,高
  24. * @type {Object}
  25. */
  26. var styles = {}
  27. /**
  28. * 模块状态,用于存储模块的状态 例如:收起,关闭
  29. * @type {Object}
  30. */
  31. var status = {}
  32. /**
  33. * 初始化并订阅事件
  34. * @return {[type]} [description]
  35. */
  36. function init(data){
  37. //获取参数
  38. _.merge(modValue.options,data);
  39. setLayout();
  40. getThematicData(modValue.options.leftGuid,modValue.options.rightGuid);
  41. bindEvent();
  42. subscribe();
  43. }
  44. /**
  45. * 设置界面
  46. */
  47. function setLayout(){
  48. $('#mapHolder').append(tplLayout);
  49. $('#mapHolder').addClass('viewType-'+modValue.options.viewType);
  50. $('#viewTools').show();
  51. layoutResize();
  52. $(window).resize(function() {
  53. layoutResize();
  54. });
  55. }
  56. /**
  57. * 界面事件绑定
  58. * @return {[type]} [description]
  59. */
  60. function bindEvent(){
  61. //界面元素事件
  62. $('#gapButton').bind('mousedown',function(e){
  63. e.preventDefault();
  64. document.onmousemove = function(e){
  65. e = e || window.event;
  66. if(e && e.preventDefault){
  67. e.preventDefault();
  68. }else {
  69. window.event.returnValue = false;
  70. }
  71. $('body').attr('unselectable','on')
  72. .attr('onselectstart','return false;')
  73. .css('-moz-user-select','none')
  74. .css('-webkit-user-select','none');
  75. updateGapButtonPosition(e);
  76. };
  77. document.onmouseup = function(e){
  78. document.onmousemove = null;
  79. document.onmouseup = null;
  80. $('body').removeAttr('unselectable')
  81. .removeAttr('onselectstart')
  82. .css('-moz-user-select','')
  83. .css('-webkit-user-select','');
  84. };
  85. });
  86. $('#viewTools .button').bind('click',function(e){
  87. if($(this).hasClass('select')){return};
  88. $('#viewTools .select').removeClass('select');
  89. $(this).addClass('select');
  90. modValue.options.viewType = $(this).attr('tid');
  91. $('#mapHolder').removeClass().addClass('viewType-'+modValue.options.viewType);
  92. switch (modValue.actionMap){
  93. case 'left':
  94. modValue.options.center = mapLeft.getCenter();
  95. modValue.options.zoom = mapLeft.getZoom();
  96. break;
  97. case 'right':
  98. modValue.options.center = mapRight.getCenter();
  99. modValue.options.zoom = mapRight.getZoom();
  100. break;
  101. }
  102. layoutResize();
  103. if($(this).attr('tid') === '3'){
  104. leftMarker.setOpacity(0);
  105. rightMarker.setOpacity(0);
  106. leftMapTile.setOpacity(0.5);
  107. rightMapTile.setOpacity(0.5);
  108. $('#opacityPanelThumb').css({left:'125px'});
  109. mapLeft.off('mousemove',updateIconPointPosition);
  110. mapRight.off('mousemove',updateIconPointPosition);
  111. }else if($(this).attr('tid') === '2') {
  112. leftMarker.setOpacity(1);
  113. rightMarker.setOpacity(1);
  114. leftMapTile.setOpacity(1);
  115. rightMapTile.setOpacity(1);
  116. mapLeft.on('mousemove',updateIconPointPosition);
  117. mapRight.on('mousemove',updateIconPointPosition);
  118. }else if($(this).attr('tid') === '1'){
  119. leftMarker.setOpacity(0);
  120. rightMarker.setOpacity(0);
  121. leftMapTile.setOpacity(1);
  122. rightMapTile.setOpacity(1);
  123. mapLeft.off('mousemove',updateIconPointPosition);
  124. mapRight.off('mousemove',updateIconPointPosition);
  125. }
  126. setTimeout(function(){
  127. mapLeft.invalidateSize().setView(mapLeft.getCenter(), mapLeft.getZoom());
  128. mapRight.invalidateSize().setView(mapRight.getCenter(), mapRight.getZoom());
  129. },100);
  130. });
  131. $('#opacityPanelThumb').bind('mousedown',function(e){
  132. e.preventDefault();
  133. document.onmousemove = function(e){
  134. e = e || window.event;
  135. if(e && e.preventDefault){
  136. e.preventDefault();
  137. }else {
  138. window.event.returnValue = false;
  139. }
  140. updateMapOpacity(e);
  141. };
  142. document.onmouseup = function(e){
  143. document.onmousemove = null;
  144. document.onmouseup = null;
  145. };
  146. });
  147. }
  148. /**
  149. * AJAX获取相应GUID的专题图数据
  150. * @type {Function}
  151. * @param guid {Number} guid
  152. * @private
  153. */
  154. function getThematicData(leftThematicGuid,rightThematicGuid){
  155. if(leftThematicGuid && rightThematicGuid){
  156. //ajax去取专题图数据 取完成后地图初始化
  157. ATLAS.V.loading.load();
  158. $.ajax({
  159. type:"get",
  160. dataType:'jsonp',
  161. url:onemapUrlConfig.thematicDataServerUrl+'/production/metadata?production_id='+leftThematicGuid,
  162. success:function(data){
  163. ATLAS.V.loading.loaded();
  164. modValue.thematicData.left = data.metadata;
  165. modValue.thematicData.left.desc_id_list = JSON.parse(modValue.thematicData.left.desc_id_list);
  166. modValue.thematicData.left.legend_id_list = JSON.parse(modValue.thematicData.left.legend_id_list);
  167. if(modValue.thematicData.hasOwnProperty('right')){
  168. initMap();
  169. }
  170. },
  171. error:function(data){
  172. ATLAS.V.loading.loaded();
  173. }
  174. });
  175. ATLAS.V.loading.load();
  176. $.ajax({
  177. type:"get",
  178. dataType:'jsonp',
  179. url:onemapUrlConfig.thematicDataServerUrl+'/production/metadata?production_id='+rightThematicGuid,
  180. success:function(data){
  181. ATLAS.V.loading.loaded();
  182. modValue.thematicData.right = data.metadata;
  183. modValue.thematicData.right.desc_id_list = JSON.parse(modValue.thematicData.right.desc_id_list);
  184. modValue.thematicData.right.legend_id_list = JSON.parse(modValue.thematicData.right.legend_id_list);
  185. if(modValue.thematicData.hasOwnProperty('left')){
  186. initMap();
  187. }
  188. },
  189. error:function(data){
  190. ATLAS.V.loading.loaded();
  191. }
  192. });
  193. }
  194. // console.log(onemapUrlConfig.thematicDataServerUrl);
  195. }
  196. /**更新鼠标光标位置
  197. * @type {Function}
  198. * @param e
  199. */
  200. function updateIconPointPosition(e){
  201. switch (modValue.options.actionMap){
  202. case 'left':
  203. leftMarker.setOpacity(0);
  204. rightMarker.setOpacity(1);
  205. rightMarker.setLatLng(e.latlng);
  206. break;
  207. case 'right':
  208. rightMarker.setOpacity(0);
  209. leftMarker.setOpacity(1);
  210. leftMarker.setLatLng(e.latlng);
  211. break;
  212. }
  213. }
  214. /**更新位置 由鼠标按下拖动事件驱动
  215. * @type {Function}
  216. * @param e
  217. */
  218. function updateGapButtonPosition(e){
  219. var viewWidth = $('#mapHolder').width();
  220. var mapWrap = document.getElementById('mapHolder');
  221. var mapWrapWidth = mapWrap.offsetWidth;
  222. var x = L.DomEvent.getMousePosition(e,mapWrap).x;
  223. if(x < 0){
  224. x = 0;
  225. }else if(x > mapWrapWidth){
  226. x = mapWrapWidth;
  227. }
  228. $('#gapButton').css({left:x});
  229. $('#leftMapWrap').css({width:x});
  230. $('#rightMapWrap').css({width:viewWidth-x});
  231. }
  232. /**更新地图透明度
  233. * @type {Function}
  234. * @param e
  235. */
  236. function updateMapOpacity(e){
  237. var opacityPanelWidth = 250;
  238. var opacityPanel = document.getElementById('opacityPanel');
  239. var x = L.DomEvent.getMousePosition(e,opacityPanel).x;
  240. if(x < 0){
  241. x = 0;
  242. }else if(x > opacityPanelWidth){
  243. x = opacityPanelWidth;
  244. }
  245. $('#opacityPanelThumb').css({left:x});
  246. leftMapTile.setOpacity(1-x/250);
  247. rightMapTile.setOpacity(x/250);
  248. }
  249. /**
  250. * 窗口大小重置
  251. * @type {Function}
  252. */
  253. function layoutResize(){
  254. var wrapWidth = $('#mapHolder').width();
  255. var wrapHeight = $('#mapHolder').height();
  256. $('#gapButton').css({height:wrapHeight});
  257. switch (modValue.options.viewType){
  258. case '1'://卷帘对比
  259. $('#leftMapWrap, #rightMapWrap').css({width:wrapWidth/2,height:wrapHeight});
  260. $('#leftMap, #rightMap').css({width:wrapWidth,height:wrapHeight});
  261. $('#gapButton').css({left:wrapWidth/2});
  262. break;
  263. case '2'://并列对比
  264. $('#leftMapWrap, #rightMapWrap').css({width:wrapWidth/2-15,height:wrapHeight-20});
  265. $('#leftMap, #rightMap').css({width:wrapWidth/2-19,height:wrapHeight-24});
  266. break;
  267. case '3'://上下叠置对比
  268. $('#leftMapWrap, #rightMapWrap').css({width:wrapWidth,height:wrapHeight});
  269. $('#leftMap, #rightMap').css({width:wrapWidth,height:wrapHeight});
  270. break;
  271. }
  272. if(mapLeft){
  273. setTimeout(function(){
  274. mapLeft.invalidateSize().setView(mapLeft.getCenter(), mapLeft.getZoom(),true);
  275. mapRight.invalidateSize().setView(mapRight.getCenter(), mapRight.getZoom(),true);
  276. },100);
  277. }
  278. }
  279. /**
  280. * 地图初始化
  281. * @type {Function}
  282. * @private
  283. */
  284. function initMap(){
  285. leftMapTile = L.tileLayer(onemapUrlConfig.thematicTileUrl+'/'+modValue.thematicData.left.production_id+'?l={z}&x={x}&y={y}',{noWrap:true,
  286. subdomains: map23DConfig.tileSubdomains||'',
  287. errorTileUrl:''});
  288. var right_url = onemapUrlConfig.thematicTileUrl+'/'+modValue.thematicData.right.production_id+'?l={z}&x={x}&y={y}';
  289. var search = window.location.search;
  290. var sub = search.substr(1).split("&");
  291. for(var i = 0; i < sub.length; i++){
  292. var s_left = sub[i].split("=")[0];
  293. if(s_left == "layerNum"){
  294. var s_right = sub[i].split("=")[1];
  295. if(s_right == 1){
  296. right_url = map23DConfig.tileServerUrl+'/'+sub[i+1].split("=")[1]+'?l={z}&x={x}&y={y}';
  297. }
  298. else if(s_right == 2){
  299. // console.log("yeah");
  300. right_url = onemapUrlConfig.thematicTileUrl+'/'+modValue.thematicData.right.production_id+'?l={z}&x={x}&y={y}';
  301. }
  302. }
  303. }
  304. rightMapTile = L.tileLayer(right_url,{noWrap:true,
  305. subdomains: map23DConfig.tileSubdomains||'',
  306. errorTileUrl:''});
  307. var _l_boundsLatlng = JSON.parse(modValue.thematicData.left.bounds);
  308. var _l_bounds = new L.LatLngBounds(new L.LatLng(_l_boundsLatlng[1],_l_boundsLatlng[0]),new L.LatLng(_l_boundsLatlng[3],_l_boundsLatlng[2]));
  309. mapLeft = new L.Map(
  310. 'leftMap',
  311. {
  312. layers: leftMapTile,
  313. center: _l_bounds.getCenter(),
  314. zoom: parseInt((modValue.thematicData.left['max_zoom_level']+modValue.thematicData.left['min_zoom_level'])/2),
  315. maxZoom: parseInt(modValue.thematicData.left['max_zoom_level'])<parseInt(modValue.thematicData.right['max_zoom_level'])?parseInt(modValue.thematicData.left['max_zoom_level']):parseInt(modValue.thematicData.right['max_zoom_level']),
  316. minZoom: parseInt(modValue.thematicData.left['min_zoom_level'])>parseInt(modValue.thematicData.right['min_zoom_level'])?parseInt(modValue.thematicData.left['min_zoom_level']):parseInt(modValue.thematicData.right['min_zoom_level']),
  317. worldCopyJump: false,
  318. animate:false,
  319. duration:0,
  320. easeLinearity:0,
  321. zoomAnimation:false,
  322. fadeAnimation:false
  323. }
  324. );
  325. leftMarker = L.marker([39.90743, 116.39134],{
  326. icon: L.icon({
  327. iconUrl:'images/atlas/icon-point.png',
  328. iconSize:[15,15],
  329. iconAnchor:[7,7]
  330. }),
  331. opacity:0
  332. }).addTo(mapLeft);
  333. //设置标题
  334. $('#leftThematicTitle').empty().append(modValue.thematicData.left.production_name);
  335. var _r_boundsLatlng = JSON.parse(modValue.thematicData.right.bounds);
  336. var _r_bounds = new L.LatLngBounds(new L.LatLng(_r_boundsLatlng[1],_r_boundsLatlng[0]),new L.LatLng(_r_boundsLatlng[3],_r_boundsLatlng[2]));
  337. mapRight = new L.Map(
  338. 'rightMap',
  339. {
  340. layers: rightMapTile,
  341. center: _l_bounds.getCenter(),
  342. zoom: parseInt((modValue.thematicData.left['max_zoom_level']+modValue.thematicData.left['min_zoom_level'])/2),
  343. maxZoom: parseInt(modValue.thematicData.left['max_zoom_level'])<parseInt(modValue.thematicData.right['max_zoom_level'])?parseInt(modValue.thematicData.left['max_zoom_level']):parseInt(modValue.thematicData.right['max_zoom_level']),
  344. minZoom: parseInt(modValue.thematicData.left['min_zoom_level'])>parseInt(modValue.thematicData.right['min_zoom_level'])?parseInt(modValue.thematicData.left['min_zoom_level']):parseInt(modValue.thematicData.right['min_zoom_level']),
  345. worldCopyJump: false,
  346. animate:false,
  347. duration:0,
  348. easeLinearity:0,
  349. zoomAnimation:false,
  350. fadeAnimation:false
  351. }
  352. );
  353. rightMarker = L.marker([39.90743, 116.39134],{
  354. icon: L.icon({
  355. iconUrl:'images/atlas/icon-point.png',
  356. iconSize:[15,15],
  357. iconAnchor:[7,7]
  358. }),
  359. opacity:0
  360. }).addTo(mapRight);
  361. //设置标题
  362. $('#rightThematicTitle').empty().append(modValue.thematicData.right.production_name);
  363. $('#leftMapWrap').bind('mouseenter',function(){
  364. modValue.options.actionMap = 'left';
  365. mapLeft.on('drag dblclick zoomend',sync,this)
  366. mapLeft.on('mapCenterChange', function(options){
  367. sync();
  368. });
  369. });
  370. $('#rightMapWrap').bind('mouseenter',function(){
  371. modValue.options.actionMap = 'right';
  372. mapRight.on('drag dblclick zoomend',sync,this)
  373. mapRight.on('mapCenterChange', function(options){
  374. sync();
  375. });
  376. });
  377. setAtlasDetail(modValue.thematicData.left);
  378. mapLeft.on('click',function(){
  379. setAtlasDetail(modValue.thematicData.left);
  380. });
  381. mapRight.on('click',function(){
  382. setAtlasDetail(modValue.thematicData.right);
  383. })
  384. }
  385. /**
  386. * 地图同步
  387. * @type {Function}
  388. * @private
  389. */
  390. function sync(){
  391. switch (modValue.options.actionMap){
  392. case 'left':
  393. setView(mapLeft.getCenter(),mapLeft.getZoom());
  394. break;
  395. case 'right':
  396. setView(mapRight.getCenter(),mapRight.getZoom());
  397. break;
  398. }
  399. }
  400. /**
  401. * 设置中心点和缩放比例,同步用
  402. * @type {Function}
  403. * @param center {Object} 中心点
  404. * @param zoom {Number} 缩放比例
  405. * @private
  406. */
  407. function setView(center,zoom){
  408. switch (modValue.options.actionMap){
  409. case 'left':
  410. mapRight.setView(center,zoom,{animate:false,pan:{animate:false},zoom:{animate:false}}).invalidateSize();
  411. break;
  412. case 'right':
  413. mapLeft.setView(center,zoom,{animate:false,pan:{animate:false},zoom:{animate:false}}).invalidateSize();
  414. break;
  415. }
  416. }
  417. /**
  418. * 设置右侧详情
  419. * @param {[type]} obj [description]
  420. */
  421. function setAtlasDetail(obj){
  422. $('#atlasInfoDetail .content').empty();
  423. $('<h3>'+obj.map_name+'</h3>').appendTo($('#atlasInfoDetail .content'));
  424. $('<p>作者: '+obj.author+'</p>').appendTo($('#atlasInfoDetail .content'));
  425. $('<p>出版社: '+obj.publisher+'</p>').appendTo($('#atlasInfoDetail .content'));
  426. $('<p>出版时间: '+obj.publication_date+'</p>').appendTo($('#atlasInfoDetail .content'));
  427. $('<p>所属图集: '+obj.original_atlas+'</p>').appendTo($('#atlasInfoDetail .content'));
  428. $('<p>地图页码: '+obj.original_page+'</p>').appendTo($('#atlasInfoDetail .content'));
  429. $('<p>扫描分辨率: '+obj.scan_dpi+'DPI</p>').appendTo($('#atlasInfoDetail .content'));
  430. $('<p>比例尺分母: '+obj.scale_denominator+'</p>').appendTo($('#atlasInfoDetail .content'));
  431. if(obj.map_theme_id != 100){
  432. $('<p>主题分类: '+['','自然','政区','交通','旅游','基础设施','人口经济','社会生活','生态环境','其他','新闻'][obj.map_theme_id]+'</p>').appendTo($('#atlasInfoDetail .content'));
  433. }else {
  434. $('<p>主题分类: 其他</p>').appendTo($('#atlasInfoDetail .content'));
  435. }
  436. if($('#atlasInfoDetail .content').children().length === 0){
  437. $('#atlasInfoDetail').hide();
  438. }else {
  439. $('#atlasInfoDetail').show();
  440. }
  441. //添加到全部详情
  442. $('#atlasInfoDetailAll .content').empty();
  443. $('<p>作者: '+obj.author+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  444. $('<p>出版社: '+obj.publisher+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  445. $('<p>出版时间: '+obj.publication_date+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  446. $('<p>所属图集: '+obj.original_atlas+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  447. $('<p>地图名称: '+obj.map_name+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  448. $('<p>地图页码: '+obj.original_page+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  449. $('<p>扫描分辨率: '+obj.scan_dpi+' DPI</p>').appendTo($('#atlasInfoDetailAll .content'));
  450. $('<p>查看权限: '+['','公开','内部','秘密','机密','绝密'][obj.read_level]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  451. if(obj.map_theme_id != 100){
  452. $('<p>主题分类: '+['','自然','政区','交通','旅游','基础设施','人口经济','社会生活','生态环境','其他','新闻'][obj.map_theme_id]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  453. }else {
  454. $('<p>主题分类: 其他</p>').appendTo($('#atlasInfoDetailAll .content'));
  455. }
  456. $('<p>查看次数: '+obj.view_total+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  457. $('<p>比例尺分母: '+obj.scale_denominator+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  458. $('<p>地图图片的高度: '+obj.map_image_height+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
  459. $('<p>地图图片的宽度: '+obj.map_image_width+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
  460. $('<p>最大显示级别: '+obj.max_zoom_level+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  461. $('<p>最小显示级别: '+obj.min_zoom_level+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  462. $('<p>产品状态: '+['初始状态','正在上传/处理文件','正常','禁用','','待删','发布'][obj.production_state]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  463. $('<p>产品类型: '+['单幅专题图','单幅无坐标图片','基础地图','图对','系列图','图集'][obj.production_type]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  464. $('<p>推荐度: '+obj.recommended+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  465. $('<p>是否允许删除: '+(obj.allow_del?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  466. $('<p>图像存储的格式: '+obj.image_format+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  467. $('<p>生产时输入图像存储的品质: '+obj.image_quality+'%</p>').appendTo($('#atlasInfoDetailAll .content'));
  468. $('<p>区域名称编码: '+obj.region_name_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  469. $('<p>区域尺度: '+['其它','世界','大洲大洋','国家','省','市','县','城市'][obj.region_scale_id]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  470. $('<p>资料年代: '+obj.data_date+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  471. $('<p>印刷时间: '+obj.printing_date+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  472. $('<p>印刷长度: '+obj.printing_length+' 厘米</p>').appendTo($('#atlasInfoDetailAll .content'));
  473. $('<p>印刷宽度: '+obj.printing_width+' 厘米</p>').appendTo($('#atlasInfoDetailAll .content'));
  474. $('<p>坐标系: '+obj.coordinate_system+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  475. $('<p style="word-wrap:break-word ;">投影参数:<br/>'+obj.projcs+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  476. //$('<p>投影信息是否准确: '+(obj.coordinate_system_accurately?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  477. //$('<p>比例尺是否准确: '+(obj.scale_accurately?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  478. $('<p>是否透明层(覆盖层): '+(obj.is_overlay?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  479. $('<p>地图数据类型: '+['','栅格','矢量','DEM'][obj.data_type]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  480. $('<p>数据版本: '+obj.data_version+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  481. $('<p>设备显示DPI: '+obj.device_dpi+' DPI</p>').appendTo($('#atlasInfoDetailAll .content'));
  482. $('<p>设备ID: '+obj.device_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  483. $('<p>设备名称: '+obj.device_name+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  484. $('<p>设备显示分辨率(高度): '+obj.device_resolution_height+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
  485. $('<p>设备显示分辨率(宽度): '+obj.device_resolution_width+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
  486. $('<p>设备显示屏尺寸: '+obj.device_screen_size+' 英寸</p>').appendTo($('#atlasInfoDetailAll .content')); //$('<p>数据id: '+obj.data_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  487. $('<p>唯一标识码: '+obj.production_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  488. $('<p>文件分包: '+obj.base_list+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  489. $('<p>存储地址: '+obj.storage_path+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  490. $('<p>存储类型: '+obj.storage_type+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  491. $('<p>瓦片经纬度范围: '+obj.bounds+'</p>').appendTo($('#atlasInfoDetailAll .content'));
  492. //添加说明
  493. $('#atlasInfoIntro .content').empty();
  494. if(obj.desc_id_list.length > 0){
  495. for(var i =0 , l = obj.desc_id_list.length; i<l; i++){
  496. var img = $('<img src="'+onemapUrlConfig.libServerUrl+'/production/thumb?production_id='+obj.production_id+'&thumb_id='+obj.desc_id_list[i]+'"/>');
  497. img.appendTo($('#atlasInfoIntro .content'));
  498. }
  499. $('#atlasInfoIntro').show();
  500. }else {
  501. $('#atlasInfoIntro').hide();
  502. }
  503. //添加图例
  504. $('#atlasInfoLegend .content').empty();
  505. if(obj.legend_id_list.length > 0){
  506. for(var i =0 , l = obj.legend_id_list.length; i<l; i++){
  507. var img = $('<img src="'+onemapUrlConfig.libServerUrl+'/production/thumb?production_id='+obj.production_id+'&thumb_id='+obj.legend_id_list[i]+'"/>');
  508. img.appendTo($('#atlasInfoLegend .content'));
  509. }
  510. $('#atlasInfoLegend').show();
  511. }else {
  512. $('#atlasInfoLegend').hide();
  513. }
  514. $(".info-list").mCustomScrollbar('update');
  515. }
  516. /**
  517. * 注册订阅
  518. * @type {Function}
  519. * 推送:ATLAS.C.publisher.publish(options,'atlasView::type');
  520. * 订阅:ATLAS.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
  521. */
  522. function subscribe(){
  523. ATLAS.C.publisher.subscribe(layoutResize,'atlasView::layoutResize');
  524. }
  525. /**
  526. * 取消订阅
  527. * @type {Function}
  528. * 取消订阅:ATLAS.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
  529. */
  530. function unSubscribe(){}
  531. /**
  532. * 模块移除
  533. * @return {[type]} [description]
  534. */
  535. function remove(){
  536. //取消订阅
  537. //unSubscribe();
  538. }
  539. return ATLAS.M.atlasView = {
  540. init:init,
  541. layoutResize:layoutResize
  542. }
  543. });