components_attributes_vue.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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_attributes_Vue"></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <script include="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 style="height: 500px" server-url="https://www.supermapol.com/" map-id="505367620"></sm-web-map>
  22. <div style="position: relative; height: 400px; width: 100%">
  23. <sm-attributes layer-name="全国671个气象站观测数据" :field-configs="fieldConfigs"></sm-attributes>
  24. </div>
  25. </div>
  26. <script>
  27. new Vue({
  28. el: '#main',
  29. data() {
  30. return {
  31. fieldConfigs: [
  32. { value: '平均最低气温_Num', visible: false },
  33. { value: 'SmID', visible: false },
  34. {
  35. value: '站台',
  36. visible: true,
  37. filters: [
  38. { text: '塔城', value: '塔城' },
  39. { text: '大同', value: '大同' },
  40. { text: '石家庄', value: '石家庄' }
  41. ],
  42. onFilter: (value, record) => record['站台'].indexOf(value) === 0
  43. },
  44. {
  45. value: '省份',
  46. visible: true,
  47. onFilter: (value, record) => record['省份'].indexOf(value) === 0,
  48. scopedSlots: {
  49. filterDropdown: 'filterDropdown',
  50. filterIcon: 'filterIcon',
  51. customRender: 'customRender'
  52. }
  53. },
  54. { value: '海拔', visible: false },
  55. { value: '最高气温_Num', visible: false },
  56. { value: '最高气温', visible: false },
  57. { value: '最高七天气温_Num', visible: false },
  58. { value: '最热七天气温', visible: true, defaultSortOrder: 'descend' },
  59. { value: '最低气温_Num', visible: false },
  60. { value: '最低气温', visible: false },
  61. { value: '年均降雨_Num', visible: false },
  62. { value: 'lon', visible: true, title: '经度', width: 250 },
  63. { value: 'lat', visible: true, title: '纬度', width: 250 }
  64. ]
  65. };
  66. }
  67. });
  68. </script>
  69. </body>
  70. </html>