fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title data-i18n='resources.title_componentsMap_Vue'></title>
  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  <style>
    #main {
      margin: 0 auto;
      width: 100%;
      height: 100%;
    }

  </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  <div id="main">
    <!-- 地图组件：sm-map  props: map-options, access-token-->
    <sm-web-map :map-options="mapOptions"></sm-web-map>
  </div>

  <script>
    new Vue({
      el: '#main',
      data() {
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

        return {
          // mapOptions是sm-map组件的props
          mapOptions: {
              container: 'map', // container id
              style: {
                "version": 8,
                "sources": {
                  "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [host +
                      '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
                    ],
                    "tileSize": 256
                  }
                },
                "layers": [{
                  "id": "simple-tiles",
                  "type": "raster",
                  "source": "raster-tiles",
                  "minzoom": 0,
                  "maxzoom": 22
                }]
              },
              center: [120.143, 30.236], // starting position
              zoom: 3 // starting zoom
            }
        };
      }
    })

  </script>
</body>

</html>