采用vue+cesium实现
引入js部分
import Cesium from "cesium/Cesium";
export class PolylineTrailMaterialProperty {
constructor(options) {
options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = options.color;
this.duration = options.duration;
this.trailImage = options.trailImage;
this._time = performance.now();
}
}
Cesium.defineProperties(PolylineTrailMaterialProperty.prototype, {
isConstant: {
get: function() {
return false;
}
},
definitionChanged: {
get: function() {
return this._definitionChanged;
}
},
color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailMaterialProperty.prototype.getType = function(time) {
return 'PolylineTrail';
}
PolylineTrailMaterialProperty.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.PolylineTrailImage;
result.image = this.trailImage;
result.time = ((performance.now() - this._time) % this.duration) / this.duration;
return result;
}
PolylineTrailMaterialProperty.prototype.equals = function(other) {
return this === other ||
(other instanceof PolylineTrailMaterialProperty &&
Cesium.Property.equals(this._color, other._color))
}
Cesium.Material.PolylineTrailType = 'PolylineTrail';
Cesium.Material.PolylineTrailImage = "images/colors.png";
Cesium.Material.PolylineTrailSource = "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.PolylineTrailType, {
fabric: {
type: Cesium.Material.PolylineTrailType,
uniforms: {
color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
image: Cesium.Material.PolylineTrailImage,
time: 0
},
source: Cesium.Material.PolylineTrailSource
},
translucent: function(material) {
return true;
}
});
Cesium.PolylineTrailMaterialProperty = PolylineTrailMaterialProperty;
vue应用部分
<template>
<div class="fullSize" id="cesiumContainer"></div>
</template>
<script>
import "cesium/Widgets/widgets.css";
import Cesium from "cesium/Cesium";
import PolylineTrailMaterialProperty from "@/unit/PolylineTrailMaterialProperty";
export default {
name: "CesiumDynamicLine1",
//
data() {
return {
viewer: null
};
},
mounted() {
let viewerOption = {
geocoder: false, // 地理位置查询定位控件
homeButton: false, // 默认相机位置控件
timeline: false, // 时间滚动条控件
navigationHelpButton: false, // 默认的相机控制提示控件
fullscreenButton: false, // 全屏控件
scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
baseLayerPicker: false, // 底图切换控件
shouldAnimate: true, //是否开始动画
// useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true
selectionIndicator: true, //是否显示选取指示器组件
// targetFrameRate:60,
vrButton: true,
showRenderLoopErrors: true,
requestAnimationFrame: true,
// showRenderLoopErrors : false,
animation: false // 控制场景动画的播放速度控件
};
this.viewer = new Cesium.Viewer(this.$el, viewerOption);
this.create();
},
methods: {
create() {
//创建射线
var data = {
startPoint: {
id: 0,
lon: 114.302312702,
lat: 30.598026044,
size: 20,
height: 0,
url:"3d/leida/leida.gltf",
color: Cesium.Color.PURPLE
},
center:
{
id: 1,
lon: 115.028495718,
lat: 30.200814617,
height: 100000,
color: Cesium.Color.YELLOW,
url:"3d/weixing_1.gltf",
size: 15
},
endPoint: {
id: 0,
lon: 116.302312702,
lat: 30.598026044,
size: 20,
height: 0,
url:"3d/junjian/junjian.gltf",
color: Cesium.Color.PURPLE
},
options: {
name: "",
polyline: {
width: 2,
trailImage: "images/color.png",
trailImage1: "images/green.png",
material: [Cesium.Color.GREEN, 3000]
}
}
};
this.createFlyLines(data);
},
createFlyLines(data) {
var self = this;
/***** 创建发送目标*****/
const hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-90), 0, 0);
const startPoint = Cesium.Cartesian3.fromDegrees(
data.startPoint.lon,
data.startPoint.lat,
data.startPoint.height
);
const centerPoint = Cesium.Cartesian3.fromDegrees(
data.center.lon,
data.center.lat,
data.center.height
);
const endPoint = Cesium.Cartesian3.fromDegrees(
data.endPoint.lon,
data.endPoint.lat,
data.endPoint.height
);
this.viewer.entities.add({
position: startPoint,
orientation: this.Cesium.Transforms.headingPitchRollQuaternion(startPoint, hpRoll),
model:{
uri: data.startPoint.url,
minimumPixelSize: 32
}
});
//大批量操作时，临时禁用事件可以提高性能
this.viewer.entities.suspendEvents(); //散点
// 创建材质
let material = new Cesium.PolylineTrailMaterialProperty({ //创建材质
color: Cesium.Color.GREEN.withAlpha(0.5),
duration: 3000,
trailImage: data.options.polyline.trailImage1
});
let material1 = new Cesium.PolylineTrailMaterialProperty({ //创建材质1
color: Cesium.Color.YELLOW.withAlpha(0.5),
duration: 3000,
trailImage: data.options.polyline.trailImage
});
// 创建中转目标
this.viewer.entities.add({
position: centerPoint,
orientation: this.Cesium.Transforms.headingPitchRollQuaternion(centerPoint, hpRoll),
model: {
uri: data.center.url,
minimumPixelSize: 128
}
});
// 创建接收目标
this.viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
data.endPoint.lon,
data.endPoint.lat,
data.endPoint.height
),
orientation: this.Cesium.Transforms.headingPitchRollQuaternion(endPoint, hpRoll),
model: {
uri: data.endPoint.url,
minimumPixelSize: 128
}
});
// 创建第一条信号线
this.viewer.entities.add({
polyline: {
positions: self.generateCurve(startPoint, centerPoint),
width: 2,
material: material
}
});
this.viewer.entities.add({
polyline: {
positions: self.generateCurve(centerPoint, endPoint),
width: 2,
material: material1
}
});
this.viewer.entities.resumeEvents();
//镜头顺时针旋转九十度，即东向
var heading = Cesium.Math.toRadians(0);
//镜头倾斜30度俯视
var pitch = Cesium.Math.toRadians(-0);
this.viewer.zoomTo(
this.viewer.entities,
new Cesium.HeadingPitchRange(heading, pitch,490000)
);
}
/**
* 生成流动曲线
* @param startPoint 起点
* @param endPoint 终点
* @returns {Array}
*/,
generateCurve(startPoint, endPoint) {
let addPointCartesian = new Cesium.Cartesian3();
Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian);
let midPointCartesian = new Cesium.Cartesian3();
Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);
let midPointCartographic = Cesium.Cartographic.fromCartesian(
midPointCartesian
);
midPointCartographic.height =
Cesium.Cartesian3.distance(startPoint, endPoint) / 2.5;
let midPoint = new Cesium.Cartesian3();
Cesium.Ellipsoid.WGS84.cartographicToCartesian(
midPointCartographic,
midPoint
);
let spline = new Cesium.CatmullRomSpline({
times: [0.0, 0.5, 1.0],
points: [startPoint, midPoint, endPoint]
});
let curvePoints = [];
for (let i = 0, len = 200; i < len; i++) {
curvePoints.push(spline.evaluate(i / len));
}
// console.log(curvePoints);
return curvePoints;
}
}
};
</script>
<style lang="scss" >
</style>
