/* 引入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;