vue 中使用 cesium

我是在 vue 项目里面使用的 cesium,但是呢,有点问题,就是有些语法在js转vue的时候有些许的限制,比如说js中相对路径引入文件是一切OK的,vue 也能解决,但是呢,在引入的文件中又引用了其他的文件,vue 处理起来就不是特别的好用,所以说,我是直接在 vue 文件里面使用 iframe 标签引入的 html 文件来实现接入的,而vue和iframe之间的通信采用的 postMessage 方式实现,下面就稍微介绍一下。

vue项目引入cesium

这个相对来说简单,我也在之前的博客有介绍过,主要是下载cesiumjs包,然后这个包下载比较分时费力,所以说我整理了一下百度云盘存了起来。

百度云盘:链接:https://pan.baidu.com/s/1lf75yPi8XPPo5Y9YTvrVig
提取码:0c7s

如果有需要的可以在这里下载。

下载下来之后选择一个自己需要的版本,然后放进 public 文件夹下就可以。
在这里插入图片描述

编写 cesium 代码

开始已经说了,我是写了一个html文件,所有有关3D的东西全部在这个html文件里面实现的,所以说,最后需要我们将写的代码文件通过iframe标签引入到vue项目当中去,其中有几个注意的点,我来稍微强调一下。

首先第一个,这个html文件就是一个普通的html文件,按照官网的官方文档写响应的代码就可以了,但是呢,关键是怎么使用iframe标签嵌入进我们的vue项目,首先强调,我是用的是cli3创建的项目,其他方式创建可靠性不确定,且下面的代码都是在我发文之前编写demo测试通过的,截止到发文为止完全可靠!

编写iframe标签

这个就很简单了,无非就是在需要引入3D的地方不写详细的代码了, 然后就是单纯的写一个iframe标签,把编写具体3D代码的html文件引入进来就可以了。

下面是主要代码:

<iframe ref="iframeModel" src="/static/cesium.html" width="100%" height="100%" style="background-color: #070707;" frameborder="0">
</iframe>

ok,就是上面这一行代码就完事了,然后src写的就是我们具体详细代码的html文件,引入进来就行了。

注意!!! cli3 创建的vue项目,这个引入的本地 html 文件一定、是一定要放在 public/static 文件夹下面,放在其他的地方不可以!!!而且,使用iframe标签引入的时候,直接 /static/文件名.html 就可以,不这样整,可能引入会报错,也就是显示不出来!切记切记!

然后就是编写HTML文件了,这个没啥可以说的,正常编写就可以,没啥注意的。
在这里插入图片描述
在这个 html 文件中引入cesiumjs 包,文件路径写自己的哈,别直接粘,我们不一定一样。

  <link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
  <script type="text/javascript" src="../Cesium/Cesium.js"></script>

然后就是很常规的操作,简单写一下关键代码哈,不全,根据实际需要得改一下哈。

	// 初始化3D地图
    viewer = new Cesium.Viewer('map', {
      baseLayerPicker: false,  // 影像切换
      animation: false,  //是否显示动画控件
      timeline: false, //是否显示时间线控件
      infoBox: false, //是否显示点击要素之后显示的信息
      geocoder: false, //是否显示地名查找控件
      navigationHelpButton: false, //是否显示帮助信息控件
      terrainProvider: new Cesium.CesiumTerrainProvider({   // 加载地形信息
        url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',
        requestVertexNormals: true
      }),
    })

自定义地图实例

// 添加mapbox自定义地图实例
var layer = new Cesium.MapboxStyleImageryProvider({
  url: 'https://api.mapbox.com/styles/v1',
  username: 'username',
  styleId: '这里是我的styleId',
  accessToken: '这个是我的accessToken',
  scaleFactor: true
});
viewer.imageryLayers.addImageryProvider(layer);

这个地方我稍微多说两句哈,我们在做具体项目的时候吧,肯定不可能直接把默认的地图样式给渲染出来,因为设计不会这么简单就放过我们开发,对吧?所以说可能需要深色模式,或者是个性化的地图底层,这个就很难整,不好搞,百度地图和高德地图甚至是天地图,他们都可以设计个性化地图,但是这些个性化地图都只能在高德或者百度的产品里面使用,在cesium中用不了,所以说,这个时候有一个相当牛逼的网站,可以提供在cesium中使用的个性化地图,这个网站就是伟大的 —— mapbox。在这里面可以创建、设计、发布自己的个性化地图给cesium使用,超级牛掰,就是国外的打开可能有点慢,进去注册,然后怎么用,自己研究一下就可以了!

在这里插入图片描述

在这里插入图片描述
可以设置地图的颜色,文字等很多东西。创建好自己的个性化地图,就可以设置成公开的,然后就可以根据一些参数调用到这种设计好的个性化地图,很淫性!自己慢慢研究,上面代码就是我引入的例子,但是关键地方我隐掉了,换成你的就OK了!
在这里插入图片描述

然后是加载模型,找模型太费劲了,开发一星期,有半星期都在找模型上,那么没错,贴心的我也给各位准备了几个测试的军舰3D模型,均是gltf格式的,不需要转化,贴心吧?

百度云盘 链接:https://pan.baidu.com/s/1T1fYUBk-9J6VKmWA7r3Wag
提取码:63y7

不想要军舰?在推荐一个网址!操碎了心,稀碎啊!

sketchfab 进这个网站,模型收费很正常哈,不要抱怨,但是这里面也有很多免费的,可能不是很好,但是测试完全够用,注册账号,撒欢去吧!

    // 添加3D模型
    var scene = viewer.scene

    var hpr = new Cesium.HeadingPitchRoll(
      Cesium.Math.toRadians(45), // 设置这个属性即可(顺时针旋转的角度值)
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(0)
    );  // 设置方向角
    var origin = Cesium.Cartesian3.fromDegrees(117.70901, 38.781056, 0.0);   // 设置位置
    var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
      origin,
      hpr
    );
    var model = scene.primitives.add(new Cesium.Model.fromGltf({
      url: './models/rrv_rapid_response_vessel/scene.gltf', //gltf文件的URL
      // url: './models/ces1/scene.gltf', //gltf文件的URL
      modelMatrix: modelMatrix,
      color: new Cesium.Color(0, 0.9, 0.8, 0.5),  // 设置模型的颜色以及透明度
      scale: 1000.0     //放大倍数
    }))

设置相机飞入角度

    // 设置相机飞入视角
    viewer.camera.flyTo({
      destination: new Cesium.Cartesian3.fromDegrees(117.80901, 38.481056, 15000.0),     //相机飞入点
      orientation: {
        heading: 0,
        pitch: -0.5,
        roll: 0.0
      }
    })

设置相机视角,和上边不要共用哈,不然冲突。

    // 设置相机角度
    // heading - 代表镜头左右方向, 正值为右, 负值为左, 360度和0度是一样的
    // pitch - 代表镜头上下方向, 正值为上, 负值为下.
    // roll - 代表镜头左右倾斜.正值, 向右倾斜, 负值向左倾斜
    viewer.scene.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(117.80901, 38.481056, 15000.0),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-25),
        roll: Cesium.Math.toRadians(0)
      }
    });

完事!齐活!

在这里插入图片描述
当然了,我这是自己写的测试Demo,有点简陋有点丑,但是,只要你地图设置的好,模型找的漂亮,你就真她娘的是个天才~

vue postMessage 通信给 iframe

这个其实不是很难哈,直接百度就到手了,首先iframe向我最开始一样写,主要是有一个 ref

然后呢,直接上代码:

vue页面

监听接受

	mounted() {
      window.addEventListener('message', function (event) {
        //此处执行事件
        console.log('监听到iframe数据--------> ', event.data)
      })
    },

发送

	this.$nextTick(() => {
       this.$refs.iframeModel.contentWindow.postMessage({
         type: 'full'
       }, '*')
    })

iframe 页面

window.addEventListener('message', function (e) {
    const da = e.data;
    console.log("接收到的数据---->> ", da )
 });

齐活了!

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐