注:流動(dòng)效果使用的圖片是漸進(jìn)色
1.擴(kuò)展類PolylineTrailMaterialProperty (Cesium? 1.67-1.68)
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;
2.使用
<template>
? <div class="fullSize" id="cesiumContainer"></div>
</template>
<script>
import "cesium/Widgets/widgets.css";
import Cesium from "cesium/Cesium";
import CesiumFactory from "@/js/cesium/CesiumFactory";
import PolylineTrailMaterialProperty from "@/js/cesium/overlay/PolylineTrailMaterialProperty";
export default {
? name: "CesiumDynamicLine1",
? data() {
? ? return {
? ? ? viewer: null
? ? };
? },
? mounted() {
? ? const factory = new CesiumFactory();
? ? this.viewer = factory.getViewer();
? ? this.create();
? },
? methods: {
? ? create() {
? ? ? //創(chuàng)建射線
? ? ? var data = {
? ? ? ? center: {
? ? ? ? ? id: 0,
? ? ? ? ? lon: 114.302312702,
? ? ? ? ? lat: 30.598026044,
? ? ? ? ? size: 20,
? ? ? ? ? color: Cesium.Color.PURPLE
? ? ? ? },
? ? ? ? points: [
? ? ? ? ? {
? ? ? ? ? ? id: 1,
? ? ? ? ? ? lon: 115.028495718,
? ? ? ? ? ? lat: 30.200814617,
? ? ? ? ? ? color: Cesium.Color.YELLOW,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 2,
? ? ? ? ? ? lon: 110.795000473,
? ? ? ? ? ? lat: 32.638540762,
? ? ? ? ? ? color: Cesium.Color.RED,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 3,
? ? ? ? ? ? lon: 111.267729446,
? ? ? ? ? ? lat: 30.698151246,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 4,
? ? ? ? ? ? lon: 112.126643144,
? ? ? ? ? ? lat: 32.058588576,
? ? ? ? ? ? color: Cesium.Color.GREEN,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 5,
? ? ? ? ? ? lon: 114.885884938,
? ? ? ? ? ? lat: 30.395401912,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 6,
? ? ? ? ? ? lon: 112.190419415,
? ? ? ? ? ? lat: 31.043949588,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 7,
? ? ? ? ? ? lon: 113.903569642,
? ? ? ? ? ? lat: 30.93205405,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 8,
? ? ? ? ? ? lon: 112.226648859,
? ? ? ? ? ? lat: 30.367904255,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 9,
? ? ? ? ? ? lon: 114.86171677,
? ? ? ? ? ? lat: 30.468634833,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 10,
? ? ? ? ? ? lon: 114.317846048,
? ? ? ? ? ? lat: 29.848946148,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 11,
? ? ? ? ? ? lon: 113.371985426,
? ? ? ? ? ? lat: 31.70498833,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 12,
? ? ? ? ? ? lon: 109.468884533,
? ? ? ? ? ? lat: 30.289012191,
? ? ? ? ? ? color: Cesium.Color.BLUE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 13,
? ? ? ? ? ? lon: 113.414585069,
? ? ? ? ? ? lat: 30.368350431,
? ? ? ? ? ? color: Cesium.Color.SALMON,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 14,
? ? ? ? ? ? lon: 112.892742589,
? ? ? ? ? ? lat: 30.409306203,
? ? ? ? ? ? color: Cesium.Color.WHITE,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 15,
? ? ? ? ? ? lon: 113.16085371,
? ? ? ? ? ? lat: 30.667483468,
? ? ? ? ? ? color: Cesium.Color.SALMON,
? ? ? ? ? ? size: 15
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 16,
? ? ? ? ? ? lon: 110.670643354,
? ? ? ? ? ? lat: 31.74854078,
? ? ? ? ? ? color: Cesium.Color.PINK,
? ? ? ? ? ? size: 15
? ? ? ? ? }
? ? ? ? ],
? ? ? ? options: {
? ? ? ? ? name: "",
? ? ? ? ? polyline: {
? ? ? ? ? ? width: 2,
? ? ? ? ? ? material: [Cesium.Color.GREEN, 3000]
? ? ? ? ? }
? ? ? ? }
? ? ? };
? ? ? this.createFlyLines(data);
? ? },
? ? createFlyLines(data) {
? ? ? const center = data.center;
? ? ? const cities = data.points;
? ? ? const startPoint = Cesium.Cartesian3.fromDegrees(
? ? ? ? center.lon,
? ? ? ? center.lat,
? ? ? ? 0
? ? ? );
? ? ? //中心點(diǎn)
? ? ? this.viewer.entities.add({
? ? ? ? position: startPoint,
? ? ? ? point: {
? ? ? ? ? pixelSize: center.size,
? ? ? ? ? color: center.color
? ? ? ? }
? ? ? });
? ? ? //大批量操作時(shí)冈在，臨時(shí)禁用事件可以提高性能
? ? ? this.viewer.entities.suspendEvents();
? ? ? //散點(diǎn)
? ? ? cities.map(city => {
? ? ? ? let material = new Cesium.PolylineTrailMaterialProperty({
? ? ? ? ? color: Cesium.Color.GREEN,
? ? ? ? ? duration: 3000,
? ? ? ? ? trailImage: "images/colors1.png"
? ? ? ? });
? ? ? ? const endPoint = Cesium.Cartesian3.fromDegrees(city.lon, city.lat, 0);
? ? ? ? this.viewer.entities.add({
? ? ? ? ? position: endPoint,
? ? ? ? ? point: {
? ? ? ? ? ? pixelSize: city.size - 10,
? ? ? ? ? ? color: city.color
? ? ? ? ? }
? ? ? ? });
? ? ? ? this.viewer.entities.add({
? ? ? ? ? polyline: {
? ? ? ? ? ? positions: this.generateCurve(startPoint, endPoint),
? ? ? ? ? ? width: 2,
? ? ? ? ? ? material: material
? ? ? ? ? }
? ? ? ? });
? ? ? });
? ? ? this.viewer.entities.resumeEvents();
? ? ? this.viewer.flyTo(this.viewer.entities);
? ? },
? ? /**
? ? * 生成流動(dòng)曲線
? ? * @param startPoint 起點(diǎn)
? ? * @param endPoint 終點(diǎn)
? ? * @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) / 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));
? ? ? }
? ? ? return curvePoints;
? ? }
? }
};
</script>
<style lang="scss" >
</style>
