vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue cesium创建数据白模

vue使用cesium创建数据白模方式

作者:Demain-

这篇文章主要介绍了vue使用cesium创建数据白模方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用cesium创建数据白模

引入cesium

引入cesium.js相关资源,这这里说明一下为什么没有使用npm install cesium,因为使用npm下载cesium,打包的时候文件太大了,所以在这里使用了cdn引入的方式;

<link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="external nofollow"    rel="stylesheet">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>

使用

在使用的页面引入widgets.css,也可以直接在main.js中直接引入

<template>
  <div class="">
    <div id="cesiumContainer">
    </div>
  </div>
</template>
<script>
import 'cesium/Build/Cesium/Widgets/widgets.css';
 
export default {
  name: 'HelloWorld',
  data() {
    return {
      viewer:null
    }
  },
  mounted(){
    this.initCesium()
  },
  methods:{
    initCesium(){
      Cesium.Ion.defaultAccessToken = "申请的token"; 
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 90, -20, 110, 90); //西南东北,默认显示中国
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        }),
        animation: false,
        timeline: false,  //时间线
        fullscreenButton: true,  //全屏模式
        infoBox: false,  //要素信息框
        homeButton: false, //显示主页
        geocoder: true, //搜索位置
        sceneModePicker: true,//模式切换
        selectionIndicator: true, //展示三维的指示器
        navigationHelpButton: false, //帮助按钮
        navigationInstructionsInitiallyVisible: false
      });
      // var longitude = 113.3061993318322; //地图设置默认位置
      // var latitude = 22.97302468714043;
      var height = -1.1406325468715177e-9;
      var heading = 0;
      var tileset = new Cesium.Cesium3DTileset({
        url:'https://lab.earthsdk.com/model/702aa950d03c11e99f7ddd77cbe22fea/tileset.json', //测试数据上海东方明珠建筑数据
      
        maximumMemoryUsage: 100,//不可设置太高,目标机子空闲内存值以内,防止浏览器过于卡
        maximumScreenSpaceError: 32,//用于驱动细节细化级别的最大屏幕空间错误;较高的值可提供更好的性能,但视觉质量较低。
        maximumNumberOfLoadedTiles: 1000,  //最大加载瓦片个数
        shadows: false,//是否显示阴影
        skipLevelOfDetail: true,// 确定是否应在遍历期间应用详细级别跳过(默认false)
        baseScreenSpaceError: 1024,//When skipLevelOfDetailis true,在跳过详细级别之前必须达到的屏幕空间错误(默认1024)
        skipScreenSpaceErrorFactor: 16,// 定义要跳过的最小屏幕空间错误的乘数。与 一起使用skipLevels来确定要加载哪些图块(默认16)
        skipLevels: 1,//skipLevelOfDetail是true 一个常量,定义了加载图块时要跳过的最小级别数。为 0 时,不跳过任何级别。与 一起使用skipScreenSpaceErrorFactor来确定要加载哪些图块。(默认1)
        immediatelyLoadDesiredLevelOfDetail: false,//当skipLevelOfDetail是时true,只会下载满足最大屏幕空间错误的图块。忽略跳过因素,只加载所需的图块(默认false)
        loadSiblings: false,// 如果为true则不会在已加载完概况房屋后,自动从中心开始超清化房屋 --- 何时确定在遍历期间skipLevelOfDetail是否true始终下载可见瓦片的兄弟姐妹(默认false)
        cullWithChildrenBounds: true,//是否使用子边界体积的并集来剔除瓦片(默认true)
        dynamicScreenSpaceError: true,//减少距离相机较远的图块的屏幕空间错误(默认false)
        dynamicScreenSpaceErrorDensity: 0.00278,//数值加大,能让周边加载变快 --- 用于调整动态屏幕空间误差的密度,类似于雾密度(默认0.00278)
        dynamicScreenSpaceErrorFactor: 4.0,// 用于增加计算的动态屏幕空间误差的因素(默认4.0)
        dynamicScreenSpaceErrorHeightFalloff: 0.25//密度开始下降的瓦片集高度的比率(默认0.25)
      });
      this.viewer.scene.primitives.add(tileset);
      tileset.readyPromise.then(function(argument) {
        var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
        var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));
        Cesium.Matrix4.multiply(mat, rotationX, mat);
        tileset._root.transform = mat;
        this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
      });
   
    },
  }
}
</script>
<style lang="scss" scoped>
#cesiumContainer{
  width: 100%;
  height: 1000px;
}
</style>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文