components_openfile_vue.html 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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_componentsOpenFile_Vue"></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <script include="xlsx,shapefile,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">
  22. <sm-open-file :layer-style="layerStyle"></sm-open-file>
  23. </sm-web-map>
  24. </div>
  25. <script>
  26. new Vue({
  27. el: "#main",
  28. data() {
  29. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  30. var attribution =
  31. "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  32. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  33. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  34. return {
  35. layerStyle: {
  36. line: new SuperMap.Components.commontypes.LineStyle(),
  37. circle: new SuperMap.Components.commontypes.CircleStyle(),
  38. fill: new SuperMap.Components.commontypes.FillStyle()
  39. },
  40. mapOptions: {
  41. container: "map", // container id
  42. style: {
  43. version: 8,
  44. sources: {
  45. "raster-tiles": {
  46. attribution: attribution,
  47. type: "raster",
  48. tiles: [
  49. host +
  50. "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}"
  51. ],
  52. tileSize: 256
  53. }
  54. },
  55. layers: [
  56. {
  57. id: "simple-tiles",
  58. type: "raster",
  59. source: "raster-tiles",
  60. minzoom: 0,
  61. maxzoom: 22
  62. }
  63. ]
  64. },
  65. center: [120.143, 30.236],
  66. zoom: 3
  67. }
  68. };
  69. }
  70. });
  71. </script>
  72. </body>
  73. </html>