开源

vue项目集成cesium

2020-05-10  本文已影响0人  五四青年_4e7d

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

运行下载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

上一篇下一篇

猜你喜欢

热点阅读