cesium-d3kit/examples/material_line3.html

57 lines
1.9 KiB
HTML

<div id="viewer-container"></div>
<script>
let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
let d3kit = new Cesium.D3Kit(viewer)
d3kit.setDefSceneConfig()
d3kit.setBloomLightScene()
let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
style: 'dark'
}));
var tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'data/3DTiles/building/tileset.json'
}));
var colors = [
new Cesium.Color(77 / 255, 201 / 255, 255 / 255, 1),
new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 1),
new Cesium.Color(221 / 255, 221 / 255, 221 / 255, 1)
];
tilesets.readyPromise.then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${height} >= 300", "rgba(0, 149, 251, 0.3)"],
["${height} >= 200", "rgb(0, 149, 251, 0.3)"],
["${height} >= 100", "rgb(0, 149, 251, 0.3)"],
["${height} >= 50", "rgb(0, 149, 251, 0.3)"],
["${height} >= 25", "rgb(0, 149, 251, 0.3)"],
["${height} >= 10", "rgb(0, 149, 251, 0.3)"],
["${height} >= 5", "rgb(0, 149, 251, 0.3)"],
["true", "rgb(0, 149, 251, 0.3)"]
]
}
});
viewer.flyTo(tileset)
var startPoint = Cesium.Cartesian3.fromDegrees(104.081701757991, 30.627042558105988)
for (var i = 0, len = 8; i < len; i++) {
var endPoint = Cesium.Cartesian3.fromDegrees((Math.random() / 100) + 104.081701757991, (Math.random() / 100) + 30.627042558105988);
var positions = d3kit.getLinkedPointList(startPoint, endPoint, 100000, 50);
var glowingLine = viewer.entities.add({
polyline: {
positions: positions,
width: 5,
material: new Cesium.PolylineFlowMaterialProperty({
color: colors[i % 3],
duration: 200
})
}
});
}
});
</script>