atlasView.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. /**
  2. * [ATLAS.M.atlasView]
  3. * @return {[object]}
  4. */
  5. define(['html!templates/atlas/atlasView',
  6. 'css!styles/atlas/atlasView'],
  7. function(tplLayout){
  8. /**
  9. * 模块数据 用于数据存储和外部调用
  10. * @type {Object}
  11. */
  12. var modValue = {
  13. options:{}
  14. }
  15. /**
  16. * 模块界面样式 例如:宽,高
  17. * @type {Object}
  18. */
  19. var styles = {}
  20. /**
  21. * 模块状态,用于存储模块的状态 例如:收起,关闭
  22. * @type {Object}
  23. */
  24. var status = {}
  25. /**
  26. * 初始化并订阅事件
  27. * @return {[type]} [description]
  28. */
  29. function init(){
  30. //获取url参数
  31. modValue.options = JSON.parse(ATLAS.C.encryption.deCode(ATLAS.T.getQueryString('serialize')));
  32. modValue.options.type = parseInt(ATLAS.T.getQueryString('viewType'));
  33. if(modValue.options.type == 1){
  34. modValue.options.guid = ATLAS.T.getQueryString('guid');
  35. $('body').addClass('singleAtlas');
  36. }
  37. if(modValue.options.type == 2){
  38. modValue.options.leftGuid = ATLAS.T.getQueryString('left');
  39. modValue.options.rightGuid = ATLAS.T.getQueryString('right');
  40. $('body').addClass('compareAtlas');
  41. }
  42. if(modValue.options.type == 3 || modValue.options.type == 4){
  43. modValue.options.productionId = ATLAS.T.getQueryString('productionId');
  44. $('body').addClass('atlasBook');
  45. }
  46. setLayout();
  47. bindEvent();
  48. switch(modValue.options.type){
  49. case 1:
  50. require(['modDir/atlas/singleAtlas'], function (singleAtlas) {
  51. singleAtlas.init(modValue.options);
  52. });
  53. break;
  54. case 2:
  55. require(['modDir/atlas/compareView'], function (compareView) {
  56. compareView.init(modValue.options);
  57. });
  58. break;
  59. case 3:
  60. case 4:
  61. require(['modDir/atlas/atlasBook'], function (atlasBook) {
  62. atlasBook.init(modValue.options);
  63. });
  64. break;
  65. }
  66. }
  67. /**
  68. * 设置界面
  69. */
  70. function setLayout(){
  71. $('#contentWrap').append(tplLayout);
  72. layoutResize();
  73. $(window).resize(function() {
  74. layoutResize();
  75. });
  76. $(".category-list").mCustomScrollbar({
  77. });
  78. $(".info-list").mCustomScrollbar({
  79. });
  80. $("#atlasInfoDetailAll .contentWrap").mCustomScrollbar({
  81. });
  82. $('#atlasList .content').mCustomScrollbar({
  83. horizontalScroll:true
  84. });
  85. }
  86. /**
  87. * 界面事件绑定
  88. * @return {[type]} [description]
  89. */
  90. function bindEvent(){
  91. $('#atlasInfo .header .abtn-up').bind('click',function(){
  92. if($(this).hasClass('abtn-down')){
  93. $(this).removeClass('abtn-down');
  94. $(this).parent().next().show();
  95. }else {
  96. $(this).addClass('abtn-down');
  97. $(this).parent().next().hide();
  98. }
  99. $(".info-list").mCustomScrollbar('update');
  100. });
  101. $('#atlasInfoDetail .abtn-more').bind('click',function(){
  102. $('#atlasInfoDetailAll').show();
  103. })
  104. $('#atlasInfoDetailAll .abtn-close').bind('click',function(){
  105. $('#atlasInfoDetailAll').hide();
  106. })
  107. $('.abtn-min-atlas-category').bind('click',function(){
  108. if($(this).hasClass('min')){
  109. $(this).removeClass('min');
  110. $('#contentWrap').removeClass('hide-category');
  111. }else {
  112. $(this).addClass('min');
  113. $('#contentWrap').addClass('hide-category');
  114. }
  115. ATLAS.C.publisher.publish({},'atlasView::layoutResize');
  116. })
  117. $('.abtn-min-atlas-info').bind('click',function(){
  118. if($(this).hasClass('min')){
  119. $(this).removeClass('min');
  120. $('#contentWrap').removeClass('hide-info');
  121. }else {
  122. $(this).addClass('min');
  123. $('#contentWrap').addClass('hide-info');
  124. }
  125. ATLAS.C.publisher.publish({},'atlasView::layoutResize');
  126. })
  127. $('.abtn-min-atlas-list').bind('click',function(){
  128. if($(this).hasClass('min')){
  129. $(this).removeClass('min');
  130. $('#contentWrap').removeClass('hide-list');
  131. }else {
  132. $(this).addClass('min');
  133. $('#contentWrap').addClass('hide-list');
  134. }
  135. ATLAS.C.publisher.publish({},'atlasView::layoutResize');
  136. })
  137. }
  138. /**
  139. * 界面重置
  140. * @return {[type]} [description]
  141. */
  142. function layoutResize(){
  143. $('.category-list').css({height:$('#atlasCategory').height()-100});
  144. }
  145. /**
  146. * 获取地图集目录数据
  147. * @type {Function}
  148. * @private
  149. */
  150. function getAtlasCatalogData(aid){
  151. if(_this.options.type === 4){
  152. var ajaxUrl = atlasUrlConfig.catalogServerUrl+'/production/modValue.options.type?production_id='+aid;
  153. }else {
  154. var ajaxUrl = atlasUrlConfig.catalogServerUrl+'/production/product_category?production_id='+aid;
  155. }
  156. ATLAS.V.loading.load();
  157. $.ajax({
  158. type:"get",
  159. dataType:'jsonp',
  160. url:ajaxUrl,
  161. success:function(data){
  162. ATLAS.V.loading.loaded();
  163. modValue.atlasCatalogData = data;
  164. setSideBarCatalog();
  165. },
  166. error:function(data){
  167. ATLAS.V.loading.loaded();
  168. ATLAS.C.publisher.publish({type:'error',message:'获取地图集目录数据失败!'},'noteBar::add');
  169. }
  170. });
  171. }
  172. /**
  173. * 设置图集目录
  174. */
  175. function setSideBarCatalog(){
  176. $('#thematicCategory dl').empty();
  177. var dtCount = 1;
  178. var liCount = 1;
  179. var first = true;
  180. for(var item in modValue.atlasCatalogData.category){
  181. var cItem =modValue.atlasCatalogData.category[item];
  182. if(modValue.options.type === 4){
  183. var itemDt = $('<dt tid="'+cItem.guid+'">'+cItem.name+'<i></i></dt>');
  184. }else {
  185. var itemDt = $('<dt>'+dtCount+'.'+cItem.name+'<i></i></dt>');
  186. }
  187. $('#thematicCategory dl').append(itemDt);
  188. var itemDd = $('<dd></dd>');
  189. $('#thematicCategory dl').append(itemDd);
  190. var itemDdUl = $('<ul></ul>');
  191. itemDd.append(itemDdUl);
  192. for(var i= 0,l=cItem.list.length; i<l; i++){
  193. var mItem = cItem.list[i];
  194. //默认显示第一幅图
  195. if(first === true){
  196. var mItemLi = $('<li style="display:block;">'+
  197. '<a class="select" tid="'+mItem.guid+'" href="javascript:void(0)">'+
  198. dtCount+'.'+liCount+'-'+mItem.name+'<i></i></a></li>');
  199. //AJAX获取专题图数据,添加专题图到地图容器
  200. modValue.getThematicData(mItem.guid);
  201. first = false;
  202. }else {
  203. var mItemLi = $('<li style="display:block;">'+
  204. '<a tid="'+mItem.guid+'" href="javascript:void(0)">'+
  205. dtCount+'.'+liCount+'-'+mItem.name+'<i></i></a></li>');
  206. }
  207. mItemLi.find('a').bind('click',{da:mItem},function(e){
  208. $('#thematicCategory dd ul li .select').removeClass('select');
  209. $(this).addClass('select');
  210. //ie6 hack
  211. e.preventDefault();
  212. //AJAX获取专题图数据,添加专题图到地图容器
  213. modValue.getThematicData(e.data.da.guid);
  214. });
  215. mItemLi.appendTo(itemDdUl);
  216. liCount++;
  217. }
  218. dtCount++;
  219. liCount = 1;
  220. }
  221. $('#thematicCategory dt:first').addClass('select');
  222. $('#thematicCategory dd:first').css({display:"block"}).addClass('open');
  223. $('#thematicCategory dt').bind('click',function(){
  224. if($(this).hasClass('select')){
  225. $(this).removeClass('select');
  226. $(this).next().removeClass('open').css({display:"none"});
  227. }else {
  228. $(this).addClass('select');
  229. $(this).next().css({display:"block"}).addClass('open').css({height:'auto'});
  230. }
  231. })
  232. }
  233. /**
  234. * AJAX获取相应GUID的专题图数据
  235. * @type {Function}
  236. * @param guid {Number} guid
  237. * @private
  238. */
  239. function getThematicData(guid){
  240. var ajaxUrl = atlasUrlConfig.thematicDataServerUrl+'/production/metadata?production_id='+guid;
  241. ATLAS.V.loading.load();
  242. $.ajax({
  243. type:"get",
  244. dataType:'jsonp',
  245. url:ajaxUrl,
  246. success:function(data){
  247. ATLAS.V.loading.loaded();
  248. modValue.currentThematicData = data.metadata;
  249. //添加专题图到地图容器中
  250. addThematicToMap();
  251. },
  252. error:function(data){
  253. ATLAS.V.loading.loaded();
  254. ATLAS.C.publisher.publish({type:'error',message:'获取地图数据失败!'},'noteBar::add');
  255. }
  256. });
  257. }
  258. /**
  259. * 添加专题图到地图上
  260. */
  261. function addThematicToMap(){
  262. }
  263. /**
  264. * 注册订阅
  265. * @type {Function}
  266. * 推送:ATLAS.C.publisher.publish(options,'atlasView::type');
  267. * 订阅:ATLAS.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
  268. */
  269. function subscribe(){}
  270. /**
  271. * 取消订阅
  272. * @type {Function}
  273. * 取消订阅:ATLAS.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
  274. */
  275. function unSubscribe(){}
  276. /**
  277. * 模块移除
  278. * @return {[type]} [description]
  279. */
  280. function remove(){
  281. //取消订阅
  282. //unSubscribe();
  283. }
  284. return ATLAS.M.atlasView = {
  285. init:init,
  286. layoutResize:layoutResize
  287. }
  288. });