“任意多边形地形开挖” 是“地形开挖”的补充篇,在这节里,我们介绍关于如何使用任意多边形对地形进行开挖,同时,由于有不少小伙伴也咨询了关于“地形开挖”篇后序内容中的填充地形的效果,之前没放出来,是想让小伙伴有个思考的过程,现在放出来,也是提供一种解决方法。

效果图

直接上代码说明方法

1、使用鼠标交互事件,采集需要开挖的范围

注: 这里要特别注意一点,为了下面的计算 ClippingPlane 方便,采集点顺序最好是 逆时针,如果点集的组织是顺时针,需要首先逆序成逆时针,关于如果判断一个点集是否是顺时针或者是逆时针,可以用向量法求多边形面积的方式,如果为正,则为顺时针,否者为逆时针。或者使用JS插件计算,比如turf.js。

  • var points = [
  • new Cesium.Cartesian3(-1715292.6999753984, 4993153.157628936, 3566663.752912529),
  • new Cesium.Cartesian3(-1715285.8150713604, 4993167.072601330,3566647.6921528564),
  • new Cesium.Cartesian3(-1715286.5985765400, 4993181.309761941, 3566627.519787549),
  • new Cesium.Cartesian3(-1715299.0249209427, 4993191.177501195, 3566607.861264360),
  • new Cesium.Cartesian3(-1715349.5762367432, 4993176.675656664, 3566603.878289345),
  • new Cesium.Cartesian3(-1715375.5538853381, 4993159.990032478, 3566614.671147202),
  • new Cesium.Cartesian3(-1715370.1945772346, 4993141.041835706, 3566643.580587877),
  • new Cesium.Cartesian3(-1715359.7019716015, 4993131.063945592, 3566662.468046927),
  • new Cesium.Cartesian3(-1715321.9141253997, 4993137.762602262, 3566671.205164391)
  • ];

2、根据点集计算 ClippingPlane (这个计算方式来源于官网示例)

  • var pointsLength = points.length;
  • var clippingPlanes = []; // 存储ClippingPlane集合
  • for (var i = 0; i < pointsLength; ++i) {
  • var nextIndex = (i + 1) % pointsLength;
  • var midpoint = Cesium.Cartesian3.add(points[i], points[nextIndex], new Cesium.Cartesian3());
  • midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);
  •  
  • var up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3());
  • var right = Cesium.Cartesian3.subtract(points[nextIndex], midpoint, new Cesium.Cartesian3());
  • right = Cesium.Cartesian3.normalize(right, right);
  •  
  • var normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3());
  • normal = Cesium.Cartesian3.normalize(normal, normal);
  •  
  • var originCenteredPlane = new Cesium.Plane(normal, 0.0);
  • var distance = Cesium.Plane.getPointDistance(originCenteredPlane, midpoint);
  •  
  • clippingPlanes.push(new Cesium.ClippingPlane(normal, distance));
  • }

3、赋值给globe的 clippingPlanes 属性

更多详情见下面链接文章

Cesium专栏-地形开挖2-任意多边形开挖(附源码下载)

文章提供源码,对本专栏感兴趣的话,可以关注一波

Cesium专栏-地形开挖2-任意多边形开挖(附源码下载)的更多相关文章

  1. Cesium专栏-空间分析之坡度分析(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  2. Cesium专栏-样条插值(平滑路径、飞行动画,源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  3. cesium 之加载地形图 Terrain 篇(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  4. leaflet结合turf.js实现多边形分割(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. cesium 之地图切换展示效果篇(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  6. Cesium专栏-填挖方分析(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  7. Cesium专栏-雷达遮罩动态扫描(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  8. cesium 雷达扫描(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  9. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

随机推荐

  1. python之turtle画蚊香

    原理:利用turtle绘制圆形,并使圆半径逐步增加 代码如下: import turtle turtle.pensize(30) for i in range(30): turtle.circle(i ...

  2. 在Kubernetes上运行有状态应用:从StatefulSet到Operator

    一开始Kubernetes只是被设计用来运行无状态应用,直到在1.5版本中才添加了StatefulSet控制器用于支持有状态应用,但它直到1.9版本才正式可用.本文将介绍有状态和无状态应用,一个通过K ...

  3. 01 JavaScript变量的声明、变量的使用、变量的命名规范和规则

    变量的声明,关键字:var //声明一个变量 var name; //给变量赋值 name = '哈士奇'; //声明并赋值一个变量 var name = '哈士奇'; 变量的使用 //声明并赋值一个 ...

  4. 高逼格利器之Python闭包与装饰器

    生活在魔都的小明,终于攒够了首付,在魔都郊区买了一套房子:有一天,小明踩了狗屎,中了一注彩票,得到了20w,小明很是欢喜,于是想干脆用这20万来装修房子吧(decoration): 整个装修过程,小明 ...

  5. 微信小程序setData复杂数组的更新、删除、添加、拼接

    众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染.在此分享小程序里复杂数组的更新.删除.添加.拼接 初始数据 数组嵌套对象 data: { cartList = [{ ...

  6. 能不能自己写个类,也叫java.lang.String?

    可以,但在应用的时候,需要用自己的类加载器去加载,否则,系统的类加载器永远只是去加载jre.jar包中的那个java.lang.String.由于在tomcat的web应用程序中,都是由webapp自 ...

  7. 小白学 Python 爬虫(14):urllib 基础使用(四)

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  8. zz:NETCONF协议详解

    随着SDN的大热,一个诞生了十年之久的协议焕发了第二春,它就是NETCONF协议.如果你在两年前去搜索NETCONF协议,基本得到的信息都是"这个协议是一个网管协议,主要目的是弥补SNMP协 ...

  9. Spring Security OAuth2 Demo —— 隐式授权模式(Implicit)

    本文可以转载,但请注明出处https://www.cnblogs.com/hellxz/p/oauth2_impilit_pattern.html 写在前面 在文章OAuth 2.0 概念及授权流程梳 ...

  10. 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用

    一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...