cesium使用环境搭建--vue中安装并引用百度地图

1，安装，安装1.60版本最好，1.40版本兼容百度地图有问题

npm install cesium@1.60 --save

2.配置文件，在config.vue.js中配置 -----plugins

const path = require('path');//引入path模块
const CopyWebpackPlugin = require('copy-webpack-plugin');//引入path模块
const webpack = require("webpack");
function resolve(dir) {
    return path.join(__dirname, dir)//path.join(__dirname)设置绝对路径
}

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    lintOnSave: true,
    productionSourceMap: false,
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8092,
        https: false,
        hotOnly: true,
        overlay: {
            warnings: false,
            errors: false
        },
        proxy: {
            '/base': {
                // target: 'http://10.111.15.8:8085/',
                target: 'http://192.168.1.118:8089/', //宁晓阳
                // target: 'http://14.120.21.132:8089/',
                // target: 'http://192.168.1.107:8089/',//张春豪
                // target: 'http://192.168.1.107:8089/',//张春豪
                // target: 'http://192.168.1.114:8089/', //成嘉健
                // target: 'http://192.168.1.106:8089/', //高岩鑫
                // target: 'http://14.120.21.133:8089/', //线上
                // target: 'http://192.168.1.107:8089/',//张春豪
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/base': 'base'
                }
            },
        },
        before: (app) => { }
    },
   
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('./src'))
    },
    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'components': '@/components',
                'views': '@/views',
            }
        },
        externals: {
            'BMap': 'BMap', // 配置百度地图
            'BMapLib': 'BMapLib'
        },
        plugins: [
            new CopyWebpackPlugin([
              {
                from: 'node_modules/cesium/Build/Cesium/Workers',
                to: 'cesium/Workers'
              }
            ]),
            new CopyWebpackPlugin([
              {
                from: 'node_modules/cesium/Build/Cesium/ThirdParty',
                to: 'cesium/ThirdParty'
              }
            ]),
            new CopyWebpackPlugin([
              { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'cesium/Assets' }
            ]),
            new CopyWebpackPlugin([
              {
                from: 'node_modules/cesium/Build/Cesium/Widgets',
                to: 'cesium/Widgets'
              }
            ]),
            new webpack.DefinePlugin({
              // Define relative base path in cesium for loading assets
              CESIUM_BASE_URL: JSON.stringify('./cesium')
            })
          ],
        
    },
}

3，使用百度地图，创建文件BaiduImageryProvider。js。

let Cesium = require('cesium/Source/Cesium');//引入Cesium
function BaiduImageryProvider(options) {
    this._errorEvent = new Cesium.Event();
    this._tileWidth = 256;
    this._tileHeight = 256;
    this._maximumLevel = 18;
    this._minimumLevel = 1;
    var southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
    var northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
    this._tilingScheme = new Cesium.WebMercatorTilingScheme({
        rectangleSouthwestInMeters: southwestInMeters,
        rectangleNortheastInMeters: northeastInMeters
    });
    this._rectangle = this._tilingScheme.rectangle;
    console.log(Cesium);
    var resource = Cesium.Resource.createIfNeeded(options.url);
    this._resource = resource;
    this._tileDiscardPolicy = undefined;
    this._credit = undefined;
    this._readyPromise = undefined;
}
 
Object.defineProperties(BaiduImageryProvider.prototype, {
    url: {
        get: function () {
            return this._resource.url;
        }
    },
    proxy: {
        get: function () {
            return this._resource.proxy;
        }
    },
    tileWidth: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
            }
            return this._tileWidth;
        }
    },
 
    tileHeight: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
            }
            return this._tileHeight;
        }
    },
 
    maximumLevel: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
            }
            return this._maximumLevel;
        }
    },
 
    minimumLevel: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
            }
            return this._minimumLevel;
        }
    },
 
    tilingScheme: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
            }
            return this._tilingScheme;
        }
    },
 
    tileDiscardPolicy: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
            }
            return this._tileDiscardPolicy;
        }
    },
 
    rectangle: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
            }
            return this._rectangle;
        }
    },
 
    errorEvent: {
        get: function () {
            return this._errorEvent;
        }
    },
    ready: {
        get: function () {
            return this._resource;
        }
    },
    readyPromise: {
        get: function () {
            return this._readyPromise;
        }
    },
    credit: {
        get: function () {
            if (!this.ready) {
                throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
            }
            return this._credit;
        }
    },
});
 
BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
    var r = this._tilingScheme.getNumberOfXTilesAtLevel(level);
    var c = this._tilingScheme.getNumberOfYTilesAtLevel(level);
    var s = this.url.replace("{x}", x - r / 2).replace("{y}", c / 2 - y - 1).replace("{z}", level).replace("{s}", Math.floor(10 * Math.random()));
    return Cesium.ImageryProvider.loadImage(this, s);
};
export {BaiduImageryProvider}

4，引入这个js

import {BaiduImageryProvider} from '../components/BaiduImageryProvider.js'

5，在mounted钩子中调用

this.$nextTick(() => {
            const viewer = new Cesium.Viewer('cesiumContainer',{
                imageryProvider:new BaiduImageryProvider({
                    url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1"
                })
            });
            console.log('viewer: ', viewer);
        });

6，运行一下效果如下。