components_map_vue.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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_componentsMap_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-map props: map-options, access-token-->
  22. <sm-web-map :map-options="mapOptions"></sm-web-map>
  23. </div>
  24. <script>
  25. new Vue({
  26. el: '#main',
  27. data() {
  28. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  29. var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  30. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  31. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  32. return {
  33. // mapOptions是sm-map组件的props
  34. mapOptions: {
  35. container: 'map', // container id
  36. style: {
  37. "version": 8,
  38. "sources": {
  39. "raster-tiles": {
  40. "attribution": attribution,
  41. "type": "raster",
  42. "tiles": [host +
  43. '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
  44. ],
  45. "tileSize": 256
  46. }
  47. },
  48. "layers": [{
  49. "id": "simple-tiles",
  50. "type": "raster",
  51. "source": "raster-tiles",
  52. "minzoom": 0,
  53. "maxzoom": 22
  54. }]
  55. },
  56. center: [120.143, 30.236], // starting position
  57. zoom: 3 // starting zoom
  58. }
  59. };
  60. }
  61. })
  62. </script>
  63. </body>
  64. </html>