前端中的三维技术Cesium

这篇具有很好参考价值的文章主要介绍了前端中的三维技术Cesium。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、基本介绍

前端中的三维技术主要有以下几种:

WebGL:WebGL是一种基于OpenGL ES 2.0标准的3D图形渲染技术,它能够在Web浏览器中呈现出高性能、交互式的3D视觉效果。

Three.js:Three.js是一个轻量级的JavaScript库,它为WebGL提供了更高层次的抽象,使得使用WebGL变得更加容易。通过Three.js,开发者可以快速创建3D场景和交互应用程序。

A-Frame:A-Frame是一个基于WebVR的框架,它允许开发者使用HTML编写虚拟现实(VR)场景,同时可以利用WebGL和Web Audio API来增强体验。

除此之外,还有一些其他的前端三维技术,例如Babylon.js和Cesium等。这些技术都可以帮助开发者创建出更加生动、逼真的3D图像和交互体验。

二、Cesium框架

这篇博客重点是讲解cesium框架,Cesium是一个基于WebGL的开源3D地球可视化引擎,它可以在现代浏览器中实现高性能、交互式的3D地球可视化效果。Cesium支持矢量和栅格数据的可视化,包括地形、气象、遥感等多种类型的数据。

Cesium具有以下几个特点:

支持全球范围内的数据可视化:Cesium可以将全球范围内的数据以高性能的方式呈现出来,并提供了丰富的交互功能,例如缩放、旋转、漫游等操作。

开放式的插件接口:Cesium提供了丰富的插件接口,让开发者可以轻松扩展和定制其功能。

多平台支持:Cesium不仅可以在桌面端使用,还可以在移动设备上运行,并支持主流的Web浏览器。

易用性:Cesium提供了丰富的示例和API文档,使得开发者可以快速上手,并快速构建自己的3D地球可视化应用程序。

Cesium被广泛应用于GIS(地理信息系统)、游戏、虚拟现实等领域,并且已经得到了众多商业机构和组织的采用。

三、Cesium框架在Vue中的使用

这里主要讲解如何在vue中的使用,如果只是在普通H5原生项目中使用的话,通常只需要引入相关的cdn路径,或者下载相关的静态文件便可,但是在Vue中我们可以对其进行简单的封装,让项目的规范性和工程的复用性和封装更优。

1.使用包管理工具下载cesium

提示:如果出现莫名其妙的node_module报错,那可能是版本问题,可以尝试下载其他版本。例如我用了若依后台使用1.104版本则出现了兼容问题。

npm install cesium

2.找到node_module中的cesium文件夹,把Assets,ThridPart,Widgets,Workers四个文件夹复制到public文件夹下面

3.main.js中引入css样式,引入Widgets中的widgets.css

4.可以封装一个使用cesium的js文件。

import * as Cesium from 'cesium'
Cesium.Ion.defaultAccessToken ="token"; //这里的token是自己申请的token
window.CESIUM_BASE_URL = "/";

class mMap{
    constructor(id){
      this.id = id; //地图容器
      this.viewer = null;
      this.scene = null;
    }
    //初始化地图
    initMap(){
      console.log(this.id)
      this.viewer = new Cesium.Viewer(this.id,{
        geocoder: false,                //是否显示地名查找控件
        sceneModePicker: false,         //是否显示投影方式控件
        navigationHelpButton: false,    //是否显示帮助信息控件
        baseLayerPicker: false,         //是否显示图层选择控件
        homeButton: false,              //是否显示Home按钮
        fullscreenButton: false,        //是否显示全屏按钮
        animation: false, //左下角的动画控件的显示
        shouldAnimate: false, //控制模型动画
        timeline: false, //底部的时间轴
        selectionIndicator: false,
        infoBox: false
      });
      //定位到指定位置
      this.viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 1500.0)
      });
      //去cesium logo水印 或 css
      this.viewer.cesiumWidget.creditContainer.style.display = "none";
      //创建场景
      this.scene = this.viewer.scene;
      if(!this.scene.pickPositionSupported){
        window.alert("此浏览器不支持拾取位置!")
      }
      this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas); 
    }
  }
  
  export function createMap(id){
    window.map = new mMap(id)
  }

四、Cesium的简单使用

1.加载立体的地形,很简单,只需要在初始化的配置中添加:terrainProvider: Cesium.createWorldTerrain()。表示加入地形支持。

this.viewer = new Cesium.Viewer(this.id, {
      geocoder: true, //是否显示地名查找控件
      sceneModePicker: false, //是否显示投影方式控件
      navigationHelpButton: false, //是否显示帮助信息控件
      baseLayerPicker: false, //是否显示图层选择控件
      homeButton: false, //是否显示Home按钮
      fullscreenButton: false, //是否显示全屏按钮
      animation: false, //左下角的动画控件的显示
      shouldAnimate: false, //控制模型动画
      timeline: false, //底部的时间轴
      selectionIndicator: false,
      infoBox: false,
      terrainProvider: Cesium.createWorldTerrain()
    });

2.添加点位,并且给点位添加一些事件。文章来源地址https://www.toymoban.com/news/detail-737069.html

	//添加点位
    let entity = new Cesium.Entity({
      id: 'flyTmp',
      position: Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 5800.0),
      point: {
        pixelSize: 20,
        color: Cesium.Color.RED.withAlpha(0.9),
        outlineColor: Cesium.Color.RED.withAlpha(0.9),
        outlineWidth: 1,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      }
    });

    // 为实体对象添加click事件
    entity.clickable = true;
    entity.description = '点位信息';
    this.viewer.entities.add(entity);

    this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
    let self = this

    this.handler.setInputAction(function (movement) {
      var pickedObject = self.viewer.scene.pick(movement.position);
      if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
        console.log('你点击了点位:', pickedObject);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

    // 添加一个带有图标的3d点位
    let iconEntity = new Cesium.Entity({
      id: 'iconEntity',
      position: Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 5800.0),
      billboard: {
        image: logo,
        scale: 0.5,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      }
    });

    // 为实体对象添加click事件
    iconEntity.clickable = true;
    iconEntity.description = '点位信息';
    this.viewer.entities.add(iconEntity);

    this.handler.setInputAction(function (movement) {
      var pickedObject = self.viewer.scene.pick(movement.position);
      if (Cesium.defined(pickedObject) && pickedObject.id === iconEntity) {
        // 点击实体之后,需要有一些动画,实现动画
        self.viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 3000.0),
          duration: 2,
        });
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

到了这里,关于前端中的三维技术Cesium的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 使用Python进行三维可视化

    使用Python进行三维可视化 Python是一种易于学习和使用的编程语言,它拥有强大的图形处理能力。在科学、工程或数据分析等领域,Python可以用来处理和生成各种图表和图像。本文将介绍如何使用Python进行三维可视化,并提供相应的源代码。 首先,我们需要安装必要的Python库

    2024年02月14日
    浏览(44)
  • Unity制作数据可视化三维场景

    数据可视化大屏是这几年比较热门的一个方向,人们对数据的感知方式,也慢慢要求更严苛了。 Bi报表到数据可视化大屏,再到三维可视化大屏,这个发展趋势也体现了人们在使用数据可视化大屏时对效果的要求逐渐提高。 2维图表在过去几年的使用中,不断完善,已经有了

    2023年04月10日
    浏览(46)
  • 数字乡村三维可视化监控管理平台

    数字乡村是伴随网络化、信息化和数字化在农业农村经济社会发展中的应用,既是乡村振兴的战略方向,也是建设数字中国的重要内容。为了进一步提升乡村治理智能化、专业化水平,解决建设顶层缺失、数据孤岛等问题,数字孪生技术被广泛应用于数字乡村建设中。 听涛观

    2024年02月12日
    浏览(34)
  • 三维目标检测之ROS可视化

    实验室有一个镭神C16的激光雷达,最近在我这,想拿来玩一玩。本意是做一个实时的检测,通过ROS获取激光雷达的激光点云,用pointpillars模型来进行实时的三维目标检测任务。但是镭神c16这一个激光雷达,不太好处理,目前只能用自带的驱动,进行一个实时的显示。所以下边

    2024年01月19日
    浏览(41)
  • 三维可视化平台有哪些?Sovit3D可视化平台怎么样?

    随着社会经济的发展和数字技术的进步,互联网行业发展迅速。为了适应新时代社会发展的需要,大数据在这个社会经济发展过程中随着技术的进步而显得尤为重要。同时,大数据技术的快速发展进程也推动了可视化技术的飞速发展,国内外各类可视化工具软件平台如雨后春

    2024年02月13日
    浏览(50)
  • 区块链溯源技术在房地产溯源中的应用:实现房地产溯源的可视化管理

    作者:禅与计算机程序设计艺术 随着人类对数字货币、区块链等金融科技的迅速发展,人们对于区块链技术的认识也越来越多。尤其是其特有的不可篡改、透明、不可伪造等特征,已经引起了业界极大的关注。其中就包括了“区块链溯源”技术,它通过记录每一笔交易的可信

    2024年02月12日
    浏览(39)
  • 【数字孪生】电力能源实景三维可视化合集

    电力能源是现代社会发展和运行的基石,渗透于工业、商业、农业、家庭生活等方方面面,它为经济、生活质量、环境保护和社会发展提供了巨大的机会和潜力。图扑软件应用自研 HT for Web 强大的渲染引擎,助力现代化的电力能源数字孪生场景,在发电、变电、用电、管理等

    2024年01月20日
    浏览(52)
  • DEM的精细修改及其三维可视化

    无论是搭建二维水动力模型,还是构建三维虚拟现实场景,都离不开DEM(Digital Elevation Map)。DEM的获取途径可以是卫星影像,或是无人机航拍。针对DEM的编辑,网络上的教程大部分是通过gis进行拼接、提取、填洼以及简单的栅格计算等。笔者一直希望能够对DEM进行较为细致的

    2024年02月08日
    浏览(76)
  • Cesium教程(十六):动态数据三维可视化

    Cesium时间系统在动态数据可视化中发挥着重要作用。 CZML是Cesium团队制定的一种用来描述动态场景的JSON架构语言。可以描述点、线、多边形、体及其他图元。 实现效果::模型车会沿着黄色的轨迹线前行 这里以轨迹数据可视化为例,代码如下:

    2024年02月08日
    浏览(62)
  • 电力能源三维可视化合集 | 图扑数字孪生

    电力能源是现代社会发展和运行的基石,渗透于工业、商业、农业、家庭生活等方方面面,它为经济、生活质量、环境保护和社会发展提供了巨大的机会和潜力。图扑软件应用自研 HT for Web 强大的渲染引擎,助力现代化的电力能源数字孪生场景,在发电、变电、用电、管理等

    2024年01月21日
    浏览(90)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包