已被阅读 159 次 | 文章分类:cesium | 2024-08-18 22:17
使用cesium实现地面挖坑(挖方)效果;可以用来做地下放大镜效果查询等功能
1 效果
如下所示,实现一个挖坑效果;坑的表面材质可以使用任意图片替代
如上展示了静态挖坑的效果和移动效果。移动效果可用来查看地下管线等要素
2 完整代码
/**
* 地面挖坑效果完整代码
*/
import {
Viewer,
Cesium3DTileset ,
Color,
ImageMaterialProperty,
ClippingPlane,
Cartesian3,
ClippingPlaneCollection,
Plane,
Ion
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import cesiumUtil from '../utils/cesiumUtil';
import viewOption from './viewerOption';
Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNzBlMTYxMC02YTkwLTQ5Y2EtOTU2NC1kNDUwYTg5ZGNjZTkiLCJpZCI6ODc0Mywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MjY0MzE0NH0.1hZ8wb3Tq-58PXFaG9o-XPS0U7FmaOMr1qZocIEkIBM"
var V = new Viewer('gisContainer', viewOption);
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';
var globe = V.scene.globe;
globe.depthTestAgainstTerrain = true;
let points=[];
let polygon_arr=[];
// 原始坐标
let coors=[
[116.611118,40.043265],
[116.627775,40.044821],
[116.622637,40.048625],
[116.615127,40.047588]
]
for(let i=0;i<coors.length;i++){
let _cartesian3=cesiumUtil.WGS84_to_Cartesian3({
lng:coors[i][0],
lat:coors[i][1],
alt:0
});
points.push(_cartesian3);
polygon_arr.push(coors[i][0]);
polygon_arr.push(coors[i][1]);
}
// 存储ClippingPlane集合
var clippingPlanes = [];
for (var i = 0; i < points.length; ++i) {
var nextIndex = (i + 1) % points.length; // 0 1 2 3 0
var midpoint = Cartesian3.add(points[i], points[nextIndex], new Cartesian3());
midpoint = Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);
var up = Cartesian3.normalize(midpoint, new Cartesian3());
var right = Cartesian3.subtract(points[nextIndex], midpoint, new Cartesian3());
right = Cartesian3.normalize(right, right);
var normal = Cartesian3.cross(right, up, new Cartesian3());
normal = Cartesian3.normalize(normal, normal);
var originCenteredPlane = new Plane(normal, 0.0);
var distance = Plane.getPointDistance(originCenteredPlane, midpoint);
clippingPlanes.push(new ClippingPlane(normal, distance));
}
globe.clippingPlanes = new ClippingPlaneCollection({
planes: clippingPlanes,
edgeWidth: 1.0,
edgeColor: Color.WHITE
});
V.entities.add({
polygon: {
hierarchy: Cartesian3.fromDegreesArray(polygon_arr),
material: new ImageMaterialProperty({
image: "./statics/imgs/soil1.jpg"
}),
extrudedHeight: -200, //如果是fromDeGreeArrayHeight 这里为0即可
perPositionHeight: true, // 这个要设置true
closeBottom:true,
closeTop:false
}
});
V.camera.setView({
destination : Cartesian3.fromDegrees(116.611118,40.043265, 100.0)
});
3 放大镜效果
通过实现挖方多边形跟随鼠标移动;可以实现查看管线等地下要素的放大镜效果
全部代码如下
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号