components_deckgl_vue.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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_componentsDeckGL_Vue"></title>
  9. <script type="text/javascript" include="vue,jquery,papaparse,widgets" src="../js/include-web.js"></script>
  10. <script include="deck,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  11. <style>
  12. #main {
  13. margin: 0 auto;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. </style>
  18. </head>
  19. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  20. <div id="main">
  21. <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
  22. <sm-deckgl-layer layer-type="hexagon-layer" :options="deckglOptions"></sm-deckgl-layer>
  23. </sm-web-map>
  24. </div>
  25. <script>
  26. widgets.loader.showLoader('data loading...');
  27. var _this = this,
  28. popup;
  29. $.get('../data/deck.gl/strees_data.csv', function(csvstr) {
  30. widgets.loader.removeLoader();
  31. // 构造数据
  32. var features = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
  33. var deckglOptions = {
  34. data: features.data,
  35. props: {
  36. extruded: true,
  37. radius: 55,
  38. autoHighlight: true,
  39. upperPercentile: 99,
  40. coverage: 0.8,
  41. elevationScale: 400,
  42. colorRange: [
  43. [43, 30, 61, 255],
  44. [56, 60, 101, 255],
  45. [62, 95, 126, 255],
  46. [73, 131, 138, 255],
  47. [94, 162, 141, 255],
  48. [130, 187, 146, 255],
  49. [174, 206, 161, 255],
  50. [214, 222, 191, 255],
  51. ],
  52. opacity: 0.8,
  53. // lightSettings 光照配置参数,配置三维光照效果,
  54. lightSettings: {
  55. lightsPosition: [-122.5, 37.7, 3000, -122.2, 37.9, 3000], // 指定为`[x,y,z]`的光在平面阵列中的位置
  56. ambientRatio: 0.2, //光照的环境比例
  57. diffuseRatio: 0.5, //光的漫反射率
  58. specularRatio: 0.3, //光的镜面反射率
  59. lightsStrength: [1.0, 0.0, 2.0, 0.0], //平面阵列中指定为“[x,y]`的灯的强度。 长度应该是`2 x numberOfLights`
  60. numberOfLights: 4, //光照值
  61. },
  62. //如需了解其他配置详情,请查看 DeckglLayer api
  63. onHover: function(feature) {
  64. if (!popup) {
  65. popup = new mapboxgl.Popup({
  66. anchor: 'bottom',
  67. closeButton: false,
  68. offset: {
  69. bottom: [0, -10],
  70. },
  71. });
  72. }
  73. if (!feature.object) {
  74. popup.remove();
  75. return;
  76. }
  77. //+" "+feature.lngLat
  78. popup.setHTML('Point Count: ' + feature.object.points.length);
  79. popup.setLngLat(_this.map.unproject([feature.x, feature.y]));
  80. popup.addTo(_this.map);
  81. },
  82. },
  83. callback: {
  84. getPosition: function(feature) {
  85. if (!feature.latitude || !feature.longitude) {
  86. return [0, 0];
  87. }
  88. return [Number(feature.longitude), Number(feature.latitude)];
  89. },
  90. },
  91. };
  92. new Vue({
  93. el: '#main',
  94. data() {
  95. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  96. var attribution =
  97. "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  98. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  99. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  100. return {
  101. deckglOptions: deckglOptions,
  102. mapOptions: {
  103. container: 'map', // container id
  104. style: {
  105. version: 8,
  106. sources: {
  107. 'raster-tiles': {
  108. attribution: attribution,
  109. type: 'raster',
  110. tiles: [
  111. host +
  112. '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
  113. ],
  114. tileSize: 256,
  115. },
  116. },
  117. layers: [
  118. {
  119. id: 'simple-tiles',
  120. type: 'raster',
  121. source: 'raster-tiles',
  122. minzoom: 0,
  123. maxzoom: 22,
  124. },
  125. ],
  126. },
  127. center: [-122.430844, 37.772276],
  128. zoom: 12,
  129. pitch: 60,
  130. bearing: 36,
  131. },
  132. };
  133. },
  134. methods: {
  135. mapIsLoaded(e) {
  136. _this.map = e.map;
  137. },
  138. },
  139. });
  140. });
  141. </script>
  142. </body>
  143. </html>