164 lines
7.0 KiB
HTML
164 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head lang="en">
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
<title>Tools-34TrailLine-纹理流动线</title>
|
|
<!-- <script src="../../Cesium1.48/Cesium/Cesium.js"></script>
|
|
<script src="1-2ImageryProvider-WebExtend.js"></script> -->
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
|
|
<style>
|
|
html, body, #cesiumContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
#menu {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 10px;
|
|
z-index: 999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer" class="fullSize"></div>
|
|
<div id="creditContainer" style="display: none;"></div>
|
|
<div id="menu">
|
|
<p>
|
|
<button onclick="setvisible('position')">定位</button>
|
|
<button onclick="setvisible('add')">添加</button>
|
|
<button onclick="setvisible('del')">删除</button>
|
|
</p>
|
|
</div>
|
|
<script>
|
|
|
|
Cesium.Ion.defaultAccessToken =
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
terrainProvider: Cesium.createWorldTerrain(),
|
|
});
|
|
|
|
var lat = 42.006;
|
|
var lon = 128.055;
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
//取消双击事件
|
|
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
|
//设置homebutton的位置
|
|
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
|
|
Cesium.Rectangle.fromDegrees(lon - 1, lat - 1, lon + 1, lat + 1);//Rectangle(west, south, east, north)
|
|
//设置初始位置
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 300000)
|
|
});
|
|
|
|
|
|
/*
|
|
流动纹理线
|
|
color 颜色
|
|
duration 持续时间 毫秒
|
|
*/
|
|
function PolylineTrailLinkMaterialProperty(color, duration) {
|
|
this._definitionChanged = new Cesium.Event();
|
|
this._color = undefined;
|
|
this._colorSubscription = undefined;
|
|
this.color = color;
|
|
this.duration = duration;
|
|
this._time = (new Date()).getTime();
|
|
}
|
|
Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
|
|
isConstant: {
|
|
get: function () {
|
|
return false;
|
|
}
|
|
},
|
|
definitionChanged: {
|
|
get: function () {
|
|
return this._definitionChanged;
|
|
}
|
|
},
|
|
color: Cesium.createPropertyDescriptor('color')
|
|
});
|
|
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
|
|
return 'PolylineTrailLink';
|
|
}
|
|
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
|
|
if (!Cesium.defined(result)) {
|
|
result = {};
|
|
}
|
|
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
|
|
result.image = Cesium.Material.PolylineTrailLinkImage;
|
|
result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
|
|
return result;
|
|
}
|
|
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
|
|
return this === other ||
|
|
(other instanceof PolylineTrailLinkMaterialProperty &&
|
|
Property.equals(this._color, other._color))
|
|
}
|
|
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
|
|
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
|
|
Cesium.Material.PolylineTrailLinkImage = "./images/colors1.png";//colors
|
|
Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
|
|
{\n\
|
|
czm_material material = czm_getDefaultMaterial(materialInput);\n\
|
|
vec2 st = materialInput.st;\n\
|
|
vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
|
|
material.alpha = colorImage.a * color.a;\n\
|
|
material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
|
|
return material;\n\
|
|
}";
|
|
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
|
|
fabric: {
|
|
type: Cesium.Material.PolylineTrailLinkType,
|
|
uniforms: {
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
|
|
image: Cesium.Material.PolylineTrailLinkImage,
|
|
time: 1000
|
|
},
|
|
source: Cesium.Material.PolylineTrailLinkSource
|
|
},
|
|
translucent: function (material) {
|
|
return true;
|
|
}
|
|
});
|
|
|
|
var isAdd = false;
|
|
function setvisible(value) {
|
|
switch (value) {
|
|
case 'position':
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 300000)
|
|
});
|
|
break;
|
|
case 'add':
|
|
if (!isAdd) {
|
|
entity = viewer.entities.add({
|
|
name: 'PolylineTrail',
|
|
polyline: {
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([lon, lat, 2500,
|
|
lon + 10, lat, 2500,
|
|
lon + 10, lat + 10, 2500, ]),
|
|
width: 15,
|
|
material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.ORANGE, 30000)
|
|
}
|
|
});
|
|
isAdd = true;
|
|
}
|
|
break;
|
|
case 'del':
|
|
if (isAdd) {
|
|
viewer.entities.remove(entity);
|
|
isAdd = false;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |