采用vue+cesium實現(xiàn)
引入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應(yīng)用部分
<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渲染以節(jié)省GPU內(nèi)存
??????baseLayerPicker:?false,?//?底圖切換控件
??????shouldAnimate:?true,?//是否開始動畫
??????//?useDefaultRenderLoop?:?true,//如果需要控制渲染循環(huán)氮帐，則設(shè)為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()?{
??????//創(chuàng)建射線
??????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;
????????/*****?創(chuàng)建發(fā)送目標*****/
??????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();?//散點
????????//?創(chuàng)建材質(zhì)
????????let?material?=?new?Cesium.PolylineTrailMaterialProperty({?//創(chuàng)建材質(zhì)
??????????color:?Cesium.Color.GREEN.withAlpha(0.5),
??????????duration:?3000,
??????????trailImage:?data.options.polyline.trailImage1
????????});
????????let?material1?=?new?Cesium.PolylineTrailMaterialProperty({?//創(chuàng)建材質(zhì)1
??????????color:?Cesium.Color.YELLOW.withAlpha(0.5),
??????????duration:?3000,
??????????trailImage:?data.options.polyline.trailImage
????????});
????????//?創(chuàng)建中轉(zhuǎn)目標
????????this.viewer.entities.add({
??????????position:?centerPoint,
??????????orientation:?this.Cesium.Transforms.headingPitchRollQuaternion(centerPoint,?hpRoll),
??????????model:?{
??????????uri:?data.center.url,
??????????minimumPixelSize:?128
????????}
????????});
????????//?創(chuàng)建接收目標
????????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
????????}
????????});
????????//?創(chuàng)建第一條信號線
????????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();
??????//鏡頭順時針旋轉(zhuǎn)九十度蝶棋，即東向
??????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>
