fuyuhang
/
Project_yhfu
réplica de http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_componentsTianditu_home_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>
      .container {
        margin: 0 auto;
        width: 100%;
        height: 100%;
      }
      .nav-header {
        width: 100%;
        height: 63px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        z-index: 12;
        transition: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
        border-collapse: separate;
        display: flex;
        align-items: center;
      }
      .nav-header .logo {
        display: block;
        width: 80px;
        height: 40px;
        margin: 0 20px;
        float: left;
        cursor: pointer;
      }
      .nav-header .logo-image {
        width: 100%;
        height: 100%;
      }
      .nav-header .imagesLink {
        list-style: none;
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 15px;
        margin-bottom: 0;
      }
      .nav-header .imagesLink li {
        display: inline-block;
        padding: 0 10px;
      }
      .nav-header .imagesLink li a {
        color: #333;
      }
      .nav-header .imagesLink li a:hover {
        color: #3385ff;
      }

      #main {
        width: 100%;
        height: calc(100% - 63px);
      }

      .mapboxgl-ctrl button:not(:disabled):hover {
        background-color: #269ff0;
      }
    </style>
  </head>

  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div class="container">
      <!-- 导航 -->
      <div class="nav-header">
        <a href="https://www.tianditu.gov.cn/" class="logo"
          ><img class="logo-image" src="../img/tianditu/tianditu.png" /></a>
        <ul class="imagesLink">
          <li><a href="https://www.tianditu.gov.cn/" target="_blank">首页</a></li>
          <li><a href="https://zhfw.tianditu.gov.cn/" target="_blank">专题图层</a></li>
          <li><a href="http://lbs.tianditu.gov.cn/" target="_blank">开发资源</a></li>
          <li><a href="https://app.tianditu.gov.cn/" target="_blank">典型应用</a></li>
          <li><a href="https://service.tianditu.gov.cn/" target="_blank">服务资源</a></li>
          <li><a href="http://yjfw.tianditu.gov.cn/" target="_blank">应急服务</a></li>
        </ul>
      </div>
      <!-- 天地图及其子组件 -->
      <div id="main">
        <sm-web-map :map-options="mapOptions">
          <!-- 天地图路线查询组件: sm-tdt-route
          天地图搜索组件：sm-tdt-search
          天地图切换组件：sm-tdt-map-switcher-->
          <sm-tdt-route position="top-right" :data="{tk:tk}" :collapsed="true"></sm-tdt-route>
          <sm-tdt-search position="top-right" :data="{tk:tk}" :collapsed="true"></sm-tdt-search>
          <sm-tdt-map-switcher position="top-right" :data="{tk:tk}" :collapsed="true"></sm-tdt-map-switcher>
        </sm-web-map>
      </div>
    </div>

    <script>
      new Vue({
        el: '#main',
        data() {
          return {
            tk: '1d109683f4d84198e37a38c442d68311',
            mapOptions: {
              center: [126.64318, 45.74141],
              zoom: 11,
              style: {
                version: 8,
                sources: {
                  baseLayer: {
                    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
                  },
                  labelLayer: {
                    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
                  }
                },
                layers: [
                  {
                    id: 'baseLayer',
                    type: 'raster',
                    source: 'baseLayer',
                    minzoom: 0,
                    maxzoom: 18
                  },
                  {
                    id: 'labelLayer',
                    type: 'raster',
                    source: 'labelLayer',
                    minzoom: 0,
                    maxzoom: 18
                  }
                ]
              },
              renderWorldCopies: false
            }
          };
        }
      });
    </script>
  </body>
</html>