vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本)

这篇具有很好参考价值的文章主要介绍了vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

cesium加载3dTileset代码如下

   palaceTileset = await Cesium.Cesium3DTileset.fromUrl(
        "url", {
            skipLevelOfDetail: true,
            baseScreenSpaceError: 1024,
            skipScreenSpaceErrorFactor: 16,
            skipLevels: 1,
            immediatelyLoadDesiredLevelOfDetail: false,
            loadSiblings: false,
            cullWithChildrenBounds: true,
            progressiveResolutionHeightFraction: 1,
            dynamicScreenSpaceErrorDensity: 1,
            maximumScreenSpaceError: 1
        });
    viewer.scene.primitives.add(palaceTileset);

加载三维模型 视频参考地址:
https://www.bilibili.com/video/BV14g411s7DX/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=4716b12357fe8e4b33b293b4bbbbfcd8文章来源地址https://www.toymoban.com/news/detail-818076.html

const initThreeModel = async () => {
    let res = await queryTrajectory(monitoringStore.$state.trajectoryId)
    let newArray = res.data.map(item => [item.longitude, item.latitude, item.heightValue]);
	//其中newArray中的参数为[ [117.4603186710001, 31.14388249900003, 15.147400000001653]]分别是经纬度以及高度
    var viewer = new Cesium.Viewer("cesiumContainer", {
        //搜索框
        geocoder: false,
        //home键
        homeButton: false,
        // 动画控件
        animation: true,
        //全屏按钮
        fullscreenButton: false,
        //场景模式选择器
        sceneModePicker: false,
        //时间轴
        timeline: true,
        //导航提示
        navigationHelpButton: false,
        //地图选择器
        baseLayerPicker: false,
    })
    viewer.cesiumWidget.creditContainer.style.display = 'none'
    //创建DataSource
    var datasource = new Cesium.CustomDataSource("enetiestestdata");
    viewer.dataSources.add(datasource)
    let resImg = await reqQueryImgVideo(monitoringStore.$state.trajectoryId)
    let testArrayImg = resImg.data

    // 使用map方法遍历数组并创建Billboard
    testArrayImg.map(function (item) {
        const position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude);
        let testBillboard = viewer.entities.add({
            position: position,
            billboard: {
                image: 'https://img9.png',
                scale: 0.03, // 图片缩放比例
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            },
        });
        testBillboard.myCustomProperty = item.url
        // 注册点击事件
        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick (movement) {
            var pickedObject = viewer.scene.pick(movement.position);
            if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
                var billboard = pickedObject.id;
                var description = billboard.myCustomProperty;
                imgurl.value=description
                checkDetail.value=true
                console.log('点击了:' + description);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    });

    //添加线
    datasource.entities.add({
        name: "line",
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(newArray.flat()),
            material: Cesium.Color.MEDIUMSPRINGGREEN,
            width: 5
        }
    })

    var property = new Cesium.SampledPositionProperty();
    var starttime = new Date();
    var stoptime;
    var timestamp = starttime.getTime();

    newArray.forEach((pos, index) => {
        var time = new Date(timestamp + index * 5000);
        stoptime = time;
        var position = Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2])
        property.addSample(Cesium.JulianDate.fromDate(time), position);
    })
    property.setInterpolationOptions({
        interpolationDegree: 0.0001,
        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
    });

    var entitydd = datasource.entities.add({
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start: Cesium.JulianDate.fromDate(starttime),
            stop: Cesium.JulianDate.fromDate(new Date(stoptime))
        })]),
        position: property, // 点集

        //开启模型自定义视角
        //orientation: new Cesium.VelocityOrientationProperty(property),
        model: {
            uri: '/uav-processed.glb',
            //uri: './scenewZ.glb',
            scale: 5,
            minimumPixelSize: 120,
            maximumScale: 500
        },
        path: {
            leadTime: 0,
            resolution: 1,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: Cesium.Color.GREEN
            }),
            width: 10
        }
    });

    viewer.clock.currentTime = Cesium.JulianDate.fromDate(starttime); //修改时间轴的当前时间
    viewer.clock.stopTime = Cesium.JulianDate.fromDate(new Date(stoptime));
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
    viewer.clock.shouldAnimate = true; //开始播放
    viewer.zoomTo(datasource)
}

到了这里,关于vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Cesium3Dtilesets 使用customShader的解读以及泛光效果示例

    前言:光带原理在旋转弹跳四棱锥这篇文章里早已经阐述过,但还是有不少靓仔靓女可能会感到疑惑,在3Dtilesets里怎么使用?为啥我在网上看到的为数不多的代码示例我看不懂?是由于没理解透彻导致的。借此机会,提供一个小示例,从头到尾的应用一下。 效果 加载Cesium

    2024年01月20日
    浏览(42)
  • 【vue3.2+cesium】加载三维天地图

            使用Vite+Vue3.2+Cesium。Vite需要Node.js版本14.18+及以上版本。Vite命令创建的工程会自动生成vite.config.js文件,来配置一些相关的参数。 1、使用Vite创建vue3项目 #  npm npm init vite@latest cesium-app -- --template vue #  yarn  yarn create vite cesium-app --template vue #  pnpm  pnpm create vite cesium

    2024年02月11日
    浏览(55)
  • 前端使用Cesium加载三维模型全攻略

    想象一下,地球在你眼前旋转,上面还有各种3D模型,是不是很酷?Cesium是一个超酷的库,专门用来创建超炫的3D地球和地图。好,言归正传,今天这篇文章就分享一下前端如何使用Cesium加载三维模型。 首先,确保你已经安装了Cesium库。可以从Cesium官网下载最新版本的库文件

    2024年04月17日
    浏览(58)
  • CesiumForUnreal实现多边形裁剪3dTileset效果

    基于CesiumForUnreal插件的 Cartographic Polygon Actor在 Runtime 运行时环境下实现对地形3DTileset的多边形裁剪效果,GIF动图如下: 在Editor中的具体操作过程可以参考CesiumForUnreal官方裁剪地形的教程,本文这里在Runtime环境下进行实现。数据依旧是使用CesiumForUnreal插件加载在线的地形和影

    2024年02月13日
    浏览(62)
  • CesiumForUnreal之3DTileset点选拾取属性与单体高亮

    在UE5中使用CesiumForUnreal插件加载本地的3dTiles建筑白模数据,实现点击拾取3DTileset单体要素的 属性数据 ,并对 高亮单体 进行展示,GIF动图如下: 总体的实现过程分为 数据准备 、 属性拾取 和 单体高亮 三个大的部分,在本文中数据准备部分简要概述,拾取属性和单体高亮会

    2024年02月04日
    浏览(35)
  • Cesium中加载地形影像切片,以及3dtiles和shp及kml方法

    1geoserver影像服务 2加载cesiumlab切出的地形切片 3加载geotif 4加载geojson 5加载kml 6加载shp 效果1     未完待续

    2024年02月11日
    浏览(38)
  • cesium加载三维模型3dtiles

    目的:为避免跨域 输入cmd命令 python3 -m http.server 5500 http://127.0.0.1:5500/data/mars3d-max-shihua-3dtiles-master/tileset.json http://127.0.0.1:5500/cesium/cesium%E5%8A%A0%E8%BD%BD3dtile2.html

    2024年02月13日
    浏览(89)
  • vue中使用cesium 加载shp文件

    在cesium中加载shp文件,将shp文件打包为zip,直接加载zip文件,shp文件中需包含这四个文件 加载代码  

    2024年02月12日
    浏览(40)
  • 关于cesium中tif文件处理加载在三维地图中得方式

    在Gis项目关于tif影像数据是不能直接在地图上面加载,只能通过后端进行处理,或者前端进行处理之后才能叠加到地图上面!

    2024年02月11日
    浏览(43)
  • 三维GIS开发:利用Cesium加载 M3D 地质体模型(附代码)

    实现步骤 Step 1.  引用开发库 : 本示例引用 local 本地【include-cesium-local.js】开发库,完成此步骤后才可调用三维 WebGL 的功能; Step 2.  创建布局 : 创建 id=\\\'GlobeView\\\' 的 div 作为三维视图的容器,并设置其样式; Step 3.  构造三维场景控件 : 实例化 Cesium.WebSceneControl 对象,完成

    2024年02月10日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包