Cesium|xt3d 兼容火星科技模型压平效果
Cesium|xt3d 兼容火星科技模型压平效果
- 效果
- 代码
- 预览地址
效果
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cesium|xt3d</title>
<!-- 引入Cesium -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Cesium.js"></script> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Widgets/widgets.css">
<script src="http://mars3d.cn/lib/Cesium/Cesium.js"></script>
<script src="http://mars3d.cn/lib/mars3d/plugins/widget/mars3d-widget.js"></script>
<script src="http://mars3d.cn/lib/mars3d/mars3d.js"></script>
<script src='http://www.xt3d.cn/libs/turf.min.js'></script>
<!-- 引入xt3d -->
<script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
<style>
html,
body,
#map3d {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.btn-container {
position: absolute;
left: 10px;
top: 90px;
padding: 10px 15px;
border-radius: 4px;
border: 1px solid rgba(128, 128, 128, 0.5);
color: #ffffff;
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
max-width: 380px;
}
button {
background: transparent;
border: 1px solid #00d0ffb8;
color: white;
padding: 7px 9px;
border-radius: 2px;
margin: 3px;
cursor: pointer
}
.tip-item {
margin: 2px 0px;
padding: 5px 1px;
}
</style>
</head>
<body>
<div id="map3d"></div>
<div class="btn-container">
<button onclick="drawActivate('Polygon')">绘制压平多边形</button>
<button onclick="clearFlat()">清除</button>
</div>
</div>
<script>
//测试火星科技压平功能 其他功能可自行测试
let xt3dInit = {
init(el) {
this.initViewer(el);
},
//初始化viewer
initViewer(el) {
//合并属性参数
let mapOptions = {
scene: {
center: {
lat: 25.072996,
lng: 102.648666,
alt: 3773,
heading: 29,
pitch: -45
},
},
//方式1：在创建地球前的参数中配置
basemaps: [{
name: "mapbox影像图",
icon: "img/basemaps/mapboxSatellite.png",
type: "mapbox",
username: "marsgis",
styleId: "cki0adkar2b0e19mv9tpiewld",
token: mars3d.Token.mapbox,
show: true,
}],
};
//创建三维地球场景
let map = new mars3d.Map(el, mapOptions);
xt3d.adapter(map.viewer);
//固定光照，避免gltf模型随时间存在亮度不一致。
map.fixedLight = true;
// //加模型
var tilesetLayer = new mars3d.layer.TilesetLayer({
url: "http://data.mars3d.cn/3dtiles/qx-xiaoqu/tileset.json",
maximumScreenSpaceError: 6,
maximumMemoryUsage: 2048,
flyTo: true,
});
map.addLayer(tilesetLayer);
// //模型压平处理类
tilesetFlat = new mars3d.thing.TilesetFlat({
layer: tilesetLayer,
positions: [
[102.656385, 25.087349, 1865],
[102.660091, 25.085633, 1865],
[102.658175, 25.081644, 1865],
[102.654452, 25.084029, 1865],
],
height: 0,
});
map.addThing(tilesetFlat);
this.tilesetFlat = tilesetFlat;
this.viewer = map.viewer;
initXT3dObject(this.viewer);
},
destroy() {
this.viewer.entities.removeAll();
this.viewer.imageryLayers.removeAll(true);
this.viewer.destroy();
}
}
xt3dInit.init("map3d");
//创建xt3d对象 只需拿到viewer对象即可
//xt3d基本绘制类
let entityDraw = new xt3d.Map3dTools.EntityDraw(xt3dInit.viewer);
entityDraw.DrawEndEvent.addEventListener((result, positions) => {
result.remove();
console.log(positions);
//绘制完成后进行裁剪
xt3dInit.tilesetFlat.addArea(positions);
});
//界面按钮事件
function drawActivate(type) {
entityDraw.activate(type);
xt3dInit.tilesetFlat.clear();
}
function clearFlat() {
xt3dInit.tilesetFlat.clear();
}
function initXT3dObject(viewer) {
let position = Cesium.Cartesian3.fromDegrees(102.65637341021305, 25.087257240025178, 1864.392781381943);
let wall = new xt3d.WallObject.CircleWall(viewer, position, {
radius: 360,
wallHeight: 120,
materialType: xt3d.WallObject.MaterialTypes.LINEFLOW,
wallColor: Cesium.Color.GREEN
});
}
</script>
</body>
</html>
预览地址
xt3d 在线预览地址