layout.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. /**
  2. * [ONEMAP.M.pcLayout]
  3. * @return {[object]}
  4. */
  5. define([
  6. 'html!templates/layout',
  7. 'css!styles/layout',
  8. 'layoutDir/noteBar',
  9. 'css!styles/popupHtml.css'
  10. ], function(tplLayout) {
  11. /**
  12. * pc端界面布局 模块
  13. * @exports ONEMAP.M.pcLayout
  14. * @type {Object}
  15. */
  16. //布局完成后加载地图和侧栏内容,如果url传来参数,将解析参数加载相应的模块
  17. /**
  18. * 界面样式数值变量
  19. * @type {Object}
  20. */
  21. var styles = {
  22. //头部高度
  23. headerHeight: 61,
  24. //工具栏高度
  25. toolbarHeight: 30,
  26. //地图视窗宽
  27. mapWidth: null,
  28. //地图视窗高
  29. mapHeight: null,
  30. //侧栏宽度
  31. sideBarWidth: 270,
  32. //侧栏高度
  33. sideBarHeight: '100%',
  34. };
  35. /**
  36. * 模块状态,用于存储模块的状态 例如:收起,关闭
  37. * @type {Object}
  38. */
  39. var status = {
  40. showSideBar: false,
  41. showFullMap: false
  42. }
  43. /**
  44. * 加载布局 初始化
  45. * 先加载 CSS,html,html事件,地图,地图控件
  46. * @type {Function}
  47. * @returns {*}
  48. */
  49. function init() {
  50. setLayout();
  51. $(window).resize(function() {
  52. layoutResize();
  53. });
  54. subscribe();
  55. bindEvent();
  56. };
  57. /**
  58. * 设置布局
  59. * @return {[type]} [description]
  60. */
  61. function setLayout() {
  62. // $("body").html("");
  63. // console.log(tplLayout);
  64. $('body').append(tplLayout);
  65. $("#openSTSideContent").appendTo($("#map2DWrap"));
  66. //设置系统标题,logo,版权信息
  67. document.title = onemapUrlConfig.systemName;
  68. require(['layoutDir/header'], function(header) {
  69. header.init();
  70. });
  71. require(['layoutDir/sideNav'], function(sideNav) {
  72. sideNav.init();
  73. require(['modDir/mapHolder'], function(mapHolder) {
  74. mapHolder.init();
  75. require(['layoutDir/topBar'], function(topBar) {
  76. topBar.init();
  77. });
  78. require(['layoutDir/footer'], function(footer) {
  79. footer.init();
  80. });
  81. });
  82. });
  83. require(['layoutDir/sideBar'], function(sideBar) {
  84. sideBar.init();
  85. });
  86. require(['layoutDir/menu'], function(menu) {
  87. menu.init();
  88. });
  89. require(['layoutDir/layerController'], function(layerController) {
  90. layerController.init();
  91. });
  92. setTimeout(function(){
  93. require(['layoutDir/user'], function(user) {
  94. user.init();
  95. });
  96. },450);
  97. };
  98. function layoutResize() {
  99. };
  100. function bindEvent(){
  101. $("#openSTSideContent").bind('click',function(){
  102. if(status.showSideBar){
  103. ONEMAP.C.publisher.publish('handHide','layout::sideBar');
  104. }else{
  105. ONEMAP.C.publisher.publish('handShow','layout::sideBar');
  106. }
  107. })
  108. //全屏
  109. $(".tools-fullScreen").unbind('click').bind('click',function(){
  110. require(['modDir/tools/toolFullScreen'], function(toolFullScreen) {
  111. toolFullScreen.init();
  112. });
  113. });
  114. }
  115. /**
  116. * 设置侧栏显示状态
  117. * @param {[type]} options [description]
  118. * 显示: ONEMAP.C.publisher.publish('show','layout::sideBar');
  119. * 隐藏: ONEMAP.C.publisher.publish('show','layout::sideBar');
  120. */
  121. function SideBarStatusControl(options){
  122. if(options == 'show' || options == 'handShow'){
  123. if(!status.showSideBar){
  124. $('#wrapper').animate({
  125. right: 310},
  126. 300, function() {
  127. ONEMAP.C.publisher.publish({},'layout::resize');
  128. sideBarBtn("show");
  129. });
  130. status.showSideBar = true;
  131. ONEMAP.C.publisher.publish('sideBarStatus', 'sideBarStatus');
  132. }
  133. }else {
  134. if(status.showSideBar){
  135. sideBarBtn("hide");
  136. $('#wrapper').animate({
  137. right: 0},
  138. 300, function() {
  139. ONEMAP.C.publisher.publish({},'layout::resize');
  140. });
  141. status.showSideBar = false;
  142. ONEMAP.C.publisher.publish('sideBarStatus', 'sideBarStatus');
  143. }
  144. }
  145. }
  146. function setSideBarStatus(options){
  147. if(options == "handHide" || options == "handShow"){
  148. SideBarStatusControl(options)
  149. }else{
  150. if($('.abtn-mini-side-bar').hasClass('close')){
  151. return false;
  152. }else{
  153. SideBarStatusControl(options);
  154. }
  155. }
  156. };
  157. //侧栏控制按钮
  158. function sideBarBtn(options){
  159. if(options === "show"){
  160. $("#openSTSideContent img").attr("src",onemapUrlConfig.siteUrl+"/images/layout/close3dSideIcon.png");
  161. $("#openSTSideContent").css("right","410px");
  162. }else{
  163. $("#openSTSideContent img").attr("src",onemapUrlConfig.siteUrl+"/images/layout/open3dSideIcon.png");
  164. $("#openSTSideContent").css("right","0px");
  165. }
  166. }
  167. /**
  168. * 设置全屏显示状态
  169. * @param {[type]} options [description]
  170. * 全屏: ONEMAP.C.publisher.publish(true,'layout::fullMap');
  171. * 取消全屏: ONEMAP.C.publisher.publish(false,'layout::fullMap');
  172. */
  173. function setFullMapStatus(options){
  174. if(options == true){
  175. status.showFullMap = true;
  176. ONEMAP.C.publisher.publish({},'layout::resize');
  177. $("#menu").animate({
  178. left:-340
  179. }, 500)
  180. $('#header').animate({
  181. top: -61},
  182. 500, function() {});
  183. $('#footer').animate({
  184. bottom: -30},
  185. 500, function() {});
  186. $('#topBar').animate({
  187. right: -45},
  188. 500, function() {});
  189. $('#menu').animate({
  190. right: -310},
  191. 500, function() {});
  192. $('#sideNav').hide();
  193. }else {
  194. status.showFullMap = false;
  195. ONEMAP.C.publisher.publish({},'layout::resize');
  196. $("#menu").animate({
  197. left: 0
  198. }, 400)
  199. $('#header').animate({
  200. top: 0},
  201. 500, function() {});
  202. $('#footer').animate({
  203. bottom: 0},
  204. 500, function() {});
  205. $('#topBar').animate({
  206. right: 0},
  207. 500, function() {});
  208. $('#menu').animate({
  209. right: 0},
  210. 500, function() {});
  211. $('#sideNav').show();
  212. }
  213. }
  214. function controlShijing(data){
  215. if(data.zoom<11){
  216. $(".abtn-show-shijing").hide();
  217. }else{
  218. $(".abtn-show-shijing").show();
  219. }
  220. }
  221. /**
  222. * 注册监听
  223. * @type {Function}
  224. */
  225. function subscribe() {
  226. ONEMAP.C.publisher.subscribe(setSideBarStatus,'layout::sideBar');
  227. ONEMAP.C.publisher.subscribe(setFullMapStatus,'layout::fullMap');
  228. };
  229. return ONEMAP.M.pcLayout = {
  230. init: init,
  231. styles:styles,
  232. status:status
  233. };
  234. });