components_layerManager_vue.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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_componentsLayerManager_vue"></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <script
  11. include="iclient-mapboxgl-vue,mapbox-gl-enhance"
  12. src="../../dist/mapboxgl/include-mapboxgl.js"
  13. ></script>
  14. <style>
  15. #main {
  16. margin: 0 auto;
  17. width: 100%;
  18. height: 100%;
  19. }
  20. .sm-component-layer-manager .sm-component-tree {
  21. font-size: 12px;
  22. }
  23. </style>
  24. </head>
  25. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  26. <div id="main">
  27. <sm-web-map :map-options="mapOptions">
  28. <!-- 图层管理组件:sm-layer-manager -->
  29. <sm-layer-manager
  30. position="top-left"
  31. :collapsed="false"
  32. :layers="layers"
  33. :default-expand-all="true"
  34. ></sm-layer-manager>
  35. </sm-web-map>
  36. </div>
  37. <script>
  38. new Vue({
  39. el: '#main',
  40. data() {
  41. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  42. var attribution =
  43. "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  44. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  45. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  46. return {
  47. layers: [
  48. {
  49. title: '直辖市',
  50. children: [
  51. {
  52. title: '上海',
  53. mapInfo: {
  54. serverUrl: 'https://www.supermapol.com/',
  55. mapId: 394538195,
  56. layerFilter: function(layer) {
  57. if (layer.name === '上海_县级行政区划图@公众数据') {
  58. return true;
  59. }
  60. return false;
  61. }
  62. }
  63. },
  64. {
  65. title: '天津',
  66. mapInfo: {
  67. serverUrl: 'https://www.supermapol.com/',
  68. mapId: 849848633,
  69. layerFilter: function(layer) {
  70. if (layer.name === '天津_县级行政区划图@公众数据') {
  71. return true;
  72. }
  73. return false;
  74. }
  75. }
  76. },
  77. {
  78. title: '北京',
  79. mapInfo: {
  80. serverUrl: 'https://www.supermapol.com/',
  81. mapId: 1837435007,
  82. layerFilter: function(layer) {
  83. if (layer.name === '北京_县级行政区划图@公众数据') {
  84. return true;
  85. }
  86. return false;
  87. }
  88. }
  89. },
  90. {
  91. title: '重庆',
  92. mapInfo: {
  93. serverUrl: 'https://www.supermapol.com/',
  94. mapId: 1589273415,
  95. layerFilter: function(layer) {
  96. if (layer.name === '重庆_县级行政区划图@公众数据') {
  97. return true;
  98. }
  99. return false;
  100. }
  101. }
  102. }
  103. ]
  104. }
  105. ],
  106. mapOptions: {
  107. container: 'map', // container id
  108. style: {
  109. version: 8,
  110. sources: {
  111. 'raster-tiles': {
  112. attribution: attribution,
  113. type: 'raster',
  114. tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark'],
  115. rasterSource: 'iserver',
  116. tileSize: 256
  117. }
  118. },
  119. layers: [
  120. {
  121. id: 'simple-tiles',
  122. type: 'raster',
  123. source: 'raster-tiles',
  124. minzoom: 0,
  125. maxzoom: 22
  126. }
  127. ]
  128. },
  129. center: [113.91814841850453, 34.946821449424775], // starting position
  130. zoom: 5.39 // starting zoom
  131. }
  132. };
  133. }
  134. });
  135. </script>
  136. </body>
  137. </html>