一. vue-cesium开发三维地图 （天地图）创建地图

注意：vue 项目 创建地图时不要把地图挂在data()中 挂在 全局变量 或者window 上 （我挂载到 window） 文档 cesium.xin/cesium/cn/D… 地图颜色换图片

vue add vue-cli-plugin-cesium
或者使用npm 安装：
npm install --save-dev vue-cli-plugin-cesium

或者

1、npm install cesium --save

2、npm install --save-dev vue-cli-plugin-cesium

3、vue invoke vue-cli-plugin-cesium

npm install sass-loader@7.3.1 --save-dev

npm install cesium@1.95.0 --save

如果 样式报错 可以试试 npm install sass@1.32.12 --save

<template>
  <div >
    <div style="background: url(../../assets/images/bigGreen/big-bg.png) " id="cesiumContainer"></div>

  </div>
</template>
    <script>
    let tileset = undefined;
    export default {
      name: "mapD",
     data() {
        return {
            }
      },
     created(){
        this.$nextTick(()=>{
          // 初始化地图
          this.initMap();
        });
      },
    methods: {
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"; // 自己申请 或者放在全局变量 或者挂载原型上调用
            window.viewer3d =  new Cesium.Viewer('cesiumContainer', {
                ...//里面的自己去配置
            })
                 Cesium.ExperimentalFeatures.enableModelExperimental = true; // 实现建筑泛光效果
        if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {//判断是否支持图像渲染像素化处理
            window.viewer3d.resolutionScale = window.devicePixelRatio; // 锯齿和页面模糊问题
        }
         window.viewer3d.scene.fxaa = true;
        window.viewer3d.scene.postProcessStages.fxaa.enabled = true;
        
      // vec(矢量)、img(影像)、cia(影像中文注记)、cva(矢量中文注记)
        var layer = new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=b6e16a5ffc7b6e167bef81496433f1c9",
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            layer: "img",
            style: "default",
            tileMatrixSetID: "w",
            format: "tiles",
            maximumLevel: 18// 必须加上最大级数
        });
        
        window.viewer3d.imageryLayers.addImageryProvider(layer);
        //   //加载影像注记
        var layer1 = new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=b6e16a5ffc7b6e167bef81496433f1c9",
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            layer: "cia",
            style: "default",
            tileMatrixSetID: "w",
            format: "tiles",
            maximumLevel: 18 
        });
        window.viewer3d.imageryLayers.addImageryProvider(layer1);
        window.viewer3d.imageryLayers.get(0).show = false;
        window.viewer3d.imageryLayers.get(1).show = false;
        window.viewer3d.scene.backgroundColor =  new Cesium.Color(0.0, 0.0, 0.0, 0.0); //设置背景地球颜
        window.viewer3d.scene.globe.baseColor = new Cesium.Color.fromCssColorString('#172146');//设置地球颜
        window.viewer3d._cesiumWidget._creditContainer.style.display = "none";   //  // 隐藏cesium ion
        // window.viewer3d.scene.skyBox.show = false //关闭天空盒，否则会显示天空颜色
        // window.viewer3d.imageryLayers.get(0).alpha = 0 // 默认的地图的透明度直接设置为0
        // window.viewer3d.imageryLayers.get(1).alpha = 0 // 默认的地图的透明度直接设置为0
      // //关闭大气
        window.viewer3d.scene.skyAtmosphere.show = false
        //抗锯齿
        window.viewer3d.scene.fxaa = true;
    
        window.viewer3d.scene.postProcessStages.fxaa.enabled = true;
        //清除月亮太阳
        window.viewer3d.scene.moon.show = false
        window.viewer3d.scene.sun.show = false
        window.viewer3d.scene.globe.enableLighting = true;//若要启用地形照明
        window.viewer3d.shadows = true
       // GroundSkyBox
        window.viewer3d.scene.skyBox = new Cesium.SkyBox({ // 天空贴图
          sources: this.sources0 // 自己配置
        });
        //设置相机放大时的当相机缩放到一定高度的时候，控制鼠标不能进行缩放。
        window.viewer3d.scene.screenSpaceCameraController._maximumZoomRate=16000
     window.viewer3d.camera.flyTo({ 
                destination: Cesium.Cartesian3.fromDegrees(126.03549, 42.64096, 1384.0), // //世界坐标系下的一个坐标点
                orientation: { ////旋转角度
                    heading: Cesium.Math.toRadians(-3.0),//方位角
                    pitch : Cesium.Math.toRadians(-15.0),
                    roll: 0.0 ,  //旋转角
                },
                duration:1,
                complete:function callback() {
                 
                } 
            });
        
        
        
        }
        
    }
    
</script>