SuperMap iClient3D for Cesium 构建隧道

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

作者:kele

背景

前段时间看到一篇构建隧道的文章(https://blog.csdn.net/supermapsupport/article/details/128453116),突然想到一个使用场景:隧道通常是建在山体下面,是否可以通过这种方式构建出一条贯穿山体的隧道,来模拟实际的施工方案?答案是可以,效果图如下:
SuperMap iClient3D for Cesium 构建隧道

一、实现思路

1、生成隧道模型
2、地形挖洞
3、把隧道模型放在洞口中
该方案的难点在于,如何根据隧道的截面坐标,将地形挖洞,使洞口与隧道模型完全吻合
由于地形服务无法做布尔运算,这里采用地形开挖方式实现,并不展示开挖底面与侧面,这样就相当于给地形裁剪一个口子,关键接口:
SuperMap iClient3D for Cesium 构建隧道
SuperMap iClient3D for Cesium 构建隧道

二、实现过程

1、构建管道模型

用鼠标绘制一条折线代表隧道的走向
然后使用iServer放样分析,输入隧道截面坐标,分析出一条带管壁厚度的隧道

var s3mInstanceColc = new Cesium.S3MInstanceCollection(scene._context);
scene.primitives.add(s3mInstanceColc);
var sqlParameter = {
    "loftRegion":{"type":"REGION" , "parts":[8,8], "points":[{ x: -2.5, y: 7.5},
            { x: -6.5, y: 5.5 },
            { x: -10.5, y: 0 },
            { x: -10.5, y: -10.5 },  //隧道截面坐标,单位为米
            { x: 10.5, y: -10.5 },
            { x:10.5, y: 0},
            { x: 6.5, y: 5.5 },
            { x: 2.5, y: 7.5},
            { x: -1.5, y: 6.5},
            { x: 1.5, y: 6.5},
            { x: 5.5, y: 4.5 },
            { x: 9.5, y: 0},
            { x: 9.5, y: -9.5 },
            { x: -9.5, y: -9.5 },
            { x: -9.5, y: 0 },
            { x: -5.5, y: 4.5 }]},
    "loftLine":{"type":"LINE3D", "parts":[2], "points":posArray},
    "chamfer":"5",
    "lonlat":"TRUE"
};
var url = "http://10.10.4.82:8090/iserver/services/spatialAnalysis-test/restjsr/spatialanalyst/geometry/3d/loft.json?returnContent=true";
var queryData = JSON.stringify(sqlParameter);

$.ajax({
    type: "post",
    url: url,
    data: queryData,
    success: function (result) {
        var geometry = result.geometry;
        if (!geometry) {
            return;
        }
        var buffer = new Uint8Array(geometry.model).buffer;
        var position = geometry.position;
        var color = Cesium.Color.GRAY;
        s3mInstanceColc.add('visibleBody', {
            position: Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z+10),
            color: color,
            attributes: 'test'
        }, buffer);
        viewer.flyTo(s3mInstanceColc);
    },
    error: function (msg) {
        console.log(msg);
    },
})

SuperMap iClient3D for Cesium 构建隧道

2、根据隧道给地形挖洞

2.1、去除挖洞封边效果,去除侧面与底面贴图
scene.globe.showExcavationSide = false;
scene.globe.excavationBottomTextureUrl = null;
scene.globe.excavationSideTextureUrl = null;
2.2、开挖方案

SuperMap iClient3D for Cesium 构建隧道
从图中可以看出,隧道口被堵死,我们需要拿到隧道与地形相交部分的节点坐标,然后将地形挖开。所以关键步骤就是如何得到相交坐标,如下图所示:
SuperMap iClient3D for Cesium 构建隧道
第一步获取隧道截面坐标(红色点),第二步利用隧道方向向量,绘制出基于截面坐标且平行与隧道的线段(通视分析),第三步得到线段与地形的交点(蓝色点),第四步用得到的交点坐标将地形挖开

2.3、获取截面坐标点(红色点)

①在构建隧道模型时,我们可以根据传入的平面坐标,计算每个端点与中心点的距离
②在绘制隧道走向时,我们根据绘制坐标计算出隧道的方向向量,从而获取线的角度,在这个角度基础上±90°,得到隧道垂直方向,方向+距离即可计算出目标点的世界坐标。利用不同距离得到多个点坐标,再给各个点设置高度,即可得到所有的隧道截面世界坐标。向量与角度的计算可以参考这篇文章:Cesium计算向量、角度、距离
关键代码:

this.getPointByDirectionAndLen = function (position, angle, len) {
  let matrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(angle));
  let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
  Cesium.Matrix4.multiply(matrix, rotationZ, matrix);
  let result;
  result = Cesium.Matrix4.multiplyByPoint(
      matrix,
      new Cesium.Cartesian3(0, len, 0),
      new Cesium.Cartesian3()
  );
  return result;
};
2.4、获取开挖点(蓝色点)

经过上面的步骤,我们已经得到隧道截面坐标(下图中C坐标)、隧道线向量(AB)。根据公式:D坐标-C坐标 = 向量AB
可以得到D坐标
SuperMap iClient3D for Cesium 构建隧道
得到C、D坐标后,使用通视分析(sightline)得到观察点C到目标点D,之间与地形的障碍点;依次对每个截面坐标做以上操作,即可得到所有障碍点
关键代码:

this.getBarrierArray = function (LonLatArr,sightline) {
  let pointA = new Cesium.Cartesian3.fromDegrees(posArray[0].x,posArray[0].y,posArray[0].z);
  let pointB = new Cesium.Cartesian3.fromDegrees(posArray[1].x,posArray[1].y,posArray[1].z);
  let index = 0;
  //向量AB
  const positionvector = Cesium.Cartesian3.subtract(pointB, pointA, new Cesium.Cartesian3());
  myfun(index);
  let BarrierArray = [];
  function myfun(index){
    if(index < LonLatArr.length){
      let cart = new Cesium.Cartesian3.fromDegrees(LonLatArr[index][0], LonLatArr[index][1], LonLatArr[index][2]);
      let posD = {
        x: cart.x + positionvector.x,
        y: cart.y + positionvector.y,
        z: cart.z + positionvector.z
      };
      let thisArray = [];
      thisArray.push(cart);
      thisArray.push(posD);
      var name = "point" + index;
      sightline.viewPosition = Cartesian2toDegrees(thisArray[0]);
      sightline.addTargetPoint({
        position: Cartesian2toDegrees(thisArray[1]),
        name: name
      });
      setTimeout(()=>{
        let barrp = sightline.getBarrierPoint(name);
        console.log(barrp);

        if(!barrp.isViewer){
          BarrierArray.push(barrp.position.longitude * (180/Math.PI));
          BarrierArray.push(barrp.position.latitude * (180/Math.PI));
          BarrierArray.push(barrp.position.height);
        }
        sightline.removeAllTargetPoint();
      },30);
      index++;
      setTimeout(()=>{
        myfun(index)
      },40)
    }
  }

  function Cartesian2toDegrees(position) {
    var cartographic = Cesium.Cartographic.fromCartesian(position);
    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
    var height = cartographic.height;

    return [longitude, latitude, height];
  }

  return BarrierArray
};

2.5、地形开挖

得到所有障碍点后,通过这些点进行地形开挖

viewer.scene.globe.addExcavationRegion({
    name: 'ggg',
    position: brruipos,
    height: dep,
    transparent: false
});
范例:

链接:https://pan.baidu.com/s/1sDwfmI6hBFIS3eCt7tBGug
提取码:6655文章来源地址https://www.toymoban.com/news/detail-427221.html

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

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

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

相关文章

  • SuperMap iClient3D 11i (2023) SP1 for Cesium之移动实体对象

     作者:nannan 目录 前言 一、代码思路 1.1 绘制面实体对象 1.2 鼠标左键按下事件 1.3 鼠标移动事件 1.4 鼠标左键抬起事件 二、运行效果 三、注意事项        SuperMap 官网三维前端范例 编辑线面,可以对面实体对象的节点进行增加、删除以及修改位置。那可不可以整个线/面对

    2024年02月09日
    浏览(34)
  • SuperMap iClient3D for WebGL查询地图栅格值

    栅(shān)格数据就是将空间分割成有规律的网格,每一个网格称为一个单元,并在各单元上赋予相应的属性值来表示实体的一种数据形式。每一个单元(像素)的位置由它的行列号定义,所表示的实体位置隐含在栅格行列位置中,数据组织中的每个数据表示地物或现象的非几何

    2024年02月04日
    浏览(35)
  • 【超图】SuperMap iClient3D for WebGL/WebGPU ——颜色(1)

    作者:taco         在项目中通常会出现,高亮对象。给对象设置颜色的一些问题。那么针对颜色设置在超图的 iClient3D for WebGl/WebGPU 中又提供了哪些方式呢?本篇文章将介绍一些颜色的设置方法。以及一些颜色的参数设置。         在iClient3D for WebGl/WebGPU 中主要以Supe

    2024年02月04日
    浏览(41)
  • 【超图】SuperMap iClient3D for WebGL/WebGPU —— 坐标系&位置 —— Cartesian2

    作者:taco         说到关于地理必然逃不开位置的关系。借用百度百科的内容来说 地理学(geography) ,是研究地球表层 空间地理 要素或者地理综合体 空间分布规律 、时间演变过程和 区域 特征的一门学科。 所以 位置坐标系 必然逃不掉了。那么在SuperMap iClient3D for Web

    2024年01月16日
    浏览(39)
  • iClient3D for Cesium&WebGL入门之使用vscode以服务方式运行调试

    作者:超图研究院技术支持中心-于丁 iClient3D for CesiumWebGL入门之使用vscode以服务方式运行调试 相信大家第一次使用SuperMap iClient3D for Cesium或SuperMap iClient3D for WebGL的时候,都遇到过和我一样的事情: 在文件夹中直接打开html的示例代码文件于浏览器中; 或者使用vscode安装open

    2024年02月04日
    浏览(37)
  • 超图iClient3DforCesium地形、影像、模型、在线影像交互示例

    数据源:基于iserver发布的三维场景(地形、影像、BIM模型) + 在线arcgis影像 应用:目录树展示源数据列表、目录树控制源数据可视化结果显隐、BIM模型点选查询关联属性

    2024年02月03日
    浏览(34)
  • SuperMap Hi-Fi 3D SDK for Unity设置渲染范围

    kele     在三维项目中经常会使用到大屏,有可能会用到4K屏、8K屏、长屏、带鱼屏等高分辨率的屏幕,这些屏幕的其中一个特点是其长宽比比较大,有些时候会是几块16:9的屏幕横向拼接而成,这就使得这整个屏幕在水平方向上跨度很大,渲染内容增加。通常情况下会是

    2024年02月09日
    浏览(28)
  • SuperMap Hi-Fi 3D SDK for Unreal问题集锦

    ###前言 使用SuperMap Hi-Fi 3D SDK for Unreal,会遇到一些崩溃或者加加载不上等问题,本文档手收集记录一些使用过程总可能会遇到的一些问题并给予相应的解决方案,很多问题新版本已做优化,推荐大家可使用前,可在http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx 地址下载最

    2024年02月06日
    浏览(42)
  • SuperMap Hi-Fi 3D SDK for Unity基础开发教程

    作者:kele 众所周知,游戏引擎(Unity)功能强大,可以做出很多炫酷的游戏和动画效果,这部分功能的实现往往不仅仅是靠可视化界面就能够实现的,还需要代码开发。SuperMap Hi-Fi SDKS for Unity游戏引擎插件能够实现地理数据与游戏引擎相结合,碰撞出更绚烂的火花,目前Sup

    2024年02月03日
    浏览(37)
  • SuperMap Hi-Fi 3D SDK for Unity制作游戏引擎材质

    kele     在交通,电力,规划等行业中,有的对象常常具有很强的质感,比如金属质感的 钢轨,电力塔;陶瓷材质的绝缘子;玻璃材质的建筑幕墙等,但常规方式的表现效果 往往差强人意。     游戏引擎(Unity3D)中已有丰富的材质资源库,比如玻璃,金属等材质,这

    2024年02月09日
    浏览(75)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包