vue+cesium影像切换

最近要做Cesium项目，这几天环境配置也是整的头疼，好在终于入门了，新手学习，不足之处还望指导!

 

效果图1

效果图2

 

代码如下：

<template>

  <div class="main"> 

    <div id="header">

      <ul  id="menu">

      <li> <a  @click="tiandimap" >天地影像图</a></li>

      <li> <a  @click="gogemap">高德影像图</a></li> 

    </ul>

    </div>

    <div id="content">

    <div id="cesiumContainer">  </div>

    </div>

    

 </div>

 

</template>

 

<script> 

import '../../node_modules/cesium/Build/Cesium/Cesium.js'

import '../../node_modules/cesium/Build/Cesium/Widgets/widgets.css'//../../node_modules/cesium/Build/

export default {

  name: 'mainMap',

  data () {

    return {

     viewer:"",

     tokenkey:  '你的Cesiumkey'

   ,tiandimapkey: '天地图的key',

   tiandiosm:'',

   godebox:"",

   baidubox:""

   }

  },

  mounted()

  { 

     Cesium.Ion.defaultAccessToken = this.tokenkey;

     this.tiandiosm = new Cesium.WebMapTileServiceImageryProvider({

     url: 'http://t0.tianditu.gov.cn/vec_w/wmts?tk='+this.tiandimapkey,

           layer:'vec',

           style:'default',

          tileMatrixSetID:'w',

           format:'tiles',

          maximumLevel: 18

     }); 

     this.godebox = new Cesium.UrlTemplateImageryProvider({ 

     url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",

     layer: "tdtVecBasicLayer",

     style: "default",

     format: "image/png",

     tileMatrixSetID: "GoogleMapsCompatible",

     show: false

    });    

   this.viewer = new Cesium.Viewer('cesiumContainer',{  

    //imageryProvider: this.tiandiosm,

    contextOptions: {

    webgl: {

            alpha: true

        }

    },

    selectionIndicator:false,

    navigationInstructionsInitiallyVisible:false,

    homeButton:false,

    selectionIndicator: false,

    animation: false,  //是否显示动画控件

    baseLayerPicker: false, //是否显示图层选择控件

    geocoder: false, //是否显示地名查找控件

    timeline: false, //是否显示时间线控件

    sceneModePicker: false, //是否显示投影方式控件

    navigationHelpButton: false, //是否显示帮助信息控件

    infoBox: false,  //是否显示点击要素之后显示的信息

    fullscreenButton: false,

    shouldAnimate: true, //动画播放  

      });  

  },   

  methods: { 

   tiandimap()

   {

     this.viewer.imageryLayers.addImageryProvider(this.tiandiosm);

   },

   gogemap()

   {

     this.viewer.imageryLayers.addImageryProvider(this.godebox);

   }, 

  } 

}

</script>

<style>

#cesiumContainer{

  width: 100%;

  height:650px;

  margin: 0;

  padding: 0;

  overflow: hidden;

}    

#menu li{

 list-style:none  ; 

 float: left; 

}

#menu li a {

display:block; /* 将链接设为块级元素 */

padding:8px 50px; /* 设置内边距 */

background:#3A4953; /* 设置背景色 */

color:#fff; /* 设置文字颜色 */

text-decoration:none; /* 去掉下划线 */

border-right:1px solid #000; /* 在左侧加上分隔线 */

} 

#menu li a:hover {

background:#146C9C; /* 变换背景色 */

color:#fff; /* 变换文字颜色 */

}

/* .cesium-viewer-toolbar,             

.cesium-viewer-animationContainer,   

.cesium-viewer-timelineContainer,    

.cesium-viewer-bottom               

 {

   display: none;

 }

 .cesium-viewer-fullscreenContainer  

 { position: absolute; top: -999em;  } */

</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

 

每天进步一点点，积水成海，冰冻三尺非一日之寒！愿你我不在是从前那个少年。