plot_querySymbolLib.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_querySymbolLib"></title>
  9. </head>
  10. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  11. <div id="toolbar" class="panel panel-primary" style="position: absolute;top: 10px;right: 10px;text-align: center;z-index: 9999;border-radius: 4px;">
  12. <div class='panel-heading' id="panelheading">
  13. <h5 class='panel-title text-center' data-i18n="resources.title_querySymbolLib"></h5></div>
  14. <div class='panel-body content' id="panelbodycontent">
  15. <div class='panel'>
  16. <div class='input-group' style="width:230px">
  17. <span class='input-group-addon' data-i18n="resources.text_keyword"></span>
  18. <input class='form-control' id='queryCriteria' value=''/>
  19. </div>
  20. </div>
  21. <input type="button" data-i18n="[value]resources.btn_query" onclick="querySymbolLib()"/>&nbsp;
  22. <input type="button" data-i18n="[value]resources.text_input_value_modify" onclick="editSymbol()"/>&nbsp;
  23. <input type="button" data-i18n="[value]resources.btn_clear" onclick="clearLayers()"/>&nbsp;
  24. <input type="button" data-i18n="[value]resources.btn_cancelMarker" onclick="PlottingDrawCancel()"/>
  25. </div>
  26. <div id="popupWin" class="popupWindow" style=" background: #FFF;z-index: 9999;display: block;">
  27. <div class='panel'>
  28. <div class='input-group'>
  29. <div class="winTitle" style=" margin-left: 20px;font-size: 14px;font-weight: bold;">
  30. <span class="title_left">查询结果:</span>
  31. </div>
  32. </div>
  33. </div>
  34. <div id="queryResult" class="winContent" style=" padding: 5px;overflow-y: auto;height: 220px;"></div>
  35. </div>
  36. </div>
  37. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  38. <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
  39. <script type="text/javascript" include="iclient-leaflet-css,iclient-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
  40. <script type="text/javascript">
  41. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  42. var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
  43. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  44. var map;
  45. map = L.map('map', {
  46. preferCanvas: true,
  47. crs: L.CRS.EPSG4326,
  48. center: [35,104],
  49. maxZoom: 18,
  50. zoom: 3
  51. });
  52. L.supermap.tiledMapLayer(url).addTo(map);
  53. var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
  54. plottingLayer.addTo(map);
  55. var drawControl = L.supermap.plotting.drawControl(plottingLayer);
  56. drawControl.addTo(map);
  57. var editControl = L.supermap.plotting.editControl();
  58. editControl.addTo(map);
  59. var plotting = L.supermap.plotting.getControl(map, serverUrl);
  60. var symbolLibManager,loadSymbolComplete = false;
  61. function loadSymbolLib(){
  62. symbolLibManager = plotting.getSymbolLibManager();
  63. symbolLibManager.on(SuperMap.Plot.Event.initializecompleted, initializeCompleted);
  64. symbolLibManager.initializeAsync();
  65. }
  66. function initializeCompleted(){
  67. loadSymbolComplete = true;
  68. }
  69. function querySymbolLib() {
  70. drawControl.handler.disable();
  71. if (!loadSymbolComplete) {
  72. return;
  73. }
  74. var key = document.getElementById("queryCriteria").value;
  75. if ("" === key) {
  76. return;
  77. }
  78. var result = [];
  79. for (var i = 0; i < symbolLibManager.getSymbolLibNumber(); i++) {
  80. var symbolLib = symbolLibManager.getSymbolLibByIndex(i);
  81. if (null !== symbolLib) {
  82. var tempResult = symbolLib.querySymbolbyKey(key);
  83. for (var j = 0; j < tempResult.length; j++) {
  84. result.push(tempResult[j]);
  85. }
  86. }
  87. }
  88. showResult(result);
  89. }
  90. function showResult(queryResult) {
  91. document.all.queryResult.innerHTML = "";
  92. if (0 === queryResult.length) {
  93. return;
  94. }
  95. //获取选中的对象
  96. var container = document.getElementById("queryResult");
  97. var table = document.createElement("table");
  98. var drawNodeClick = function () {
  99. drawControl.handler.disable();
  100. drawControl.handler.libID = this.libID;
  101. drawControl.handler.code = this.symbolCode;
  102. drawControl.handler.serverUrl = this.serverUrl;
  103. drawControl.handler.enable();
  104. };
  105. var i = 0;
  106. var rowLength = (queryResult.length % 3 === 0) ? queryResult.length / 3 : queryResult.length / 3 + 1;
  107. for (var j = 0; j < rowLength; j++) {
  108. var tr = document.createElement("tr");
  109. for (var k = 0; k < 3; k++) {
  110. if (queryResult[i]) {
  111. //存储菜单信息
  112. var td = document.createElement("td");
  113. var drawNode = document.createElement("div");
  114. drawNode.onclick = drawNodeClick;
  115. drawNode.style.textAlign = "center";
  116. //设置标号的字体居中显示
  117. drawNode.style.color = "#000";
  118. //设置标号画上的id属性
  119. drawNode.id = queryResult[i].libID + "_" + queryResult[i].symbolCode;
  120. drawNode.libID = queryResult[i].libID;
  121. drawNode.symbolCode = queryResult[i].symbolCode;
  122. drawNode.serverUrl = serverUrl;
  123. var img = document.createElement("img");
  124. //查询symbol的title
  125. img.title = queryResult[i].symbolName + "_" + queryResult[i].symbolCode;
  126. img.src = queryResult[i].icon;
  127. //文本
  128. var text = document.createElement("div");
  129. //标号的SymbolName
  130. text.innerHTML = queryResult[i].symbolName;
  131. drawNode.appendChild(img);
  132. drawNode.appendChild(text);
  133. td.appendChild(drawNode);
  134. tr.appendChild(td);
  135. }
  136. i++;
  137. }
  138. table.appendChild(tr);
  139. }
  140. container.appendChild(table);
  141. }
  142. function editSymbol(){
  143. if (editControl._editMode === SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE) {
  144. editControl.setEditMode(SuperMap.Plot.EditMode.EDITCONTROLPOINT);
  145. } else {
  146. editControl.setEditMode(SuperMap.Plot.EditMode.EDITCIRCUMRECTANGLE);
  147. }
  148. }
  149. function clearLayers(){
  150. plottingLayer.removeAllFeatures();
  151. }
  152. function PlottingDrawCancel(){
  153. drawControl.handler.disable();
  154. }
  155. window.onload = function(){
  156. loadSymbolLib();
  157. };
  158. $(document).ready(function(){
  159. $('#panelheading').click(function(){
  160. $('#panelbodycontent').toggle();
  161. $('#popupWin').toggle();
  162. });
  163. });
  164. </script>
  165. </body>
  166. </html>