mapVLayerHoneycomb.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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_mapVLayerHoneycomb"></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. <script type="text/javascript" include="mapv" src="../../dist/classic/include-classic.js"></script>
  13. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  14. <script type="text/javascript">
  15. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  16. var map,
  17. baseLayer,
  18. mapvLayer,
  19. url = host + '/iserver/services/map-china400/rest/maps/China_4326';
  20. init();
  21. function init() {
  22. if (!document.createElement('canvas').getContext) {
  23. widgets.alert.showAlert(resources.msg_supportCanvas, false);
  24. return;
  25. }
  26. map = new SuperMap.Map('map', {
  27. controls: [
  28. new SuperMap.Control.Attribution(),
  29. new SuperMap.Control.ScaleLine(),
  30. new SuperMap.Control.Zoom(),
  31. new SuperMap.Control.Navigation({
  32. dragPanOptions: {
  33. enableKinetic: true
  34. }
  35. })
  36. ]
  37. });
  38. baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer(
  39. 'China',
  40. url,
  41. {
  42. transparent: true,
  43. cacheEnabled: true
  44. },
  45. {
  46. maxResolution: 'auto'
  47. }
  48. );
  49. baseLayer.events.on({
  50. layerInitialized: addLayer
  51. });
  52. }
  53. function addLayer() {
  54. map.addLayers([baseLayer]);
  55. map.setCenter(new SuperMap.LonLat(104, 34.7), 2);
  56. createMapVLayer();
  57. }
  58. //示例数据来源为百度MapV的加偏数据,iClient未做纠偏处理
  59. function createMapVLayer() {
  60. var randomCount = 1000;
  61. var data = [];
  62. var citys = [
  63. '北京',
  64. '天津',
  65. '上海',
  66. '重庆',
  67. '石家庄',
  68. '太原',
  69. '呼和浩特',
  70. '哈尔滨',
  71. '长春',
  72. '沈阳',
  73. '济南',
  74. '南京',
  75. '合肥',
  76. '杭州',
  77. '南昌',
  78. '福州',
  79. '郑州',
  80. '武汉',
  81. '长沙',
  82. '广州',
  83. '南宁',
  84. '西安',
  85. '银川',
  86. '兰州',
  87. '西宁',
  88. '乌鲁木齐',
  89. '成都',
  90. '贵阳',
  91. '昆明',
  92. '拉萨',
  93. '海口'
  94. ];
  95. // 构造数据
  96. while (randomCount--) {
  97. var cityCenter = mapv.utilCityCenter.getCenterByCityName(
  98. citys[parseInt(Math.random() * citys.length)]
  99. );
  100. data.push({
  101. geometry: {
  102. type: 'Point',
  103. coordinates: [
  104. cityCenter.lng - 2 + Math.random() * 4,
  105. cityCenter.lat - 2 + Math.random() * 4
  106. ]
  107. },
  108. count: 30 * Math.random()
  109. });
  110. }
  111. var dataSet = new mapv.DataSet(data);
  112. var options = {
  113. fillStyle: 'rgba(55, 50, 250, 0.8)',
  114. shadowColor: 'rgba(255, 250, 50, 1)',
  115. shadowBlur: 20,
  116. max: 100,
  117. size: 50,
  118. unit: 'px', // unit可选值['px', 'm'],默认值为'px'
  119. label: {
  120. show: true,
  121. fillStyle: 'white'
  122. },
  123. globalAlpha: 0.5,
  124. gradient: {
  125. 0.25: 'rgb(0,0,255)',
  126. 0.55: 'rgb(0,255,0)',
  127. 0.85: 'yellow',
  128. 1.0: 'rgb(255,0,0)'
  129. },
  130. draw: 'honeycomb'
  131. };
  132. mapvLayer = new SuperMap.Layer.MapVLayer('mapv', {
  133. dataSet: dataSet,
  134. options: options
  135. });
  136. map.addLayer(mapvLayer);
  137. setTimeout(function() {
  138. openToolTip(resources.text_iClient, map.getCenter());
  139. }, 1000);
  140. }
  141. function openToolTip(text, latLng) {
  142. var contentHTML = "<div style='width:216px; font-size:12px;font-weight:bold ; opacity: 0.8'>";
  143. contentHTML += text;
  144. contentHTML += '</div>';
  145. framedCloud = new SuperMap.Popup.FramedCloud(
  146. 'chicken',
  147. latLng,
  148. null,
  149. contentHTML,
  150. null,
  151. true,
  152. null,
  153. true
  154. );
  155. map.addPopup(framedCloud);
  156. }
  157. </script>
  158. </body>
  159. </html>