myLayerActions.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. /**
  2. * [ONEMAP.M.projectController]
  3. * @return {[object]}
  4. */
  5. define(function (tplLayout) {
  6. /**
  7. * 初始化并订阅事件
  8. * @return {[type]} [description]
  9. */
  10. function init() {
  11. //if (!status.initialized) {
  12. subscribe();
  13. bindEvent();
  14. status.initialized = true;
  15. //}
  16. }
  17. var eyelook = {
  18. status: true
  19. }
  20. function bindEvent() {
  21. // 清空
  22. $("#layerControlMenu .clearLayer").unbind('click').bind('click', function () {
  23. ONEMAP.M.myLayerActions.clearLayer();
  24. ONEMAP.C.publisher.publish({
  25. type: 'allRemove'
  26. }, 'legend:remove');
  27. })
  28. // 从我的图层中删除
  29. $("#layerControlMenu .myLayers .close").off('click').on('click', function () {
  30. var guid = $(this).parent().parent().attr("layer");
  31. ONEMAP.C.publisher.publish({
  32. action: 'remove',
  33. guid: guid
  34. }, guid);
  35. // 从上部移除我的图层中的对应节点
  36. var getClass = $(this).next().attr("class");
  37. $(this).parent().parent().remove();
  38. var legendUrl = $(this).parent().find('.legend').attr('curl');
  39. // console.log(legendUrl);
  40. ONEMAP.C.publisher.publish({
  41. type: legendUrl
  42. }, 'legend:remove');
  43. // // 从上部移除我的图层中的对应节点
  44. // var getClass = $(this).next().attr("class");
  45. if (getClass) {
  46. var rmvClass = "." + getClass;
  47. // $(rmvClass).removeAttr("checked"); // 移除选中状态
  48. $(rmvClass).next().removeClass('menu-select').addClass("menu-select-no"); // (新)
  49. $(rmvClass).removeClass(getClass); // 移除上部对应class
  50. }
  51. ONEMAP.M.layerControlMenu.checkLayerNull();
  52. ONEMAP.M.myLayerActions.changeFloor();
  53. // 移除zoom范围
  54. var liName = $(this).parent().find(".data-name").text();
  55. ONEMAP.M.myLayers.zoomActions('remove', '', '', '', '', '', liName);
  56. })
  57. // 我的图层中复选框操作
  58. $("#layerControlMenu .myLayers :checkbox").off("change").on("change", function () {
  59. var guid = $(this).parent().parent().attr("layer");
  60. var eye = $(this).parent().parent().find(".eye");
  61. if ($(this).is(":checked")) {
  62. ONEMAP.C.publisher.publish({
  63. action: 'controlShow',
  64. options: {
  65. show: true
  66. },
  67. guid: guid
  68. }, guid);
  69. $(this).parents().filter("li").attr("eyelook", 0);
  70. if (!eye.hasClass("checkTrue")) {
  71. eye.addClass("checkTrue");
  72. $(this).parent().parent().css({
  73. "background": "url(./images/layout/zhenyan.png) 45px 16px / 21px no-repeat",
  74. "background-size": "20px"
  75. });
  76. }
  77. } else {
  78. ONEMAP.C.publisher.publish({
  79. action: 'controlShow',
  80. options: {
  81. show: false
  82. },
  83. guid: guid
  84. }, guid);
  85. // $(this).parent().next().find(".chang").css("width", 0);
  86. // $(this).parent().next().find(".yuan").css("left", 0);
  87. $(this).parents().filter("li").attr("eyelook", 1);
  88. // eyelook.status = false;
  89. if (eye.hasClass("checkTrue")) {
  90. eye.removeClass("checkTrue");
  91. $(this).parent().parent().css({
  92. "background": "url(./images/layout/biyan.png) 45px 16px / 21px no-repeat",
  93. "background-size": "20px"
  94. });
  95. }
  96. }
  97. })
  98. // 我的图层操作界面显隐
  99. $("#layerControlMenu .gear").off('click').on('click', function () {
  100. if ($(this).parent().next().hasClass('active')) {
  101. $(this).parent().next().removeClass('active');
  102. } else {
  103. $(this).parent().next().addClass('active');
  104. }
  105. })
  106. // 定位
  107. $("#layerControlMenu .location").off('click').on('click', function () {
  108. var guid = $(this).parent().parent().attr("layer");
  109. console.log(guid);
  110. ONEMAP.C.publisher.publish({
  111. action: 'location',
  112. guid: guid
  113. }, guid);
  114. })
  115. // 详情和收藏
  116. $("#layerControlMenu .myLayers .layer-detail").off('click').on('click', function () {
  117. var layerObj = JSON.parse($(this).parent().prev().find(".data-save").html());
  118. if (layerObj) {
  119. getShowInfo(layerObj);
  120. }
  121. })
  122. $("#layerControlMenu .myLayers .layer-cale").off('click').on('click', function () {
  123. var layerObj = JSON.parse($(this).parent().prev().find(".data-save").html());
  124. if (layerObj) {
  125. require(['modDir/user/userThematic'], function (userThematic) {
  126. userThematic.addThematic(layerObj);
  127. });
  128. }
  129. })
  130. // 透明度滑条
  131. var mnAct = $('#layerControlMenu .myLayers .mn-content li .mn-act');
  132. var yuan = $('#layerControlMenu .myLayers .mn-content li .yuan');
  133. yuan.on('mousedown', function (event) {
  134. var e = event;
  135. if ($(this).parents().filter("li").attr("eyelook") == 1) {
  136. e.preventDefault();
  137. } else {
  138. // 锁定当前索引
  139. var idx = $(this).parent().parent().parent().index();
  140. yuan = $('#layerControlMenu .myLayers .mn-content li .yuan').eq(idx).get(0);
  141. var op = $('#layerControlMenu .myLayers .mn-content li .op').eq(idx).get(0);
  142. var chang = $('#layerControlMenu .myLayers .mn-content li .chang').eq(idx).get(0);
  143. var yuanleft = 0;
  144. var event = event || window.event;
  145. var leftVal = event.clientX - this.offsetLeft;
  146. var that = this;
  147. var zid = $(this).parent().parent().parent().attr("zid");
  148. var curLatyerId = $(this).parent().parent().parent().attr('layer');
  149. if (mnAct.attr("setOp") == "yes") {
  150. // 拖动
  151. document.onmousemove = function (event) {
  152. var event = event || window.event;
  153. yuanleft = event.clientX - leftVal;
  154. if (yuanleft < 0)
  155. yuanleft = 0;
  156. else if (yuanleft > op.offsetWidth - yuan.offsetWidth)
  157. yuanleft = op.offsetWidth - yuan.offsetWidth;
  158. chang.style.width = yuanleft + 'px';
  159. yuan.style.left = yuanleft + "px";
  160. var opt = 1 - parseInt(yuanleft / (op.offsetWidth - yuan.offsetWidth) * 100) / 100;
  161. // console.log(opt);
  162. // 设置当前图层透明度
  163. ONEMAP.C.publisher.publish({
  164. action: 'opacity',
  165. options: {
  166. opacity: opt
  167. },
  168. guid: curLatyerId
  169. }, curLatyerId);
  170. //防止选择内容--当拖动鼠标过快时候,弹起鼠标,bar也会移动,修复bug
  171. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  172. }
  173. }
  174. }
  175. })
  176. document.onmouseup = function () {
  177. document.onmousemove = null; //弹起鼠标不做任何操作
  178. }
  179. // 当前图层上移下移
  180. $("#layerControlMenu .down").off('click').on('click', function () {
  181. var nd = $(this).parent().parent().parent();
  182. var nxt = nd.next().html();
  183. var length = $("#mapHolder #map2DWrap .leaflet-layer ").length - 1;
  184. var idx = length - nd.index(); // 当前图层索引值
  185. if (typeof (nxt) != 'undefined' && nxt != "暂无图层数据") {
  186. nd.insertAfter(nd.next());
  187. var curLatyerId = $(this).parent().parent().parent().attr('layer');
  188. ONEMAP.C.publisher.publish({
  189. action: 'down',
  190. guid: curLatyerId
  191. }, curLatyerId);
  192. // ONEMAP.M.myLayerActions.changeFloor();
  193. } else {
  194. ONEMAP.C.publisher.publish({
  195. type: 'warning',
  196. message: '已移到最底部'
  197. }, 'noteBar::add');
  198. }
  199. })
  200. $("#layerControlMenu .up").off('click').on('click', function () {
  201. var nd = $(this).parent().parent().parent();
  202. var prv = nd.prev().html();
  203. if (typeof (prv) != 'undefined') {
  204. nd.insertBefore(nd.prev());
  205. var curLatyerId = $(this).parent().parent().parent().attr('layer');
  206. ONEMAP.C.publisher.publish({
  207. action: 'up',
  208. guid: curLatyerId
  209. }, curLatyerId);
  210. // ONEMAP.M.myLayerActions.changeFloor();
  211. } else {
  212. ONEMAP.C.publisher.publish({
  213. type: 'warning',
  214. message: '已移到最顶部'
  215. }, 'noteBar::add');
  216. }
  217. })
  218. //显示图例
  219. $("#layerControlMenu .legend").unbind('click').bind('click', function () {
  220. var pictureUrl = $(this).attr('curl');
  221. require(['modDir/menu/legend'], function (legend) {
  222. legend.init({
  223. pictureUrl: pictureUrl
  224. });
  225. });
  226. })
  227. //模型控制
  228. $("#layerControlMenu .stereoscopic_set").unbind('click').bind('click', function () {
  229. var guid = $(this).parent().parent().attr("layer");
  230. ONEMAP.C.publisher.publish({
  231. action: 'set',
  232. guid: guid
  233. }, guid);
  234. })
  235. }
  236. /**
  237. * 显示专题图详情
  238. */
  239. function getShowInfo(data) {
  240. // console.log(data);
  241. var guid = data.guid;
  242. var ajaxUrl = onemapUrlConfig.thematicDataServerUrl + '/production/metadata?production_id=' + guid;
  243. ONEMAP.V.loading.load();
  244. $.ajax({
  245. type: "get",
  246. dataType: 'jsonp',
  247. url: ajaxUrl,
  248. success: function (data) {
  249. ONEMAP.V.loading.loaded();
  250. //添加专题图信息到地图容器中
  251. addItemToContent(data.metadata);
  252. //console.log(data.metadata);
  253. },
  254. error: function (data) {
  255. ONEMAP.V.loading.loaded();
  256. ONEMAP.C.publisher.publish({
  257. type: 'error',
  258. message: '获取地图数据失败!'
  259. }, 'noteBar::add');
  260. }
  261. });
  262. };
  263. function addItemToContent(data) {
  264. $('#atlasInfoDetail').show();
  265. var zIndex = ONEMAP.M.sideBar.getZIndex();
  266. $('#atlasInfoDetail').css({
  267. zIndex: zIndex
  268. });
  269. $('#atlasInfoDetail .cover-content').empty();
  270. $('<div class="close"></div>').appendTo($('#atlasInfoDetail .cover-content'));
  271. $('<h3>' + data.map_name + '</h3>').appendTo($('#atlasInfoDetail .cover-content'));
  272. $('<p>作者: ' + data.author + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  273. $('<p>创建时间: ' + data.created_time + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  274. $('<p>发布者: ' + data.publisher + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  275. $('<p>发布时间: ' + data.publication_date + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  276. $('<p>地图来源: ' + data.original_atlas + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  277. $('<p>最小缩放等级: ' + data.min_zoom_level + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  278. $('<p>最大缩放等级: ' + data.max_zoom_level + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  279. //$('<p>瓦片格式: '+data.image_format+'</p>').appendTo($('#atlasInfoDetail .content'));
  280. //$('<p>瓦片质量: '+data.image_quality+'</p>').appendTo($('#atlasInfoDetail .content'));
  281. $('<p>地图宽度: ' + data.map_image_width + '像素</p>').appendTo($('#atlasInfoDetail .cover-content'));
  282. $('<p>地图高度: ' + data.map_image_height + '像素</p>').appendTo($('#atlasInfoDetail .cover-content'));
  283. if (data.coordinate_system == 0) {
  284. data.coordinate_system = '无坐标图形'
  285. }
  286. $('<p>坐标系: ' + data.coordinate_system + '</p>').appendTo($('#atlasInfoDetail .cover-content'));
  287. $(".close").click(function () {
  288. $("#atlasInfoDetail").hide();
  289. })
  290. }
  291. /**
  292. * 设置界面
  293. */
  294. function setLayout() {
  295. }
  296. function layoutResize() {
  297. }
  298. /**
  299. * 注册订阅
  300. * @type {Function}
  301. * 推送:ONEMAP.C.publisher.publish(options,'moduleName::type');
  302. * 订阅:ONEMAP.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
  303. */
  304. function subscribe() {
  305. //ONEMAP.C.publisher.subscribe(layoutResize, 'menuListClick');
  306. // ONEMAP.C.publisher.subscribe(remove, 'cleanMap');
  307. }
  308. /**
  309. * 取消订阅
  310. * @type {Function}
  311. * 取消订阅:ONEMAP.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
  312. */
  313. function unSubscribe() {
  314. }
  315. // 更改层级
  316. function changeFloor() {
  317. // console.log("2333");
  318. var layer = $("#mapHolder #map2DWrap .leaflet-layer ");
  319. var layerLength = layer.length;
  320. var li = $("#layerControlMenu .myLayers .mn-content li");
  321. var liLength = li.length;
  322. for (var i = 0; i < liLength; i++) {
  323. if (li.eq(i).attr("cg") == "true") {
  324. // console.log("congratulation");
  325. var DOMID = "zid" + li.eq(i).attr("layer");
  326. // console.log(DOMID);
  327. $("#mapHolder ." + DOMID).css("z-index", layerLength);
  328. layerLength--;
  329. }
  330. }
  331. }
  332. // 设置透明度
  333. function setOpacity(zid, opt) {
  334. map23DControl.tileLayer({
  335. action: 'update',
  336. guid: zid,
  337. layer: {
  338. opacity: opt
  339. }
  340. })
  341. }
  342. function clearLayer() {
  343. $("#layerControlMenu").removeClass("bl");
  344. var layerLis = $("#layerControlMenu .myLayers .mn-content li");
  345. for (var i = 0; i < layerLis.length; i++) {
  346. var guid = $(layerLis[i]).attr("layer");
  347. ONEMAP.C.publisher.publish({
  348. action: 'remove',
  349. guid: guid
  350. }, guid);
  351. $(layerLis[i]).remove();
  352. // 从上部移除我的图层中的对应节点
  353. if (guid) {
  354. var rmvClass = "." + guid;
  355. // $(rmvClass).removeAttr("checked"); // 移除选中状态(旧)
  356. $(rmvClass).next().removeClass('menu-select').addClass("menu-select-no"); // (新)
  357. $(rmvClass).removeClass(guid); // 移除上部对应class
  358. }
  359. // 清空搜索結果列表
  360. $("#placePanel .thematic-content .thematic-search-list li").attr("load", 0);
  361. //
  362. $('#thematicResultsList li.select').removeClass('select');
  363. }
  364. ONEMAP.M.layerControlMenu.checkLayerNull();
  365. map2DViewer.map.setZoomScope(1, 19);
  366. ONEMAP.C.layerLength = 0;
  367. ONEMAP.C.zoomArr = [];
  368. ONEMAP.C.zoomArr2w = [];
  369. }
  370. function checkLayerNull() {
  371. // 我的图层暂无数据时
  372. if (typeof ($("#layerControlMenu .myLayers .mn-content li").eq(0).html()) == "undefined" || $("#layerControlMenu .myLayers .mn-content").text() == "") {
  373. $('#thematicResultsList li.select').removeClass('select');
  374. // 解放缩放等级
  375. map2DViewer.map.setZoomScope(1, 19);
  376. $("#layerControlMenu").removeClass("bl");
  377. }
  378. }
  379. function checkChongMing(name) {
  380. var layerlistDe;
  381. // console.log(name);
  382. if (typeof ($("#layerControlMenu .myLayers .mn-content li").eq(0).html()) == "undefined" || $("#layerControlMenu .myLayers .mn-content").text() == "") {
  383. return true;
  384. } else {
  385. layerlistDe = $("#layerControlMenu .myLayers .mn-content li");
  386. for (var i = 0; i < layerlistDe.length; i++) {
  387. if (name == layerlistDe.eq(i).find(".data-name").text()) {
  388. // console.log("false")
  389. return false;
  390. // console.log(layerlistDe.eq(i).find(".data-name").text());
  391. }
  392. }
  393. return true;
  394. }
  395. }
  396. return ONEMAP.M.myLayerActions = {
  397. init: init,
  398. checkLayerNull: checkLayerNull,
  399. clearLayer: clearLayer,
  400. changeFloor: changeFloor,
  401. checkChongMing: checkChongMing
  402. }
  403. });