基于Cesium实现拖拽3D模型的示例代码

目录
  • 添加基站模型
  • 拖拽

这个地方是想实现一个什么效果呢?就是使用 cesium 在地图上添加一个3D模型,然后实现拖拽效果。

添加基站模型

然后这篇博文介绍的主要不是添加模型,但是也简单把代码直接粘贴过来吧,就不详细说了。

  // 添加基站模型
  function addSite() {
    let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0);
    // 设置模型方向
    let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), 0, 0);
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    // 添加模型
    let model = viewer.entities.add({
      id: 'site',   // 模型id
      position: position,   // 模型位置
      orientation: orientation,   // 模型方向
      model: {
        uri: './models/siteModel/scene.gltf',   // 模型路径,自己换成自己的模型
        scale: 1,
        show: true, // 模型是否可见
      },
      description: '基站模型'  // 添加模型描述
    });
    viewer.trackedEntity = model;    // 视角切换到模型
  }

上边的代码就完成了在界面上添加模型功能。

拖拽

其实拖拽就是给这个cesium加一个监听事件。

比如说这个拖拽的简单逻辑分析哈:

1、鼠标按下事件,如果有模型的话,可以给模型设置一个颜色,知道按下选中的是哪个模型。

2、然后再监听鼠标拖拽事件,获取鼠标拖拽的位置,赋值给模型。

3、鼠标抬起事件,结束鼠标移动事件,然后把颜色改回去。

   // 注册事件
  function setHandler() {
    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    // 注册鼠标按下事件
    handler.setInputAction((e) => {
      const pick = viewer.scene.pick(e.position);
      if (!Cesium.defined(pick)) { return; };// 如果点击空白区域,则不往下执行
      viewer.scene.screenSpaceCameraController.enableRotate = false;// 将相机锁定,不然后续移动实体时相机也会动
      pick.id.model.color = Cesium.Color.fromAlpha(Cesium.Color.RED, 1)  //设置颜色

      // 注册鼠标拖拽事件
      viewer.screenSpaceEventHandler.setInputAction((arg) => {// 为viewer绑定MOUSE_MOVE事件监听器(执行函数,监听的事件)
        const position = arg.endPosition;// arg有startPosition与endPosition两个属性,即移动前后的位置信息:Cartesian2对象
        const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);//将Cartesian2转为Cartesian3
        pick.id.position._value = cartesian
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 绑定鼠标抬起事件
      viewer.screenSpaceEventHandler.setInputAction(({ position }) => {//为viewer绑定LEFT_UP事件监听器(执行函数,监听的事件)
        viewer.scene.screenSpaceCameraController.enableRotate = true;// 取消相机锁定
        pick.id.model.color = null  //设置颜色
        viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 解除viewer的MOUSE_MOVE事件监听器
      }, Cesium.ScreenSpaceEventType.LEFT_UP)

    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  }

完成了这就,就是这么的简单。

到此这篇关于基于Cesium实现拖拽3D模型的示例代码的文章就介绍到这了,更多相关Cesium拖拽3D模型内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-06-21

基于Cesium绘制抛物弧线

Cesium绘制抛物弧线,供大家参考,具体内容如下 在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录 思路 两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> 取n个点,依次画线,得到近似的抛物线,点越多越光滑 JS代码 // 两点之间抛物线绘制函数,twoPoints是一个数组:[lon1,lat1,lon2,lat2] function animatedParabola(twoPoints) { //动态抛物线绘制 let startPoint = [two

基于Cesium实现加载显示热力图

目录 CesiumHeatmap 编写案例 我是一个小白,到目前为止对于3D方面的东西不是特别的懂,所以说,对于cesium使用的并不是特别的好,可以说根本不会吧,所以说也是在一点一点摸索,一点一点学习的过程中,所以说有些博文写的可能不是准确的,只是用来记录一下学习过程,错了别喷我啊!! CesiumHeatmap 首先嘞,绘制热力图需要有一个工具,就是使用 CesiumHeatmap 这个工具,然后呢,下面是他的一个github的地址. CesiumHeatmap [时空门~ 嗖~] 下载下来

基于Cesium绘制栅栏的示例代码

目录 最终效果 创建 dynamicWallMaterialProperty.js 文件 网上的资料要不收费,要不代码不全,很多跟绘制墙体有关的案例要不缺放法要不干嘛的,我自己根据网上的方法又加上自己百度改,最后实现了一个效果,和我想实现的效果差不多,分享一下子. 最终效果 反正这篇博文最后实现的效果就是上面动图的效果,如果你想实现的效果不是这个样子的话就不要看了,浪费时间了就. 创建 dynamicWallMaterialProperty.js 文件 首先需要一个 dynamicWallMat

Centos7实现MySQL基于日志还原数据的示例代码

简介 Binlog日志,即二进制日志文件,用于记录用户对数据库操作的SQL语句信息,当发生数据误删除的时候我们可以通过binlog日志来还原已经删除的数据,还原数据的方法分为传统二进制文件还原数据和基于GTID的二进制文件还原数据 前期准备 准备一台Centos7虚拟机,关闭防火墙和selinux,配置IP地址,同步系统时间,安装MySQL数据库 传统二进制日志还原数据 修改配置文件 [root@localhost ~]# vi /etc/my.cnf server-id=1 log-bin=b

Three.js实现绘制字体模型示例代码

前言 本文主要给大家介绍了关于利用Three.js绘制字体模型的相关内容,使用three.js绘制字体模型,没有想象当中那么难.下面话不多说了,来一起看看详细的介绍: 首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,在加载成功的回调函数里面进行创建网格. 然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法进行网格创建,并将需要设置的问题传入. 再设置一个纹理,通过THREE.Mesh()函数创建成图形添加

基于SSM框架之个人相册示例代码

学习了一阵子的SSM框架,一直在各种博客,简书,慕课网学习,最后终于自己撸出来一个简单的个人相册. 项目的演示效果: 开发的工具及环境: IntelliJ IDEA: 2016 Maven :3.0x Hbuilder(前端部分,可以用记事本代替2333) Java 8 项目流程(dao->service->web): 1.添加所有依赖: <dependency> <groupId>junit</groupId> <artifactId>juni

Android 基于IntentService的文件下载的示例代码

文件下载这种事情是很耗时的.之前使用AsyncTask这样的异步类来做下载,然后切到后台就被干掉.所以打算试试Service.(不过按目前那些系统的尿性,其实Service也分分钟被干掉) 不过,这里并不是直接使用Service类,而是使用的是继承自Service的IntentService. 这个东西有三大好处: 1.他有个任务队列: 2.任务队列执行完后会自动停止: 3.他会起一个独立的线程,耗时操作不会影响你app的主线程. 这么自动化的东西简直省心. 话不多说,开始撸代码. 首先,要建个

Android中贝塞尔曲线的绘制方法示例代码

贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

Android基于ImageView绘制的开关按钮效果示例

本文实例讲述了Android基于ImageView绘制的开关按钮效果.分享给大家供大家参考,具体如下: 今天弄了一下用图片绘制开关按钮. 效果图: 还有我两张start图片和stop图片就是上面的图片,到时候大家可以按照自己的图片调用.. Main.xml文件 在xml进入这段代码就ok了. <ImageView Android:id="@+id/start" android:layout_width="150.px" android:layout_heigh

python绘制简单折线图代码示例

1.画最简单的直线图 代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt.plot(x,y) plt.savefig("easyplot.jpg") 结果如下: 代码解释: #x轴,y轴 x=[0,1] y=[0,1] #创建绘图对象 plt.figure() #在当前绘图对象进行绘图(两个参数是x,y轴的数据) plt.plot(x,y) #保存图象 plt

基于Spring Data的AuditorAware审计功能的示例代码

Spring Data提供支持审计功能:即由谁在什么时候创建或修改实体.Spring Data提供了在实体类的属性上增加@CreatedBy,@LastModifiedBy,@CreatedDate,@LastModifiedDate注解,并配置相应的配置项,即可实现审计功能,有系统自动记录 createdBy CreatedDate lastModifiedBy lastModifiedDate 四个属性的值,下面为具体的配置项. 示例 创建一个实体类 package com.hfcsbc.i

Android 曲线图的绘制示例代码

本文介绍了Android 曲线图的绘制示例代码,分享给大家,具体如下: 效果展示 效果展示.gif 使用方式 // 初始化数据表格相关 with(mTableView) { // 配置坐标系 setupCoordinator("日", "人", /*这里是横坐标的值*/0f, 5f, 10f, 15f, 20f, 25f, 30f) // 添加曲线, 确保纵坐标的数值位数相等 addWave(ContextCompat.getColor(this@MainActiv

基于Vue2x的图片预览插件的示例代码

本文介绍了基于Vue2x的图片预览插件的示例代码,分享给大家,具体如下: 先来看下Demo LiveDemo 关于开发Vue插件的几种方式 (具体请移步官网)Vue官网 MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, bin