基于vue框架的cesium开发

<p>
1.安装Cesium开发环境(不能直接引入啦)
npm install cesium    //多试几次,因为没有FQ的原因,各种麻烦

2.安装完后,进入node_modules\cesium\Build文件夹中,把编译好的Cesium文件复制到根目录下的static文件夹中,里面应该是有四个文件夹,整个一起复制过去,把Cesium.js删除

3.在build/webpack.base.conf.js中的output中加入sourcePrefix: ' ',让Webpack正确缩进多行字符串。(直接加在最后就好啦,记得前面加上逗号)

4.在build/webpack.base.conf.js下的module中加入unknownContextCritical: false5.在build/webpack.base.conf.js下的module中加入unknownContextRegExp: /^.\/.*$//*    module: {
        rules: [
         .....
        ],
        unknownContextRegExp: /^.\/.*$/,
        unknownContextCritical: false
      }     */

OK,前面都配置好了,基本上可以使用了。
main.js中引入:
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'
import Cesium from 'cesium/Source/Cesium'  (这可是我自己找到,哼哼)
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
import 'cesium/Source/Widgets/widgets.css'

这样就能全局使用了

在你的组件中写方法:
mounted:function(){
this.buildModuleUrl.setBaseUrl('../static/js/Cesium');  /*这个必须有,不然找不到你的组件哦 */
this.viewer = new this.Viewer('cesiumContainer',{
  terrainProvider: new this.Cesium.CesiumTerrainProvider({
    url: "http://assets.agi.com/stk-terrain/world",
    requestWaterMask: true,
    requestVertexNormals: true
  }),
  imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
    url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
  }),
  geocoder: false, //搜索
  homeButton: false, //主页 地球回正
  sceneModePicker: false, //地球平铺 网格  3d/2d选择器
  baseLayerPicker: false,
  animation: false, //是否创建动画小器件,左下角仪表
  selectionIndicator: false,
  fullscreenButton: false,
  infoBox: false,
  navigationHelpButton: false, //是否显示右上角的帮助按钮
  timeline: false,
  baseLayerPicker: false //图层选择器
});
}

OJBK,这样,你的容器中的地球就可以出来了!!!!!

还有还有,把cesium的源码封装一下吧,容易自己调用

首先:我是在assets文件夹中创建了一个js文件夹,
自己写一个js  取名随意,反正到时候可以设置名称
export function xxx(xxxx){
...
}

在最下面

export default:{
xxx
}

最后,在你的组件中引用一下  就OJBK了!!!完美
新手vue ,说的不对大佬指教。
</p>

猜你喜欢

转载自www.cnblogs.com/bfc666/p/9374365.html