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://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;
}
</style>
</head>
<body>
<div id="map3d"></div>
<script>
let xt3dInit = {
init(el) {
this.initViewer(el);
this.addData();
this.setView();
},
//初始化viewer
initViewer(el) {
this.viewer = new Cesium.Viewer(el, {
infoBox: false,
selectionIndicator: false,
navigation: false,
animation: false,
shouldAnimate: false,
timeline: false,
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
});
this.viewer.imageryLayers.removeAll(true); //删除所有底圖
//是否開啟抗鋸齒
this.viewer.scene.fxaa = true;
this.viewer.scene.postProcessStages.fxaa.enabled = true;
},
//添加資料
addData() {
this.loadBuildData();
this.addPolylineFlyings();
},
//添加飛線
addPolylineFlyings() {
fetch('/data.xt3d.cn/assets/data/nanshan/nanshan-road1.geojson').then(res => {
return res.json();
}).then(res => {
var bbox = turf.bbox(res);
let points = turf.randomPoint(100, {
bbox: bbox
}); //生成随機點
let features = points.features;
let point;
let startPosition;
let endPosition;
features.forEach(item => {
point = item.geometry.coordinates;
startPosition = Cesium.Cartesian3.fromDegrees(point[0], point[1], 0);
endPosition = Cesium.Cartesian3.fromDegrees(point[0], point[1], 5000 * Math.random())
this.addPolylineFlying([startPosition, endPosition]);
})
})
},
addPolylineFlying(positions) {
this.viewer.entities.add({
polyline: {
positions: positions,
width: 2,
material: new xt3d.PolylineObject.PolylineTrailMaterialProperty({
speed: 6 * Math.random(),
color: Cesium.Color.CYAN,
percent: 0.1,
gradient: 0.01,
}),
}
});
},
//加載建築物資料
loadBuildData() {
let tileset = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: "/data.xt3d.cn/assets/data/nanshan/nanshan_buildings/tileset.json"
}));
tileset.readyPromise.then((tileset) => {
let cs = new xt3d.BuildingEffects.CustomShaderEffect(this.viewer, tileset, {
color: '0.2, 0.5, 1.0, 1.0', //顔色 rgba 浮點型
glowRange: true, //是否顯示光環
glowRangeHeight: '100.0', //光環範圍 浮點型
});
}).otherwise(function(error) {
console.error(error);
});
},
setView() {
this.viewer.scene.camera.setView({
duration: 1,
destination: {
x: -2392968.857,
y: 5391789.3995,
z: 2423807.75055
},
orientation: {
heading: 0.0029569,
pitch: -0.474585,
roll: 0.0000078,
}
});
},
destroy() {
this.viewer.entities.removeAll();
this.viewer.imageryLayers.removeAll(true);
this.viewer.destroy();
}
}
xt3dInit.init("map3d");
</script>
</body>
</html>
預覽位址
xt3d 線上預覽位址
![Cesium|xt3d動态線效果代碼預覽位址[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)