base.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. var rule = document.querySelector('.rule'); // 分包规则
  2. var levelSelect = document.querySelectorAll('.level select'); // 分包级别(总)
  3. var diyBtn = document.querySelector('.diyRules button'); // 确定自定义规则
  4. var showGridBtn = document.querySelector('.showGrid'); // 显示网格
  5. var showRangeBtn = document.querySelector('.showRange'); // 显示空间范围
  6. var rangeInput = document.querySelectorAll('.range input'); // 显示空间范围
  7. var generateListBtn = document.querySelector('.generateList'); // 生成包名列表
  8. var activeBag = [[0,9,0],[10,14,7],[15,19,11]]; // 旧分包规则
  9. var diyRules,scale,mz; // 自定义规则等
  10. var mCrd = new Array(); // 包名列表参数
  11. rule.onchange = function(){
  12. var grade = rule.options[rule.selectedIndex].value; // 当前所选规则
  13. for(var i=0;i<levelSelect.length;i++){
  14. levelSelect[i].classList.remove("active");
  15. }
  16. switch(parseInt(grade)){
  17. case 0:
  18. document.querySelector('.oldLevel').classList.add("active");
  19. document.querySelector('.diyRules').style.display = "none";
  20. document.querySelector('.level').style.display = "block";
  21. activeBag = [[0,9,0],[10,14,7],[15,19,11]]; // 旧分包规则
  22. diyRules = "";
  23. break;
  24. case 1:
  25. document.querySelector('.newLevel').classList.add("active");
  26. document.querySelector('.diyRules').style.display = "none";
  27. document.querySelector('.level').style.display = "block";
  28. activeBag = [[0,7,0],[8,11,3],[12,15,7],[16,19,11],[20,22,15]]; // 新分包规则
  29. diyRules = "";
  30. break;
  31. case 2:
  32. document.querySelector('.diyRules input').value = "";
  33. document.querySelector('.diyRules').style.display = "inline-block";
  34. document.querySelector('.level').style.display = "none";
  35. activeBag = document.querySelector('.diyRules input').value.replace(/[\ |\[|\]]/g,""); // 自定义分包规则
  36. statu = 2;
  37. break;
  38. }
  39. }
  40. diyBtn.onclick = function(){
  41. diyRules = document.querySelector('.diyRules input').value; // 自定义规则
  42. if(diyRules == ""){
  43. alert("请输入自定义规则");
  44. }
  45. else{
  46. var checkStatu = true;
  47. diyRules = diyRules.replace(/[\ |\[|\]]/g,"").split(",");
  48. console.log("diyRules:"+diyRules);
  49. if(diyRules.length % 3 != 0){
  50. alert("自定义规则位数不正确或格式有误,请检查");
  51. checkStatu = false;
  52. }
  53. for(var j=0;j<diyRules.length;j++){
  54. if(isNaN(diyRules[j])){
  55. checkStatu = false;
  56. alert("自定义规则有误,请检查格式");
  57. break;
  58. }
  59. }
  60. for(var m=1;m<diyRules.length-2;m+=3){
  61. if(diyRules[m]-diyRules[m+2] != -1){
  62. checkStatu = false;
  63. alert("自定义规则分包有误,请检查数值");
  64. break;
  65. }
  66. }
  67. if(checkStatu){
  68. document.querySelector('.diyLevel').innerHTML = "";
  69. for(var i=2;i<diyRules.length;i+=3){
  70. var opt = document.createElement('option');
  71. var t = diyRules[i-2]+"-"+diyRules[i-1]+"-"+diyRules[i];
  72. opt.innerHTML = t; // 新级别名称
  73. opt.value = diyRules[i]; // 赋值value方便显示
  74. document.querySelector('.diyLevel').appendChild(opt);
  75. }
  76. document.querySelector('.diyLevel').classList.add("active");
  77. document.querySelector('.level').style.display = "block";
  78. }
  79. }
  80. }
  81. showGridBtn.onclick = function(){
  82. var levelAct = document.querySelector('.level .active');
  83. z = levelAct.options[levelAct.selectedIndex].value; // 所选分包级别
  84. for(var i=0;i<activeBag.length;i++){
  85. if(activeBag[i][2] == z){
  86. a = parseInt(activeBag[i][0]);
  87. b = parseInt(activeBag[i][1]);
  88. }
  89. }
  90. if(diyRules != "" && diyRules != undefined){
  91. console.log(diyRules);
  92. activeBag = diyRules;
  93. if(diyRules == undefined){
  94. alert("请输入分包范围");
  95. }
  96. for(var i=2;i<activeBag.length;i+=3){
  97. if(activeBag[i] == z){
  98. a = parseInt(activeBag[i-2]);
  99. b = parseInt(activeBag[i-1]);
  100. }
  101. }
  102. }
  103. console.log("a:"+a);
  104. console.log("b:"+b);
  105. // console.log("base:"+z);
  106. scale = L.control.createTilePackage(z,a,b);
  107. }
  108. showRangeBtn.onclick = function(){
  109. var levelAct = document.querySelector('.level .active');
  110. var z = levelAct.options[levelAct.selectedIndex].value; // 所选分包级别
  111. var crds = new Array(); // 传入的坐标
  112. var stat = true;
  113. var lng1 = parseFloat(document.querySelector('.lng1').value);
  114. var lng2 = parseFloat(document.querySelector('.lng2').value);
  115. var lat1 = parseFloat(document.querySelector('.lat1').value);
  116. var lat2 = parseFloat(document.querySelector('.lat2').value);
  117. for(var i=0;i<rangeInput.length;i++){
  118. if(rangeInput[i].value == "" || isNaN(rangeInput[i].value)){
  119. alert("请输入完整坐标(数字)");
  120. crds = "";
  121. stat = false;
  122. break;
  123. }
  124. }
  125. if(stat){
  126. if(lng1 > 180 || lng1 < -180 || lng2 > 180 || lng2 < -180){
  127. alert("请输入正确的经度范围,合法取值范围为:经度[-180,180]");
  128. stat = false;
  129. }
  130. else if(lng2 <= lng1){
  131. alert("请输入正确的经度范围,右下角经度须大于左上角经度");
  132. stat = false;
  133. }
  134. else if(lat1 > 90 || lat1 < -90 || lat2 > 90 || lat2 < -90){
  135. alert("请输入正确的纬度范围,合法取值范围为:纬度[-90,90]");
  136. stat = false;
  137. }
  138. else if(lat1 <= lat2){
  139. alert("请输入正确的纬度范围,左上角纬度必须大于右下角纬度");
  140. stat = false;
  141. }
  142. else{
  143. crds.push(lng1,lng2,lat1,lat2);
  144. }
  145. }
  146. if(crds.length == 4){
  147. L.control.fitBds(crds,z);
  148. }
  149. // console.log(crds);
  150. }
  151. generateListBtn.onclick = function(){
  152. if(mCrd == ""){
  153. alert("请先显示空间范围");
  154. }
  155. else{
  156. L.control.showNameList(mCrd,mz);
  157. }
  158. }