components_raster_vue.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  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_componentsRaster_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. </style>
  21. </head>
  22. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  23. <div id="main">
  24. <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="1329428269">
  25. <sm-raster-tile-layer v-bind="rasteLayerOptions"></sm-raster-tile-layer>
  26. <sm-layer-list position="top-left"></sm-layer-list>
  27. </sm-web-map>
  28. </div>
  29. <script>
  30. new Vue({
  31. el: '#main',
  32. data() {
  33. var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
  34. return {
  35. rasteLayerOptions: {
  36. layerId: resources.text_myRasterLayer,
  37. opacity: 0.8,
  38. visible: true,
  39. mapUrl: host + '/iserver/services/map-Population/rest/maps/PopulationDistribution',
  40. },
  41. };
  42. },
  43. });
  44. </script>
  45. </body>
  46. </html>