earth3d-sdk
v1.0.14
Published
The package named earth3d-sdk is designed for extension of MaterialProperty API in Cesium.js
Downloads
7
Readme
description
Custom Material-Property based on Cesium.MaterialProperty interface, maybe you could get more information from this article Cesium:自定义MaterialProperty..
installation
npm i earth3d-sdk
or
yarn add earth3d-sdkexample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="./Cesium/Widgets/widgets.css" /> -->
<title>Document</title>
<style>
@import url("./Cesium/Widgets/widgets.css");
*,
body,
html {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body,
#viewerContainer {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="viewerContainer"></div>
<script src="./Cesium/Cesium.js"></script>
<script type="module">
import earth3DSdk from './node_modules/earth3d-sdk/earth3DSdk.js'
console.log(earth3DSdk)
Cesium.Ion.defaultAccessToken = "YOUR_ACCESS_TOKEN";
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
73.55,
3.85,
135.083,
53.55
);
//初始化三维场景
function initViewer(_viewerContainer, _options = {}) {
const viewer = new Cesium.Viewer(_viewerContainer, {
animation: false,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
scene3DOnly: true,
clockViewModel: new Cesium.ClockViewModel(new Cesium.Clock()),
terrainProvider:
new Cesium.EllipsoidTerrainProvider({
ellipsoid: Cesium.Ellipsoid.WGS84,
}),
skyBox: false,
fullscreenElement: document.body,
useDefaultRenderLoop: true,
targetFrameRate: undefined,
showRenderLoopErrors: true,
automaticallyTrackDataSourceClocks: true,
contextOptions: undefined,
mapProjection: new Cesium.WebMercatorProjection(Cesium.Ellipsoid.WGS84),
dataSources: new Cesium.DataSourceCollection(),
skyAtmosphere: false,
shouldAnimate: true,
})
viewer.scene.globe.baseColor = Cesium.Color.BLACK;
_options._hideGlobe
? ((viewer.scene.globe.translucency.enabled = true), //此属性设置为true-下面的设置才能生效
(viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT),
(viewer.scene.globe.undergroundColor = Cesium.Color.TRANSPARENT))
: ''
_options._defineBgImage
? (viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT)
: ''
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
const pixelRatio = window.devicePixelRatio
viewer.resolutionScale = pixelRatio //window.devicePixelRatio
}
viewer.scene.fxaa = true
viewer.scene.postProcessStages.fxaa.enabled = true
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 1)
viewer._cesiumWidget._creditContainer.style.display = 'none'
!!_options.removeAll ? viewer.scene.imageryLayers.removeAll(true) : "";
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
)
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.WHEEL,
Cesium.CameraEventType.PINCH,
]
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.PINCH,
Cesium.CameraEventType.RIGHT_DRAG,
]
return viewer
}
const viewer = initViewer("viewerContainer", { removeAll: false });
viewer.scene.debugShowFramesPerSecond = true;// 显示帧率
//飞到目标点
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(121.4525737, 30.8452557, 121.97325117, 31.39091161),//Cesium.Cartesian3.fromDegrees(121.47, 31.23, 1500),// Cesium.Rectangle.fromDegrees(118.0, 32.0, 118.1, 32.1),
duration: 0,
});
//测试代码
const positions = [
{
lng: 119.0,
lat: 31.0,
},
{
lng: 119.0,
lat: 31.2,
},
{
lng: 119.1,
lat: 31.2,
},
{
lng: 119.15,
lat: 31.1,
},
{
lng: 119.1,
lat: 31.0,
},
].map(({ lng, lat }) => Cesium.Cartesian3.fromDegrees(lng, lat));
//半透明蓝色
const entity = new Cesium.Entity({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(positions, []),
material: //Cesium.Color.fromCssColorString("#30ECFF").withAlpha(0.3),
new earth3DSdk.FadeMaterialProperty({
color: Cesium.Color.fromCssColorString("#30ECFF").withAlpha(0.5),
center: {
x: 0.5,
y: 0.5
},
power: 1.0,
stretch: 0
})
},
polyline: {
positions,
width: 2.5,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.fromCssColorString("#30ECFF"),
dashLength: 12.0,
}),
}
});
const flowLine = new Cesium.Entity({
polyline: {
positions: positions,
material: new earth3DSdk.FlowlineMaterialProperty(
{
// color: Cesium.Color.GREEN.withAlpha(0.8)
color: Cesium.Color.fromCssColorString("#00b0f0").withAlpha(0.6),
}
),
width: 2,
}
})
viewer.entities.add(flowLine)
const circle = new Cesium.Entity({
position: Cesium.Cartesian3.fromDegrees(121.64, 31.01),
ellipse: {
semiMajorAxis: 5000,
semiMinorAxis: 5000,
material:
new earth3DSdk.RadarDiffuseCircleMaterialProperty({
color: Cesium.Color.PURPLE.withAlpha(1.0),
speed: 25.0,
power: 0.35,
borderColor: Cesium.Color.RED.withAlpha(0.5),
})
}
})
viewer.entities.add(circle);
//双面纹理墙体/渐变墙
const wall = viewer.entities.add({
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
120.0,
31.0,
800.0,
118.5,
31.0,
800.0,
118.5,
31.2,
800.0,
120.0,
31.2,
800.0,
120.0,
31.0,
800.0,
]),
material:
new earth3DSdk.HloopWallMaterialProperty({
color: Cesium.Color.ORANGE,
// image:'./materialProperty/assets/h_wall_img.png',
repeat: new Cesium.Cartesian2(4, 1),
emission: new Cesium.Cartesian3(0.12)
}),
// new earth3DSdk.VloopWallMaterialProperty({
// repeat:new Cesium.Cartesian2(1,3),
// speed:30.0,
// }),
}
})
// console.log(new earth3DSdk.HloopMaterialProperty())
viewer.zoomTo(wall)
</script>
</body>
</html>preview
