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

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

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

/**
 * 面对象
 */
class PolygonObject {
	/**
	 * 默认初始化
	 */
	constructor(viewer) {
		if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
		this._viewer = viewer;
		this._drawEntities = []; //存储entities
		this._polygonEntity = null;
	}
}

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

	/**
	 * @description 根据GeoJson绘制面
	 * @param {Object} geoJsonUrl geoJson文件路径
	 * @param {Object} [options] 面的样式，具有以下属性:
	 * @param {Number} [options.id] 用于移除
	 * @param {Number} [options.clampToGround=true] 是否贴地
	 * @param {Number} [options.pixelSize=10] 指定点的大小，以像素为单位
	 * @param {String} [options.color="#FF0000"] 指定点、线、面的颜色
	 * @param {String} [options.outlineColor="#FFFF00"] 指定点轮廓的颜色
	 * @param {Number} [options.outlineWidth=0] 指定点轮廓的宽度
	 */
	drawPolygonByGeoJson(geoJsonUrl, options) {

		return new Promise((resolve, reject) => {
			let _self = this;
			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.color = Cesium.defaultValue(options.color, "#FF0000");
			options.outlineColor = Cesium.defaultValue(options.outlineColor, "#FFFF00");
			options.outlineWidth = Cesium.defaultValue(options.outlineWidth, 1);
			options.extrudedHeight = Cesium.defaultValue(options.extrudedHeight, 0);

			let promise = Cesium.GeoJsonDataSource.load(geoJsonUrl, {
				clampToGround: true,
				stroke: Cesium.Color.WHITE, // 边框颜色
				strokeWidth: 3, // 边框宽度
				fill: Cesium.Color.RED.withAlpha(0.5), // 填充颜色
			});
			promise.then((dataSource) => {
				_self._viewer.dataSources.add(dataSource); // 加载整个geojson资源 
				dataSource.name = options.id
				let entities = dataSource.entities.values;
				for (let index = 0; index < entities.length; index++) {
					let entity = entities[index];

					entity.polygon.material = new Cesium.Color.fromCssColorString(color).withAlpha(0.1);
					entity.polygon.extrudedHeight = options.extrudedHeight; //拉伸高度，单位是米

					entity.polygon.fill = false;
					entity.polygon.outline = false;
					entity.polygon.outlineWidth = options.outlineWidth;
					entity.polygon.outlineColor = options.outlineColor;
					entity.polyline = {
						positions: entity.polygon.hierarchy._value.positions,
						width: entity.polygon.outlineWidth,
						material: new Cesium.Color.fromCssColorString(color).withAlpha(0.1),
						// material: new Cesium.PolylineDashMaterialProperty({
						// 	color: new Cesium.Color.fromCssColorString(color).withAlpha(0.1),
						// }),//虚线
					}
					
					if (options.clampToGround) {
						entity.polyline.clampToGround = true;
					}
				}

				resolve(entities);

			});
		});
	},

	/**
	 * 根据坐标点生成面
	 * @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 透明度]
	 */
	generatePolygonByPoints(points, options) {
		//异步函数
		return new Promise((resolve, reject) => {
			let _self = this;

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

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


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

			options.fill = options.fill || true;
			//面颜色
			if (options.color) {
				options.color = new Cesium.Color(options.color[0]/255, options.color[1]/255, options.color[2]/255, options.color[3]);
			} else {
				options.color = new Cesium.Color.fromCssColorString("#ff0000");
			}

			options.outline = options.outline || false;
			//轮廓颜色
			if (options.outlineColor) {
				options.outlineColor = new Cesium.Color(options.outlineColor[0]/255, options.outlineColor[1]/255, options.outlineColor[2]/255, options.outlineColor[3]);
			} else {
				options.outlineColor = new Cesium.Color.fromCssColorString("#000");
			}
			//轮廓宽度
			options.outlineWidth = Cesium.defaultValue(options.outlineWidth, 1);

			// let entity = _self._viewer.entities.add({
			// 	id: options.id,
			// 	name: "Generate surfaces based on coordinate points",
			// 	polygon: {
			// 		hierarchy: positions,
			// 		material: options.color,


			// 		fill:false,
			// 		outline: true,
			// 		outlineWidth:5,
			// 		outlineColor:new Cesium.Color.fromCssColorString("#ddd").withAlpha(0.1)
			// 	}
			// });

			let entity = new Cesium.Entity({
				id: options.id,
				name: "Generate surfaces based on coordinate points",
				polygon: {
					hierarchy: positions,
					material: options.color,
					fill: options.fill,
					outline: options.outline,
					outlineWidth: options.outlineWidth,
					outlineColor: options.outlineColor
				}
			});

			if (options.outline) {
				entity.polyline = {
					positions: entity.polygon.hierarchy._value.positions,
					width: options.outlineWidth,
					material: options.outlineColor,
					// material: new Cesium.PolylineDashMaterialProperty({
					// 	color: options.outlineColor,
					// }),//虚线
					clampToGround: true
				}
			}

			_self._viewer.entities.add(entity);

			resolve(entity);
		})
	},
});

export default PolygonObject;