fuyuhang
/
Project_yhfu
镜像来自 http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_componentsTianditu_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%;">
    <div id="main">
      <sm-web-map :map-options="mapOptions"></sm-web-map>
    </div>
    <script>
      new Vue({
        el: '#main',
        data() {
          return {
            mapOptions: {
              center: [126.64318, 45.74141],
              zoom: 11,
              style: {
                version: 8,
                sources: {
                  baseLayer_img: {
                    type: 'raster',
                    tiles: [
                      'https://t0.tianditu.gov.cn/img_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}'
                    ],
                    tileSize: 256
                  },
                  baseLayer_vec: {
                    type: 'raster',
                    tiles: [
                      'https://t0.tianditu.gov.cn/vec_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=vec&tilematrix={z}&tilerow={y}&tilecol={x}'
                    ],
                    tileSize: 256
                  },
                  labelLayer_img: {
                    type: 'raster',
                    tiles: [
                      'https://t0.tianditu.gov.cn/cia_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}'
                    ],
                    tileSize: 256
                  },
                  labelLayer_vec: {
                    type: 'raster',
                    tiles: [
                      'https://t0.tianditu.gov.cn/cva_w/wmts?tk=1d109683f4d84198e37a38c442d68311&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cva&tilematrix={z}&tilerow={y}&tilecol={x}'
                    ],
                    tileSize: 256
                  }
                },
                layers: [
                  {
                    id: 'baseLayer_img',
                    type: 'raster',
                    source: 'baseLayer_img',
                    minzoom: 0,
                    maxzoom: 12
                  },
                  {
                    id: 'baseLayer_vec',
                    type: 'raster',
                    source: 'baseLayer_vec',
                    minzoom: 12,
                    maxzoom: 18
                  },
                  {
                    id: 'labelLayer_img',
                    type: 'raster',
                    source: 'labelLayer_img',
                    minzoom: 0,
                    maxzoom: 12
                  },
                  {
                    id: 'labelLayer_vec',
                    type: 'raster',
                    source: 'labelLayer_vec',
                    minzoom: 12,
                    maxzoom: 18
                  }
                ]
              },
              renderWorldCopies: false
            }
          };
        }
      });
    </script>
  </body>
</html>