myLayer.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. /**
  2. * [ONEMAP.M.projectController]
  3. * @return {[object]}
  4. */
  5. define(['modDir/menu/myLayerActions'],
  6. function (_myLayerActions) {
  7. /**
  8. * 初始化并订阅事件
  9. * @return {[type]} [description]
  10. */
  11. function init(dm) {
  12. if (!status.initialized) {
  13. subscribe();
  14. bindEvent();
  15. status.initialized = true;
  16. }
  17. }
  18. function bindEvent() {
  19. }
  20. // 移除图层
  21. function removeLayer(data) {
  22. if (data) {
  23. modValue.thematicControlHtml.remove();
  24. map23DControl.tileLayer({
  25. action: 'remove',
  26. guid: data
  27. })
  28. data = null;
  29. // map2DViewer.map.removeControl(overLayerOpacityControl);
  30. overLayerOpacityControl = null;
  31. }
  32. ONEMAP.D.overLayerCount--;
  33. if (ONEMAP.D.overLayerCount == 0) {
  34. map2DViewer.map.setZoomScope(1, 19);
  35. }
  36. }
  37. /**
  38. * 设置界面
  39. */
  40. function setLayout() {
  41. }
  42. function layoutResize() {
  43. }
  44. // action type guid
  45. function myLayerControl(options) {
  46. switch (options.action) {
  47. case 'add':
  48. return addToMyLayer(options);
  49. break;
  50. case 'remove':
  51. return deleteDom(options);
  52. break;
  53. case 'update':
  54. return updateLayer(options);
  55. break;
  56. }
  57. }
  58. // 添加到自定义图层
  59. function addToMyLayer(options) { // guid type(图层或图层组) name mod(是否无透明度)
  60. // console.log(options.layerData);
  61. // console.log("add");
  62. var layerLength = $("#layerControlMenu .myLayers li").length;
  63. if (layerLength < map23DConfig.layerMaxLength) {
  64. // console.log(layerLength);
  65. var DOMid = options.DOM.guid;
  66. var mnAct = '<div class="mn-act no" setOp="no">';
  67. if (options.DOM.type == "layer" || options.DOM.type == "otherOrigin" || options.DOM.type == "thematicOrigin" || options.DOM.type == "sxlayer" || options.DOM.type == "QXSY" || options.DOM.type == "RASTER" || options.DOM.type == "VECTOR") {
  68. mnAct = '<div class="mn-act yes" setOp="yes">';
  69. } else if (options.mod == "taiShi") {
  70. mnAct = '<div class="mn-act no taiShiTool" setOp="no">';
  71. } else if (options.mod == "wxjd") {
  72. mnAct = '<div class="mn-act no" style="margin-left: 0px;" setOp="no">';
  73. }
  74. if (options.mod == "test") {
  75. mnAct = '<div class="mn-act yes DS" setOp="yes">';
  76. }
  77. var data;
  78. var layerFloor = "zid" + DOMid;
  79. if (options.mod == "test") {
  80. data = '<li layer="' + DOMid + '" class="' + layerFloor + '" cg="true"><div class="clearfix"><span class="close">×</span>' +
  81. '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  82. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name + '</span>' +
  83. '<span class="data-save" guid="' + DOMid + '">' + JSON.stringify(options.layerData) + '</span>' +
  84. '<span class="fr gear"></span></div>' + mnAct +
  85. '<span>透明度:</span><span class="op"><span class="chang"></span>' +
  86. '<span class="yuan" layer="' + DOMid + '"></span></span>' +
  87. '<span class="layer-detail"></span><span class="layer-cale"></span>' +
  88. '<span class="move"><span class="down"></span><span class="up"></span></span></div><span class="eye">显示开关</span></li>';
  89. // 设置层级
  90. setFloor(layerFloor, options.DOM.name);
  91. } else if (options.mod == "otherOrigin" || options.mod == "thematicOrigin" || options.mod == "qixiang" || options.mod == "vectorOrigin") {
  92. data = '<li layer="' + DOMid + '" class="' + layerFloor + '" cg="true"><div class="clearfix"><span class="close">×</span>' +
  93. '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  94. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name +
  95. '</span><span class="fr legend" title="图例" curl="' + options.DOM.legend + '"></span><span class="fr gear"></span></div>' + mnAct +
  96. '<span>透明度:</span><span class="op"><span class="chang"></span>' +
  97. '<span class="yuan" layer="' + DOMid + '"></span></span>' +
  98. '<span class="move"><span class="down"></span><span class="up"></span></span></div><span class="eye">显示开关</span></li>';
  99. // 设置层级
  100. setFloor(layerFloor, options.DOM.name);
  101. } else if (options.mod == "taiShi") {
  102. data = '<li layer="' + DOMid + '"><div class="clearfix"><span class="close">×</span>' +
  103. '<input type="checkbox" checked="true">' +
  104. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name +
  105. '</span><span class="data-save"></span><span class="fr gear"></span></div>' + mnAct
  106. // +'<span style="line-height:25px; ">用户ID:<input type="text" id="video-query-ids" style="width:114px;height: 25px;line-height: 20px;border: #7F9BB3 1px solid;margin-left: 5px;" /></span>'
  107. +
  108. '<span style="line-height:25px; "><input type="text" id="video-query-startDate" class="Wdate" onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\',maxDate:\'#F{$dp.$D(\\\'video-query-endDate\\\')}\',readOnly:true});" />至</span>' +
  109. '<span style="line-height:25px; "><input type="text" id="video-query-endDate" class="Wdate" onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\',minDate:\'#F{$dp.$D(\\\'video-query-startDate\\\')}\',readOnly:true});" /></span>' +
  110. '<span style="line-height:25px; ">时间间隔:<input type="number" value="1" style="width: 40px;height: 25px;line-height: 20px;font-size: 12px;border: #7F9BB3 1px solid;padding-left: 5px;margin-left: 5px;" id="video-timeSpace" />小时<input type="button" id="taishi_setBtn" style="position:absolute;left:145px;height: 25px;line-height: 20px;text-align: center;vertical-align: middle;border: 0px !important; background: #104792;color: #fff;padding: 0px 5px 0px 5px;cursor: pointer;border-radius: 2px;" value="查询" /></span>' +
  111. '</div><span class="eye">显示开关</span></li>';
  112. } else if (options.mod == "zhihuiji") {
  113. data = '<li layer="' + DOMid + '"><div class="clearfix"><span class="close">×</span>' +
  114. '<input type="checkbox" checked="true">' +
  115. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name +
  116. '</span><span class="data-save"></span><span class="fr gear"></span></div>' + mnAct +
  117. '<p class="getHistoryZHJ" onclick="ONEMAP.M.projectController.openHistroyPosition()">历史轨迹查询</p></div><span class="eye">显示开关</span></li>';
  118. } else if (options.mod == "wxjd") {
  119. data = '<li layer="' + DOMid + '"><div class="clearfix"><span class="close">×</span>' +
  120. '<input type="checkbox" checked="true">' +
  121. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name +
  122. '</span><span class="data-save"></span><span class="fr gear"></span></div>' + mnAct
  123. // +'<span style="line-height:30px; "><input type="radio" name="jd" id="wxjd-rdss"checked/>RDSS<input type="radio" id="wxjd-rnss" name="jd"/>RNSS<input type="radio" id="wxjd-gps" name="jd"/>GPS</span>'
  124. +
  125. '<span style="line-height:30px; "><input type="radio" id="wxjd-rnss" name="jd"/>RNSS<input type="radio" id="wxjd-gps" name="jd"/>GPS</span>' +
  126. '</div><span class="eye">显示开关</span></li>';
  127. } else if (options.mod == "sxlayer") {
  128. data = '<li layer="' + DOMid + '" class="' + DOMid + ' sxlayer" cg="true"><div class="clearfix"><span class="close">×</span>' +
  129. '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  130. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name +
  131. '</span><span class="fr gear"></span></div>' + mnAct +
  132. '<span>透明度:</span><span class="op"><span class="chang"></span>' +
  133. '<span class="yuan" layer="' + DOMid + '"></span></span>' +
  134. '</div><span class="eye">显示开关</span></li>';
  135. } else if (options.mod == "QXSY") {
  136. // data = '<li layer="' + DOMid + '"><div class="clearfix"><span class="close">×</span>' +
  137. // '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  138. // '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name +
  139. // '</span><span class="data-save"></span></div><span class="eye">显示开关</span></li>';
  140. data = '<li layer="' + DOMid + '" class="' + layerFloor + '" cg="true"><div class="clearfix"><span class="close">×</span>' +
  141. '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  142. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name + '</span>' +
  143. '<span class="data-save" guid="' + DOMid + '">' + JSON.stringify(options.layerData) + '</span>' +
  144. '<span class="fr gear"></span><span class="fr location"></span></div>' + mnAct +
  145. '<span>透明度:</span><span class="op"><span class="chang"></span>' +
  146. '<span class="yuan" layer="' + DOMid + '"></span></span>' +
  147. // '<span class="layer-detail"></span><span class="layer-cale"></span>' +
  148. '<span class="move"><span class="down"></span><span class="up"></span></span></div><span class="eye">显示开关</span></li>';
  149. // 设置层级
  150. setFloor(layerFloor, options.DOM.name);
  151. } else if (options.mod == "RASTER") {
  152. data = '<li layer="' + DOMid + '" class="' + layerFloor + '" cg="true"><div class="clearfix"><span class="close">×</span>' +
  153. '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  154. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name + '</span>' +
  155. '<span class="data-save" guid="' + DOMid + '">' + JSON.stringify(options.layerData) + '</span>' +
  156. '<span class="fr gear"></span><span class="fr location"></span></div>' + mnAct +
  157. '<span>透明度:</span><span class="op"><span class="chang"></span>' +
  158. '<span class="yuan" layer="' + DOMid + '"></span></span>' +
  159. // '<span class="layer-detail"></span><span class="layer-cale"></span>' +
  160. '<span class="move"><span class="down"></span><span class="up"></span></span></div><span class="eye">显示开关</span></li>';
  161. // 设置层级
  162. setFloor(layerFloor, options.DOM.name);
  163. } else if (options.mod == "VECTOR") {
  164. data = '<li layer="' + DOMid + '" class="' + layerFloor + '" cg="true"><div class="clearfix"><span class="close">×</span>' +
  165. '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  166. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name + '</span>' +
  167. '<span class="data-save" guid="' + DOMid + '">' + JSON.stringify(options.layerData) + '</span>' +
  168. '<span class="fr gear"></span><span class="fr location"></span></div>' + mnAct +
  169. '<span>透明度:</span><span class="op"><span class="chang"></span>' +
  170. '<span class="yuan" layer="' + DOMid + '"></span></span>' +
  171. // '<span class="layer-detail"></span><span class="layer-cale"></span>' +
  172. '<span class="move"><span class="down"></span><span class="up"></span></span></div><span class="eye">显示开关</span></li>';
  173. // 设置层级
  174. setFloor(layerFloor, options.DOM.name);
  175. }
  176. else if (options.mod == "MOXING") {
  177. data = '<li layer="' + DOMid + '"><div class="clearfix"><span class="close">×</span>' +
  178. '<input type="checkbox" checked="true" class="' + DOMid + '">' +
  179. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name + '</span>' +
  180. '<span class="data-save"></span>' +
  181. '<span class="fr stereoscopic_set"></span>' +
  182. '</div><span class="eye">显示开关</span></li>';
  183. } else {
  184. data = '<li layer="' + DOMid + '" class="' + DOMid + '"><div class="clearfix"><span class="close">×</span>' +
  185. '<input type="checkbox" checked="true">' +
  186. '<span class="data-name" title="' + options.DOM.name + '">' + options.DOM.name +
  187. '</span><span class="data-save"></span></div><span class="eye">显示开关</span></li>';
  188. }
  189. $("#layerControlMenu .myLayers .mn-content").prepend(data);
  190. $("#layerControlMenu .myLayers .mn-content").children(":first").find("input").next().html(options.DOM.name);
  191. $("#layerControlMenu .myLayers").addClass('active');
  192. $("#layerControlMenu .mn-content .mn-act").removeClass('active');
  193. $("#layerControlMenu .myLayers .mn-content").children(":first").find("input:checkbox").attr("checked", true);
  194. $("#layerControlMenu .myLayers .mn-content").children(":first").find(".eye").addClass("checkTrue");
  195. $("#layerControlMenu .myLayers .scroll-bar").mCustomScrollbar('update');
  196. _myLayerActions.init();
  197. // 判断图层控制是否显示
  198. if (!$("#layerControlMenu").hasClass("bl")) {
  199. $("#layerControlMenu").addClass("bl");
  200. $("#layerControlMenu .myLayers").addClass("active");
  201. }
  202. // 添加时窗口位置如未显示则重置
  203. if (parseInt($("#layerControlMenu").css("left")) < -100) {
  204. $("#layerControlMenu").css("left", "0");
  205. }
  206. // 检查图层控制是否为空
  207. ONEMAP.M.layerControlMenu.checkLayerNull();
  208. return DOMid;
  209. } else {
  210. ONEMAP.C.publisher.publish({
  211. type: 'warning',
  212. message: '图层数量已达上限'
  213. }, 'noteBar::add');
  214. }
  215. }
  216. // 从我的图层中删除
  217. function deleteDom(options) {
  218. // DOMid
  219. var guid = options.DOMid;
  220. var li = $("#layerControlMenu .myLayers .mn-content li");
  221. for (var i = 0; i < li.length; i++) {
  222. // console.log(li.eq(i).attr("layer"));
  223. if (li.eq(i).attr("layer") == guid) {
  224. li.eq(i).remove();
  225. }
  226. }
  227. ONEMAP.M.layerControlMenu.checkLayerNull(); // 检查我的图层是否为空
  228. ONEMAP.M.myLayerActions.changeFloor(); // 删除时更新层级
  229. }
  230. function updateLayer(options) {
  231. var guid = options.DOMid;
  232. var name = options.DOM.name;
  233. var li = $("#layerControlMenu .myLayers .mn-content li");
  234. for (var i = 0; i < li.length; i++) {
  235. if (li.eq(i).attr("layer") == guid) {
  236. li.eq(i).find(".data-name").html(name);
  237. }
  238. }
  239. }
  240. // 设置层级
  241. function setFloor(DOMID, name) {
  242. var li = $("#layerControlMenu .myLayers .mn-content li");
  243. var liLength = li.length;
  244. var layer = $("#mapHolder #map2DWrap .leaflet-layer ");
  245. var layerLength = layer.length;
  246. for (var i = 0; i < liLength; i++) {
  247. li.eq(i).attr("zid", i);
  248. }
  249. layer.eq(layerLength - 1).addClass(DOMID);
  250. $("#mapHolder ." + DOMID).css("z-index", layerLength).attr("title", name);
  251. }
  252. // 检查当前图层数量
  253. function checkLength() {
  254. var layerLength = $("#layerControlMenu .myLayers li").length;
  255. return layerLength;
  256. }
  257. function addZoom(minZoom, maxZoom, lat, lng, zoom, guid) {
  258. if (!isNaN(minZoom)) {
  259. ONEMAP.C.zoomArr.push(minZoom);
  260. }
  261. if (!isNaN(maxZoom)) {
  262. ONEMAP.C.zoomArr.push(maxZoom);
  263. }
  264. setZoom(lat, lng, zoom);
  265. // console.log(guid);
  266. if (guid) {
  267. var arr2w = {
  268. "name": guid,
  269. "minZoom": minZoom,
  270. "maxZoom": maxZoom
  271. }
  272. ONEMAP.C.zoomArr2w.push(arr2w);
  273. }
  274. // console.log(ONEMAP.C.zoomArr2w);
  275. }
  276. function deleteZoom(minZoom, maxZoom, guid) {
  277. if (minZoom) {
  278. ONEMAP.C.zoomArr.splice(jQuery.inArray(minZoom, ONEMAP.C.zoomArr), 1);
  279. ONEMAP.C.zoomArr.splice(jQuery.inArray(maxZoom, ONEMAP.C.zoomArr), 1);
  280. }
  281. if (guid) {
  282. // 删除一维数组对应
  283. var zoomArr2w = ONEMAP.C.zoomArr2w;
  284. for (var i = 0; i < zoomArr2w.length; i++) {
  285. if (guid == zoomArr2w[i].name) {
  286. ONEMAP.C.zoomArr.splice(jQuery.inArray(zoomArr2w[i].minZoom, ONEMAP.C.zoomArr), 1);
  287. ONEMAP.C.zoomArr.splice(jQuery.inArray(zoomArr2w[i].maxZoom, ONEMAP.C.zoomArr), 1);
  288. }
  289. }
  290. // 删除二维数组对应
  291. var newData = ONEMAP.C.zoomArr2w.filter(function (item) {
  292. return item['name'] != guid;
  293. });
  294. ONEMAP.C.zoomArr2w = newData;
  295. }
  296. // console.log(ONEMAP.C.zoomArr);
  297. // console.log(ONEMAP.C.zoomArr2w);
  298. setZoom();
  299. }
  300. function setZoom(clat, clng, czoom) {
  301. var mxZ = Math.max.apply(null, ONEMAP.C.zoomArr);
  302. var mnZ = Math.min.apply(null, ONEMAP.C.zoomArr);
  303. // console.log(mxZ);
  304. // console.log(mnZ);
  305. // console.log(clat);
  306. // console.log(ONEMAP.C.zoomArr);
  307. setTimeout(function () {
  308. map2DViewer.map.setZoomScope(mnZ, mxZ);
  309. }, 500)
  310. if (clat) {
  311. map23DControl.setView({
  312. center: {
  313. lat: clat,
  314. lng: clng
  315. },
  316. zoom: czoom
  317. })
  318. }
  319. }
  320. function zoomActions(action, minZoom, maxZoom, lat, lng, zoom, guid) {
  321. // console.log("act zoom")
  322. switch (action) {
  323. case 'add':
  324. return addZoom(minZoom, maxZoom, lat, lng, zoom, guid);
  325. break;
  326. case 'remove':
  327. return deleteZoom(minZoom, maxZoom, guid);
  328. break;
  329. }
  330. }
  331. /**
  332. * 注册订阅
  333. * @type {Function}
  334. * 推送:ONEMAP.C.publisher.publish(options,'moduleName::type');
  335. * 订阅:ONEMAP.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
  336. */
  337. function subscribe() {
  338. ONEMAP.C.publisher.subscribe(layoutResize, 'menuListClick');
  339. // ONEMAP.C.publisher.subscribe(remove, 'cleanMap');
  340. }
  341. /**
  342. * 取消订阅
  343. * @type {Function}
  344. * 取消订阅:ONEMAP.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
  345. */
  346. function unSubscribe() {
  347. }
  348. return ONEMAP.M.myLayers = {
  349. init: init,
  350. myLayerControl: myLayerControl,
  351. checkLength: checkLength,
  352. zoomActions: zoomActions
  353. }
  354. });