mapVLayerHoneycomb.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. <script type="text/javascript" src="../js/include-web.js"></script>
  10. </head>
  11. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  12. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  13. <script type="text/javascript" include="mapv" src="../../dist/leaflet/include-leaflet.js"></script>
  14. <script type="text/javascript">
  15. var map = L.map('map', {
  16. center: [32, 109],
  17. zoom: 4
  18. });
  19. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  20. var url = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
  21. L.supermap.tiledMapLayer(url).addTo(map);
  22. loadData();
  23. function loadData() {
  24. var randomCount = 1000;
  25. var data = [];
  26. var citys = [
  27. '北京',
  28. '天津',
  29. '上海',
  30. '重庆',
  31. '石家庄',
  32. '太原',
  33. '呼和浩特',
  34. '哈尔滨',
  35. '长春',
  36. '沈阳',
  37. '济南',
  38. '南京',
  39. '合肥',
  40. '杭州',
  41. '南昌',
  42. '福州',
  43. '郑州',
  44. '武汉',
  45. '长沙',
  46. '广州',
  47. '南宁',
  48. '西安',
  49. '银川',
  50. '兰州',
  51. '西宁',
  52. '乌鲁木齐',
  53. '成都',
  54. '贵阳',
  55. '昆明',
  56. '拉萨',
  57. '海口'
  58. ];
  59. // 构造数据
  60. while (randomCount--) {
  61. var cityCenter = mapv.utilCityCenter.getCenterByCityName(
  62. citys[parseInt(Math.random() * citys.length)]
  63. );
  64. data.push({
  65. geometry: {
  66. type: 'Point',
  67. coordinates: [
  68. cityCenter.lng - 2 + Math.random() * 4,
  69. cityCenter.lat - 2 + Math.random() * 4
  70. ]
  71. },
  72. count: 30 * Math.random()
  73. });
  74. }
  75. var dataSet = new mapv.DataSet(data);
  76. var options = {
  77. fillStyle: 'rgba(55, 50, 250, 0.8)',
  78. shadowColor: 'rgba(255, 250, 50, 1)',
  79. shadowBlur: 20,
  80. max: 100,
  81. size: 50,
  82. unit: 'px', // unit可选值['px', 'm'],默认值为'px'
  83. label: {
  84. show: true,
  85. fillStyle: 'white'
  86. },
  87. globalAlpha: 0.5,
  88. gradient: { 0.25: 'rgb(0,0,255)', 0.55: 'rgb(0,255,0)', 0.85: 'yellow', 1.0: 'rgb(255,0,0)' },
  89. draw: 'honeycomb'
  90. };
  91. //创建MapV图层
  92. L.supermap.mapVLayer(dataSet, options).addTo(map);
  93. }
  94. </script>
  95. </body>
  96. </html>