美文网首页开源
vue项目集成cesium

vue项目集成cesium

作者: 五四青年_4e7d | 来源:发表于2020-05-10 23:33 被阅读0次

    搭建项目脚手架省略...

    运行下载cesium依赖包:

    npm install cesium --save
    

    修改build/webpack.base.conf.js文件

    const cesiumSource = '../node_modules/cesium/Source'   //添加
    
    //在modules.exports模块中添加 
     amd: {
        toUrlUndefined: true
       },
    
    //在modules.exports模块中的output里添加
     sourcePrefix: ' ',
    
    //在modules.exports模块中的resolve里的alisa里添加
     'cesium': path.resolve(__dirname, cesiumSource) 
    
    //在module模块中加入
     unknownContextCritical: false
    

    修改 build/webpack.dev.conf.js 文件

    const cesiumSource = 'node_modules/cesium/Source'
    const cesiumWorkers = '../Build/Cesium/Workers'
    
    //在plugins模块中加入
    new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
        new webpack.DefinePlugin({
          CESIUM_BASE_URL: JSON.stringify('')
        })
    

    修改build/webpack.prod.conf.js 文件

    //添加
    const cesiumSource = 'node_modules/cesium/Source'
    const cesiumWorkers = '../Build/Cesium/Workers'
    
    //在plugins 模块中添加
    new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
        new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
        new webpack.DefinePlugin({
          CESIUM_BASE_URL: JSON.stringify('./')
        })
    

    修改config/index.js 文件

    //将 assetsPublicPath的值设置为空
    assetsPublicPath: '',
    

    复制node_modules的Cesium文件夹 粘贴到 根目录的 static文件夹里

    首先到  node_modules/cesium/Build/Cesium 文件,可以看到里面还有四个文件夹和Cesiumjs,直接复制Cesium文件夹 粘贴到 根目录的 static文件夹里
    

    首页script引入·

     <script src="/static/Cesium.js"></script>
    
    

    页面使用

      <div class="boxs" id="cesiumContainer"></div>
    import '../../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
      mounted() {
       this.init()
         },
      methods: {
         init(){
         this.viewer = new Cesium.Viewer('cesiumContainer',{})
        },
    
    image.png

    地址:
    https://www.cnblogs.com/reround/p/11943717.html

    相关文章

      网友评论

        本文标题:vue项目集成cesium

        本文链接:https://www.haomeiwen.com/subject/cxjenhtx.html