JT-CIM-SDK/packages/Widgets/PolylineObject.js

/* 引入Cesium */
// import * as Cesium from 'Cesium';

import {
	setSessionid
} from "./common/common.js";

/**
 *流动纹理线
 */
import PolylineDirectionMaterialProperty from "./PolylineObject/PolylineDirectionMaterialProperty.js";

/**
 * 线对象
 */
class PolylineObject {
	/**
	 * 默认初始化
	 */
	constructor(viewer) {
		if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
		this._viewer = viewer;
	}
}

/**
 * 通用对外公开函数 
 */
Object.assign(PolylineObject.prototype, /** @lends PolylineObject.prototype */ {

	/**
	 * @description 根据GeoJson绘制线
	 * @param {String} geoJsonUrl geoJson文件路径
	 * @param {Object} [options] 线的样式，具有以下属性:
	 * @param {Number} [options.id] 用于移除
	 * @param {Number} [options.clampToGround=true] 是否贴地
	 * @param {Number} [options.isImageAlpha=true] 是否采用图片颜色
	 * @param {Number} [options.imgUrl] 精灵线图片
	 * @param {String} [options.color="#FF0000"] 指定线的颜色
	 * @param {Number} [options.width=3] 指定线的宽度，以像素为单位
	 * @param {Number} [options.minHeigh=0] 
	 * @param {Number} [options.maxHeigh=200000000] 
	 * @param {Number} [options.duration=3000] 持续时间 毫秒，越小越快
	 * @param {Number} [options.count] 重复次数
	 * @param {String} [options.direction='horizontal'] 方向 vertical纵,垂直方向，horizontal横,水平方向
	 * @param {String} [options.order] 方向正负 
	 *                                        vertical 纵:'-'(由下到上) , '+"(由上到下)
	 *                                        horizontal 横:'-'(顺时针) , '+'(逆时针)
	 */
	drawPolylineByGeoJson: function(geoJsonUrl, options) {
		return new Promise((resolve, reject) => {
			let _self = this;
			let viewer = this._viewer;

			if (!Cesium.defined(geoJsonUrl)) {
				throw new Cesium.DeveloperError("geoJsonUrl is required.");
			}

			options = options || {};
			options.id = options.id || setSessionid();
			options.clampToGround = Cesium.defaultValue(options.clampToGround, true);
			options.width = Cesium.defaultValue(options.width, 3);
			options.minHeigh = Cesium.defaultValue(options.minHeigh, 0);
			options.maxHeigh = Cesium.defaultValue(options.maxHeigh, 200000000);

			let promise = Cesium.GeoJsonDataSource.load(geoJsonUrl, {
				clampToGround: options.clampToGround
			});
			promise.then((dataSource) => {
				viewer.dataSources.add(dataSource); // 加载这个geojson资源
				dataSource.name = options.id
				let entities = dataSource.entities.values;
				let distanceDisplayCondition = new Cesium.DistanceDisplayCondition(options.minHeigh, options.maxHeigh);
				let material = new PolylineDirectionMaterialProperty(options);
				for (var i = 0; i < entities.length; i++) {
					var entity = entities[i];
					entity.polyline.distanceDisplayCondition = distanceDisplayCondition;
					entity.polyline.material = material;
					entity.polyline.width = options.width;

					if (options.clampToGround) {
						entity.polyline.clampToGround = true;
					}
				}

				resolve(entities);
			});
		});
	},

	/**
	 * 脉冲线
	 * @param {Object} points 坐标位置[[lng,lat],[lng,lat],,,,,]经度，以度为单位,纬度，以度为单位
	 * @param {Object} options
	 * @param {Number} [options.id] 指定实体对象的id
	 * @param {Number} [options.width=5] 指定线的宽度，以像素为单位	
	 */
	PolylineLinkPulseMaterialProperty: function(points, options) {

		return new Promise((resolve, reject) => {
			if (!Cesium.defined(points)) {
				throw new Cesium.DeveloperError("points is required.");
			}

			if (points.length < 2) {
				reject("线对象，点数至少2个");
			}

			/* 转换坐标 */
			let positions = points.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});

			options = options || {};

			options.id = options.id || setSessionid();
			options.width = options.width || 5;

			let material = new PolylineDirectionMaterialProperty(options);
			let entity = this._viewer.entities.add({
				id: options.id,
				name: "Pulse line",
				polyline: {
					positions: positions,
					width: options.width,
					material: material,
					clampToGround: true, //开启贴地 如果有模型则贴模型
				}
			});

			resolve(entity);
		});
	},

	/**
	 * 箭头线
	 * @param {Object} points 坐标位置[[lng,lat],[lng,lat],,,,,]经度，以度为单位,纬度，以度为单位
	 * @param {Object} options
	 * @param {Number} [options.id] 指定实体对象的id
	 * @param {Number} [options.width=5] 指定线的宽度，以像素为单位	
	 */
	PolylineArrowMaterialProperty: function(points, options) {
		return new Promise((resolve, reject) => {
			if (!Cesium.defined(points)) {
				throw new Cesium.DeveloperError("points is required.");
			}

			if (points.length < 2) {
				reject("线对象，点数至少2个");
			}

			/* 转换坐标 */
			let positions = points.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});

			options = options || {};

			options.id = options.id || setSessionid();
			options.width = options.width || 5;

			let material = new PolylineDirectionMaterialProperty(options);
			let entity = this._viewer.entities.add({
				id: options.id,
				name: "Pulse line",
				polyline: {
					positions: positions,
					width: options.width,
					material: material,
					clampToGround: true, //开启贴地 如果有模型则贴模型
				}
			});

			resolve(entity);
		});
	},

	/**
	 * 绘制发光的线
	 * @param {Object} points 坐标位置[[lng,lat],[lng,lat],,,,,]经度，以度为单位,纬度，以度为单位
	 * @param {Object} options
	 * @param {Array} [options.color=[255,255,255,0]] 指定线条颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
	 * @param {Number} [options.taperPower=1] 指定变细效果的强度，以总线长的百分比表示。如果1.0或更高，则不使用锥度效应
	 * @param {Number} [options.width=5] 指定线的宽度，以像素为单位
	 * @param {Number} [options.glowPower=0.25] 指定辉光的强度，作为总线宽的百分比。	 
	 */
	drawGlowingLine(points, options) {
		//异步函数
		return new Promise((resolve, reject) => {

			if (!Cesium.defined(points)) {
				throw new Cesium.DeveloperError("points is required.");
			}

			if (points.length < 2) {
				reject("线对象，点数至少2个");
			}

			/* 转换坐标 */
			let positions = points.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});

			options = options || {};
			options.id = options.id || setSessionid();

			//指定线条颜色
			if (options.color) {
				if (options.color instanceof Array) {
					options.color = new Cesium.Color(options.color[0] / 255, options.color[1] / 255, options.color[2] / 255, options.color[3]);
				} else if (typeof(options.color) === 'string') {
					options.color = new Cesium.Color.fromCssColorString(options.color);
				} else {
					options.color = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}
			
			options.width = options.width || 5; //指定线条宽度
			options.glowPower = options.glowPower || 0.25; //一个数值属性，指定辉光的强度，作为总线宽的百分比。
			options.taperPower = options.taperPower || 1; //一个数值属性，指定变细效果的强度，以总线长的百分比表示。如果1.0或更高，则不使用锥度效应。

			let entity = this._viewer.entities.add({
				id: options.id,
				name: 'Glowing blue line on the surface',
				polyline: {
					clampToGround: true, //开启贴地 如果有模型则贴模型
					positions: positions,
					width: options.width,
					followSurface: true,
					material: new Cesium.PolylineGlowMaterialProperty({
						color: options.color, //指定线条颜色
						glowPower: options.glowPower,
						taperPower: options.taperPower
					}),
				},
			});

			resolve(entity);

		});
	},

	/**
	 * 绘制指定颜色的线
	 * @param {Object} points
	 * @param {Object} options
	 * @param {Array} [options.color=[255,255,255,0]] 点位颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
	 * @param {Number} [options.width=3] 指定线的宽度，以像素为单位
	 */
	drawSpecifyColorLine(points, options) {
		//异步函数
		return new Promise((resolve, reject) => {
			if (!Cesium.defined(points)) {
				reject("points is required.");
			}

			if (points.length < 2) {
				reject("线对象，点数至少2个");
			}
			/* 转换坐标 */
			let positions = points.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});

			options = options || {};
			options.id = options.id || setSessionid();

			//指定线条颜色
			if (options.color) {
				if (options.color instanceof Array) {
					options.color = new Cesium.Color(options.color[0] / 255, options.color[1] / 255, options.color[2] / 255, options.color[3]);
				} else if (typeof(options.color) === 'string') {
					options.color = new Cesium.Color.fromCssColorString(options.color);
				} else {
					options.color = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}
			
			//指定线条宽度
			options.width = options.width || 5;

			let entity = this._viewer.entities.add({
				id: options.id,
				name: 'Red line on the surface',
				polyline: {
					clampToGround: true, //开启贴地 如果有模型则贴模型
					positions: positions,
					width: options.width,
					material: options.color,
				},
			});

			resolve(entity);

		});
	},

	/**
	 * 绘制指定颜色指定边框颜色的线
	 * @param {Object} points
	 * @param {Object} options
	 * @param {Array} [options.color=[255,255,255,0]] 点位颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
	 * @param {Number} [options.width=3] 指定线的宽度，以像素为单位
	 * @param {String} [options.outlineColor=[255,255,255,0]] 指定点轮廓的颜色,,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明,
	 * @param {Number} [options.outlineWidth=0] 指定点轮廓的宽度
	 */
	drawSpecifyColorAndOutlineColorLine(points, options) {
		//异步函数
		return new Promise((resolve, reject) => {
			if (!Cesium.defined(points)) {
				throw new Cesium.DeveloperError("points is required.");
			}

			if (points.length < 2) {
				reject("线对象，点数至少2个");
			}

			/* 转换坐标 */
			let positions = points.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});

			options = options || {};
			options.id = options.id || setSessionid();

			//指定线条颜色
			if (options.color) {
				if (options.color instanceof Array) {
					options.color = new Cesium.Color(options.color[0] / 255, options.color[1] / 255, options.color[2] / 255, options.color[3]);
				} else if (typeof(options.color) === 'string') {
					options.color = new Cesium.Color.fromCssColorString(options.color);
				} else {
					options.color = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}
			//指定线条宽度
			options.width = options.width || 5;

			//指定线条轮廓颜色
			if (options.outlineColor) {
				if (options.outlineColor instanceof Array) {
					options.outlineColor = new Cesium.Color(options.outlineColor[0] / 255, options.outlineColor[1] / 255, options.outlineColor[2] / 255, options.outlineColor[3]);
				} else if (typeof(options.outlineColor) === 'string') {
					options.outlineColor = new Cesium.Color.fromCssColorString(options.outlineColor);
				} else {
					options.outlineColor = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}
			
			//指定线条轮廓宽度
			options.outlineWidth = Cesium.defaultValue(options.outlineWidth, 1);

			let entity = this._viewer.entities.add({
				id: options.id,
				name: 'Orange line with black outline at height and following the surface',
				polyline: {
					clampToGround: true, //开启贴地 如果有模型则贴模型
					positions: positions,
					width: options.width, // 线宽
					material: new Cesium.PolylineOutlineMaterialProperty({
						color: options.color, // 指定颜色
						outlineWidth: options.outlineWidth, // 边框的宽度
						outlineColor: options.outlineColor, // 指定边框颜色
					}),
				},
			});

			resolve(entity);

		});
	},

	/**
	 * 绘制指定颜色的箭头静态指示线
	 * @param {Object} points
	 * @param {Object} options
	 * @param {Array} [options.color=[255,255,255,0]] 点位颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
	 * @param {Number} [options.width=3] 指定线的宽度，以像素为单位
	 */
	drawSpecifyColorArrowStaticStateLine(points, options) {
		//异步函数
		return new Promise((resolve, reject) => {
			if (!Cesium.defined(points)) {
				throw new Cesium.DeveloperError("points is required.");
			}

			if (points.length < 2) {
				reject("线对象，点数至少2个");
			}

			/* 转换坐标 */
			let positions = points.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});

			options = options || {};
			options.id = options.id || setSessionid();

			//指定线条颜色
			if (options.color) {
				if (options.color instanceof Array) {
					options.color = new Cesium.Color(options.color[0] / 255, options.color[1] / 255, options.color[2] / 255, options.color[3]);
				} else if (typeof(options.color) === 'string') {
					options.color = new Cesium.Color.fromCssColorString(options.color);
				} else {
					options.color = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}
			
			//指定线条宽度
			options.width = options.width || 5;

			let entity = this._viewer.entities.add({
				id: options.id,
				name: 'Purple straight arrow at height',
				polyline: {
					clampToGround: true, //开启贴地 如果有模型则贴模型
					positions: positions,
					width: options.width,
					followSurface: false,
					material: new Cesium.PolylineArrowMaterialProperty(options.color),
				},
			});

			resolve(entity);

		});
	},

	/**
	 * 绘制虚线
	 * @param {Object} points
	 * @param {Object} options
	 * @param {Number} [options.width=3] 指定线的宽度，以像素为单位
	 * @param {Array} [options.color=[255,255,255,0]] 点位颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
	 * @param {Array} [options.gapColor=[255,255,255,0]] 指定行中空白颜色的属性,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
	 * @param {Number} [options.dashLength=16] 一个数值属性，以像素为单位指定破折号图案的长度。
	 * @param {Number} [options.dashPattern=255] 为破折号指定16位模式的数值属性
	 */
	drawDashedLine(points, options) {
		//异步函数
		return new Promise((resolve, reject) => {
			if (!Cesium.defined(points)) {
				throw new Cesium.DeveloperError("points is required.");
			}

			if (points.length < 2) {
				reject("线对象，点数至少2个");
			}
			/* 转换坐标 */
			let positions = points.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});

			options = options || {};
			options.id = options.id || setSessionid();

			//指定线条颜色
			if (options.color) {
				if (options.color instanceof Array) {
					options.color = new Cesium.Color(options.color[0] / 255, options.color[1] / 255, options.color[2] / 255, options.color[3]);
				} else if (typeof(options.color) === 'string') {
					options.color = new Cesium.Color.fromCssColorString(options.color);
				} else {
					options.color = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}
			//指定线条宽度
			options.width = options.width || 5;

			//指定行中空白颜色的属性
			if (options.gapColor) {
				if (options.gapColor instanceof Array) {
					options.gapColor = new Cesium.Color(options.gapColor[0] / 255, options.gapColor[1] / 255, options.gapColor[2] / 255, options.gapColor[3]);
				} else if (typeof(options.gapColor) === 'string') {
					options.gapColor = new Cesium.Color.fromCssColorString(options.gapColor);
				} else {
					options.gapColor = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}

			options.dashLength = options.dashLength || 16;
			options.dashPattern = options.dashPattern || 255;

			let entity = this._viewer.entities.add({
				id: options.id,
				name: 'CYAN dashed line',
				polyline: {
					clampToGround: true, //开启贴地 如果有模型则贴模型
					positions: positions,
					width: options.width,
					material: new Cesium.PolylineDashMaterialProperty({
						color: options.color,
						gapColor: options.gapColor, //指定行中空白颜色的属性。
						dashLength: options.dashLength, //一个数值属性，以像素为单位指定破折号图案的长度。
						dashPattern: options.dashPattern, //为破折号指定16位模式的数值属性
					}),
				},
			});

			resolve(entity);

		});
	},
});

// PolylineObject.prototype.PolylineDirectionMaterialProperty = PolylineDirectionMaterialProperty;

export default PolylineObject;