plot_graphicLayer.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/html">
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_plotSymbolPerformance"></title>
  9. </head>
  10. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  11. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  12. <div id="toolbar" class="panel panel-primary" style=" position: absolute;top: 10px;right: 10px;text-align: center;z-index: 2000;border-radius: 4px;">
  13. <div class="panel-heading" id="panelheading">
  14. <h5 class="panel-title text-center" data-i18n="resources.title_plotSymbolPerformance" style=" font-size: 16px;color: #ffffff;"></h5>
  15. </div>
  16. <div class="panel-body content" id="panelbodycontent">
  17. <div class="input-group" style="margin-top:15px; margin-left: 10px; margin-bottom: 10px;">
  18. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_addSamePlot" onclick="sameDotSymbol()">&nbsp;&nbsp;
  19. <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_addDifferentPlot" onclick="differentDotSymbol()">&nbsp;&nbsp;
  20. </div>
  21. </div>
  22. </div>
  23. <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
  24. <script type="text/javascript" include="iclient-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
  25. <script type="text/javascript">
  26. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  27. var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
  28. var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
  29. var map;
  30. map = L.map('map', {
  31. preferCanvas: true,
  32. crs: L.CRS.EPSG4326,
  33. center: [0, 0],
  34. maxZoom: 18,
  35. zoom: 3
  36. });
  37. L.supermap.tiledMapLayer(url).addTo(map);
  38. L.supermap.plotting.editControl().addTo(map);
  39. var graphicLayer = L.supermap.plotting.graphicLayer();
  40. graphicLayer.addTo(map);
  41. sameDotSymbol();
  42. function sameDotSymbol(){
  43. graphicLayer.removeAllGraphics();
  44. var count = 10000;
  45. var features = [];
  46. var e = 30;
  47. var params = new SuperMap.GetSymbolInfoParameters({
  48. libID: 421,
  49. code: 10100
  50. });
  51. L.supermap.symbolInfoService(serverUrl).getSymbolInfo(params, function(result){
  52. for (var i = 0; i < count; ++i) {
  53. var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
  54. var dotSymbol = L.supermap.plotting.PlottingObject.createSymbol(421, 10100, L.latLng(coordinates[0], coordinates[1]), {serverUrl:serverUrl,symbolData: result.result, textContent: "常住人口"}, null, null);
  55. features.push(dotSymbol);
  56. }
  57. graphicLayer.addFeatures(features);
  58. }, null);
  59. }
  60. function differentDotSymbol(){
  61. graphicLayer.removeAllGraphics();
  62. var count = 5000;
  63. var features = [];
  64. var e = 30;
  65. var randomCode = [9, 80101, 80102, 80103, 80104, 80105, 80106, 80107, 80108, 80109];
  66. var randomSymbolData = [];
  67. var symbolDataIndex = 0;
  68. function getSymbolInfoSuccess(result){
  69. randomSymbolData.push(result.result);
  70. symbolDataIndex++;
  71. if(symbolDataIndex < randomCode.length){
  72. var params = new SuperMap.GetSymbolInfoParameters({
  73. libID: 421,
  74. code: randomCode[symbolDataIndex]
  75. });
  76. L.supermap.symbolInfoService(serverUrl).getSymbolInfo(params, getSymbolInfoSuccess, null);
  77. } else {
  78. for(var i = 0; i < count; ++i){
  79. var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
  80. var randomIndex = Math.floor(10 * Math.random());
  81. var dotSymbol = L.supermap.plotting.PlottingObject.createSymbol(421, randomCode[randomIndex], L.latLng(coordinates[0], coordinates[1]), {serverUrl:serverUrl,symbolData: randomSymbolData[randomIndex]}, null, null);
  82. features.push(dotSymbol);
  83. }
  84. graphicLayer.addFeatures(features);
  85. }
  86. }
  87. var params = new SuperMap.GetSymbolInfoParameters({
  88. libID: 421,
  89. code: randomCode[symbolDataIndex]
  90. });
  91. L.supermap.symbolInfoService(serverUrl).getSymbolInfo(params, getSymbolInfoSuccess, null);
  92. }
  93. $(document).ready(function(){
  94. $('#panelheading').click(function(){
  95. $('#panelbodycontent').toggle();
  96. });
  97. });
  98. </script>
  99. </body>
  100. </html>