PointObject.js 51 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094
  1. /* 引入Cesium */
  2. // import * as Cesium from 'Cesium';
  3. import {
  4. setSessionid,
  5. getHeigthByPointsMostDetailed,
  6. getHeigthByPointMostDetailed
  7. } from "./common/common.js";
  8. /**
  9. * 点对象
  10. */
  11. class PointObject {
  12. /**
  13. * 默认初始化
  14. */
  15. constructor(viewer) {
  16. if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
  17. this._viewer = viewer;
  18. }
  19. }
  20. /**
  21. * 通用对外公开函数
  22. */
  23. Object.assign(PointObject.prototype, /** @lends PointObject.prototype */ {
  24. /**
  25. * @description 根据坐标绘制文字
  26. * @param {Array/Cesium.Cartesian3} points 坐标位置[lng,lat,height]经度,以度为单位,纬度,以度为单位
  27. * @param {Object} options
  28. *
  29. * @param {Object} [options.id] 用于移除
  30. *
  31. * @param {Object} [options.label] label的样式,具有以下属性:
  32. * @param {Number} [options.label.text=""] 文字
  33. * @param {String} [options.label.font="24px Helvetica"] 组合字体样式
  34. * 组合字体
  35. * font:font-style font-weight font-size/line-height font-family;
  36. * font:italic bolder 20px/10px Arial;
  37. * @param {String} [options.label.fillColor=[255,255,255,0]] 字体颜色
  38. * @param {String} [options.label.outlineColor=[255,255,255,0]] 字体边框颜色
  39. * @param {Number} [options.label.outlineWidth=1] 边框宽度
  40. * @param {Number} [options.label.showBackground=false] 是否显示背景颜色
  41. * @param {Number} [options.label.backgroundColor=[255,255,255,0]] 背景颜色
  42. * @param {Number} [options.label.backgroundPadding=0] 背景内边距
  43. * @param {Number} [options.label.pixelOffset] 偏移像素
  44. * @param {Number} [options.label.pixelOffset.x=0] 横向偏移像素
  45. * @param {Number} [options.label.pixelOffset.y=0] 纵向偏移像素
  46. * @param {Number} [options.label.scale=1] 尺寸
  47. * @param {Number} [options.label.scaleByDistance] 相机范围
  48. * @param {Number} [options.label.scaleByDistance.near=1.5e2] 相机范围的下界。
  49. * @param {String} [options.label.scaleByDistance.nearValue=1] 相机范围下界的值。
  50. * @param {String} [options.label.scaleByDistance.far=2400] 相机范围的上限。
  51. * @param {Number} [options.label.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
  52. */
  53. addLabel(points, options) {
  54. //异步函数
  55. return new Promise((resolve, reject) => {
  56. let _self = this;
  57. if (!Cesium.defined(points)) {
  58. throw new Cesium.DeveloperError("points is required.");
  59. }
  60. //坐标位置
  61. let position;
  62. if (points instanceof Cesium.Cartesian3) {
  63. position = points;
  64. } else {
  65. position = Cesium.Cartesian3.fromDegrees(points[0], points[1], points[2] || 0);
  66. }
  67. options = options || {};
  68. options.id = options.id || setSessionid();
  69. let label = options.label || {};
  70. //文字内容
  71. label.text = Cesium.defaultValue(label.text, "金田CIM三维基础平台");
  72. //组合字体样式
  73. label.font = Cesium.defaultValue(label.font, "24px Helvetica");
  74. //字体颜色
  75. if (label.fillColor instanceof Array) {
  76. label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]);
  77. } else if (typeof(label.fillColor) === 'string') {
  78. label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor);
  79. } else {
  80. label.fillColor = new Cesium.Color.fromCssColorString("#FFFF00");
  81. }
  82. //字体边框颜色
  83. if (label.outlineColor instanceof Array) {
  84. label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]);
  85. } else if (typeof(label.outlineColor) === 'string') {
  86. label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor);
  87. } else {
  88. label.outlineColor = new Cesium.Color.fromCssColorString("#FFF");
  89. }
  90. //字体边框宽度
  91. label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1);
  92. //是否显示背景颜色
  93. label.showBackground = Cesium.defaultValue(label.showBackground, false);
  94. //背景颜色
  95. if (label.backgroundColor instanceof Array) {
  96. label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]);
  97. } else if (typeof(label.backgroundColor) === 'string') {
  98. label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor);
  99. } else {
  100. label.backgroundColor = new Cesium.Color.fromCssColorString("#FFF");
  101. }
  102. //背景内边距
  103. if (label.backgroundPadding) {
  104. label.backgroundPadding = new Cesium.Cartesian2(label.backgroundPadding, label.backgroundPadding);
  105. }
  106. let entity = new Cesium.Entity({
  107. id: options.id,
  108. position: position,
  109. label: {
  110. text: label.text,
  111. font: label.font, //字体样式
  112. fillColor: label.fillColor, //字体颜色
  113. outlineColor: label.outlineColor, //字体边框颜色
  114. outlineWidth: label.outlineWidth, //边框宽度
  115. style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充
  116. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  117. showBackground: label.showBackground, //是否显示背景颜色
  118. backgroundColor: label.backgroundColor, // 背景颜色
  119. backgroundPadding: label.backgroundPadding, //指定以像素为单位的水平和垂直背景填充padding
  120. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  121. heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  122. }
  123. });
  124. //偏移量
  125. if (label.pixelOffset) {
  126. label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
  127. label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
  128. entity.label.pixelOffset = new Cesium.Cartesian2(label.pixelOffset.x, label.pixelOffset.y);
  129. }
  130. if (label.scaleByDistance) {
  131. label.scaleByDistance.near = Cesium.defaultValue(label.scaleByDistance.near, 0);
  132. label.scaleByDistance.nearValue = Cesium.defaultValue(label.scaleByDistance.nearValue, 0);
  133. label.scaleByDistance.far = Cesium.defaultValue(label.scaleByDistance.far, 1);
  134. label.scaleByDistance.farValue = Cesium.defaultValue(label.scaleByDistance.farValue, 0);
  135. entity.label.scaleByDistance = new Cesium.NearFarScalar(label.scaleByDistance.near, label.scaleByDistance.nearValue, label.scaleByDistance.far, label.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
  136. }
  137. _self._viewer.entities.add(entity);
  138. resolve(entity)
  139. });
  140. },
  141. /**
  142. * @description 根据坐标绘制点及文字
  143. * @param {Array/Cesium.Cartesian3} points 坐标位置[lng,lat,height]经度,以度为单位,纬度,以度为单位
  144. * @param {Object} options
  145. *
  146. * @param {Object} [options.id] 用于移除
  147. *
  148. * @param {Object} [options.point] 点的样式,具有以下属性:
  149. * @param {Number} [options.point.pixelSize=10] 指定点的大小,以像素为单位
  150. * @param {Array} [options.point.color=[255,255,255,0]] 点位颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
  151. * @param {String} [options.point.outlineColor=[255,255,255,0]] 指定点轮廓的颜色,,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明,
  152. * @param {Number} [options.point.outlineWidth=0] 指定点轮廓的宽度
  153. *
  154. * @param {Object} [options.label] label的样式,具有以下属性:
  155. * @param {Number} [options.label.text=""] 文字
  156. * @param {String} [options.label.font="24px Helvetica"] 字体样式
  157. * @param {String} [options.label.fillColor=[255,255,255,0]] 字体颜色
  158. * @param {String} [options.label.outlineColor=[255,255,255,0]] 字体边框颜色
  159. * @param {Number} [options.label.outlineWidth=1] 边框宽度
  160. * @param {Number} [options.label.showBackground=false] 是否显示背景颜色
  161. * @param {Number} [options.label.backgroundColor=[255,255,255,0]] 背景颜色
  162. * @param {Number} [options.label.pixelOffset] 偏移像素
  163. * @param {Number} [options.label.pixelOffset.x=0] 横向偏移像素
  164. * @param {Number} [options.label.pixelOffset.y=0] 纵向偏移像素
  165. * @param {Number} [options.label.scaleByDistance] 相机范围
  166. * @param {Number} [options.label.scaleByDistance.near=1.5e2] 相机范围的下界。
  167. * @param {String} [options.label.scaleByDistance.nearValue=1] 相机范围下界的值。
  168. * @param {String} [options.label.scaleByDistance.far=2400] 相机范围的上限。
  169. * @param {Number} [options.label.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
  170. */
  171. addPoint(points, options) {
  172. //异步函数
  173. return new Promise((resolve, reject) => {
  174. let _self = this;
  175. if (!Cesium.defined(points)) {
  176. throw new Cesium.DeveloperError("points is required.");
  177. }
  178. //坐标位置
  179. let position;
  180. if (points instanceof Cesium.Cartesian3) {
  181. position = points;
  182. } else {
  183. position = Cesium.Cartesian3.fromDegrees(points[0], points[1], points[2] || 0);
  184. }
  185. options = options || {};
  186. options.id = options.id || setSessionid();
  187. let point = options.point || {};
  188. //点的大小
  189. point.pixelSize = Cesium.defaultValue(point.pixelSize, 10);
  190. //点位颜色
  191. if (point.color instanceof Array) {
  192. point.color = new Cesium.Color(point.color[0] / 255, point.color[1] / 255, point.color[2] / 255, point.color[3]);
  193. } else if (typeof(point.color) === 'string') {
  194. point.color = new Cesium.Color.fromCssColorString(point.color);
  195. } else {
  196. point.color = new Cesium.Color.fromCssColorString("#FFF");
  197. }
  198. //点位轮廓颜色
  199. if (point.outlineColor instanceof Array) {
  200. point.outlineColor = new Cesium.Color(point.outlineColor[0] / 255, point.outlineColor[1] / 255, point.outlineColor[2] / 255, point.outlineColor[3]);
  201. } else if (typeof(point.outlineColor) === 'string') {
  202. point.outlineColor = new Cesium.Color.fromCssColorString(point.outlineColor);
  203. } else {
  204. point.outlineColor = new Cesium.Color.fromCssColorString("#FFF");
  205. }
  206. //点位轮廓宽度
  207. point.outlineWidth = Cesium.defaultValue(point.outlineWidth, 1);
  208. let entity = new Cesium.Entity({
  209. id: options.id,
  210. position: position,
  211. point: {
  212. pixelSize: point.pixelSize, //点的大小
  213. color: point.color, //点位颜色
  214. outlineColor: point.outlineColor, //点位轮廓颜色
  215. outlineWidth: point.outlineWidth, //点位轮廓宽度
  216. heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //指定高度相对于什么的属性。CLAMP_TO_GROUND可使点贴地,地就是地形。NONE是绝对高程.RELATIVE_TO_GROUND是设置距离地形的相对高度。
  217. disableDepthTestDistance: Number.POSITIVE_INFINITY, //指定距离相机的距离,在这个距离上禁用深度测试。通过设置相机到圆要素的距离阈值来判断是否开启深度检测,这里设置为1000.0米正常,但是当相机距离超过阈值时,就会开启深度检测,圆还是会只显示一半。将阈值设置为无穷大时:Number.POSITIVE_INFINITY。虽然无论相机距离远近,圆都可以正常显示,但是没有圆的深度检测,不同要素之间的遮挡无法得到有效判断,有的在建筑物后的点会在建筑物前显示,造成视觉误差与干扰。
  218. // disableDepthTestDistance: updatedPositions[0].height, //指定距离相机的距离,在这个距离上禁用深度测试。通过设置相机到圆要素的距离阈值来判断是否开启深度检测,这里设置为1000.0米正常,但是当相机距离超过阈值时,就会开启深度检测,圆还是会只显示一半。将阈值设置为无穷大时:Number.POSITIVE_INFINITY。虽然无论相机距离远近,圆都可以正常显示,但是没有圆的深度检测,不同要素之间的遮挡无法得到有效判断,有的在建筑物后的点会在建筑物前显示,造成视觉误差与干扰。
  219. }
  220. });
  221. /* 判断是否需要绘制文字 */
  222. if (options.label) {
  223. let label = options.label || {};
  224. label.text = Cesium.defaultValue(label.text, "");
  225. label.font = Cesium.defaultValue(label.font, "24px Helvetica"); //字体样式
  226. //字体颜色
  227. if (label.fillColor instanceof Array) {
  228. label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]);
  229. } else if (typeof(label.fillColor) === 'string') {
  230. label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor);
  231. } else {
  232. label.fillColor = new Cesium.Color.fromCssColorString("#FFFF00");
  233. }
  234. //字体边框颜色
  235. if (label.outlineColor instanceof Array) {
  236. label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]);
  237. } else if (typeof(label.outlineColor) === 'string') {
  238. label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor);
  239. } else {
  240. label.outlineColor = new Cesium.Color.fromCssColorString("#FFF");
  241. }
  242. //字体边框宽度
  243. label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1);
  244. //是否显示背景颜色
  245. label.showBackground = Cesium.defaultValue(label.showBackground, false);
  246. //背景颜色
  247. if (label.backgroundColor instanceof Array) {
  248. label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]);
  249. } else if (typeof(label.backgroundColor) === 'string') {
  250. label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor);
  251. } else {
  252. label.backgroundColor = new Cesium.Color.fromCssColorString("#FFF");
  253. }
  254. if (label.backgroundPadding) {
  255. label.backgroundPadding = new Cesium.Cartesian2(label.backgroundPadding, label.backgroundPadding);
  256. }
  257. // label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
  258. // label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
  259. entity.label = {
  260. text: label.text,
  261. font: label.font, //字体样式
  262. fillColor: label.fillColor, //字体颜色
  263. outlineColor: label.outlineColor, //字体边框颜色
  264. outlineWidth: label.outlineWidth, //边框宽度
  265. style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充
  266. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  267. showBackground: label.showBackground, //是否显示背景颜色
  268. backgroundColor: label.backgroundColor, // 背景颜色
  269. backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充padding
  270. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  271. // pixelOffset: new Cesium.Cartesian2(label.pixelOffset.x, label.pixelOffset.y), //偏移量
  272. }
  273. if (label.scaleByDistance) {
  274. label.scaleByDistance.near = Cesium.defaultValue(label.scaleByDistance.near, 0);
  275. label.scaleByDistance.nearValue = Cesium.defaultValue(label.scaleByDistance.nearValue, 0);
  276. label.scaleByDistance.far = Cesium.defaultValue(label.scaleByDistance.far, 1);
  277. label.scaleByDistance.farValue = Cesium.defaultValue(label.scaleByDistance.farValue, 0);
  278. entity.label.scaleByDistance = new Cesium.NearFarScalar(label.scaleByDistance.near, label.scaleByDistance.nearValue, label.scaleByDistance.far, label.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
  279. }
  280. }
  281. _self._viewer.entities.add(entity);
  282. resolve(entity)
  283. });
  284. },
  285. /**
  286. * 根据坐标绘制广告牌及文字
  287. * @param {Object} points 坐标位置[lng,lat,height]经度,以度为单位,纬度,以度为单位,高程
  288. * @param {Object} options
  289. * @param {String} [options.id] 用于移除
  290. * @param {Object} options.billboard 广告牌的样式,具有以下属性:
  291. * @param {Number} options.billboard.imgUrl 广告牌图片
  292. * @param {Number} [options.billboard.scale=1] 尺寸
  293. * @param {Number} [options.billboard.pixelOffset] 偏移像素
  294. * @param {Number} [options.billboard.pixelOffset.x=0] 横向偏移像素
  295. * @param {Number} [options.billboard.pixelOffset.y=0] 纵向偏移像素
  296. * @param {Object} [options.billboard.scaleByDistance] 距离相机的距离缩放点。
  297. * @param {Number} [options.billboard.scaleByDistance.near=0] 相机范围的下界。
  298. * @param {String} [options.billboard.scaleByDistance.nearValue=0] 相机范围下界的值。
  299. * @param {String} [options.billboard.scaleByDistance.far=1] 相机范围的上限。
  300. * @param {Number} [options.billboard.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
  301. *
  302. * @param {Object} [options.label] label的样式,具有以下属性:
  303. * @param {Number} [options.label.text="注记"] 文字
  304. * @param {String} [options.label.font="24px Helvetica"] 指定CSS字体的属性,字体大小及样式
  305. * @param {String} [options.label.fillColor=[255,255,255,1]] 字体颜色
  306. * @param {String} [options.label.outlineColor=[255,255,255,1]] 字体边框颜色
  307. * @param {Number} [options.label.outlineWidth=1] 边框宽度
  308. * @param {Number} [options.label.showBackground=false] 是否显示背景颜色
  309. * @param {Number} [options.label.backgroundColor=[255,255,255,1]] 背景颜色
  310. * @param {Number} [options.label.pixelOffset] 偏移像素
  311. * @param {Number} [options.label.pixelOffset.x=0] 横向偏移像素
  312. * @param {Number} [options.label.pixelOffset.y=0] 纵向偏移像素
  313. * @param {Object} [options.label.scaleByDistance] 距离相机的距离缩放点。
  314. * @param {Number} [options.label.scaleByDistance.near=0] 相机范围的下界。
  315. * @param {String} [options.label.scaleByDistance.nearValue=0] 相机范围下界的值。
  316. * @param {String} [options.label.scaleByDistance.far=1] 相机范围的上限。
  317. * @param {Number} [options.label.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
  318. */
  319. addBillboard(points, options) {
  320. //异步函数
  321. return new Promise((resolve, reject) => {
  322. let _self = this;
  323. if (!Cesium.defined(points)) {
  324. throw new Cesium.DeveloperError("points is required.");
  325. }
  326. //坐标位置
  327. let position;
  328. if (points instanceof Cesium.Cartesian3) {
  329. position = points;
  330. } else {
  331. position = Cesium.Cartesian3.fromDegrees(points[0], points[1], points[2] || 0);
  332. }
  333. options = options || {};
  334. options.id = options.id || setSessionid();
  335. let billboard = options.billboard || {};
  336. billboard.image = billboard.imgUrl || "jt3dSDK/imgs/point/point3.png";
  337. billboard.scale = Cesium.defaultValue(billboard.scale, 1);
  338. billboard.pixelOffset = Cesium.defaultValue(billboard.pixelOffset, 0);
  339. // label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
  340. // label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
  341. let entity = new Cesium.Entity({
  342. id: options.id,
  343. name: "add billboard",
  344. //位置
  345. position: position,
  346. //图片标签
  347. billboard: {
  348. image: billboard.image,
  349. horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
  350. verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
  351. scale: billboard.scale, //尺寸
  352. pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
  353. heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  354. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  355. }
  356. });
  357. if (billboard.scaleByDistance) {
  358. billboard.scaleByDistance.near = Cesium.defaultValue(billboard.scaleByDistance.near, 0);
  359. billboard.scaleByDistance.nearValue = Cesium.defaultValue(billboard.scaleByDistance.nearValue, 0);
  360. billboard.scaleByDistance.far = Cesium.defaultValue(billboard.scaleByDistance.far, 1);
  361. billboard.scaleByDistance.farValue = Cesium.defaultValue(billboard.scaleByDistance.farValue, 0);
  362. entity.billboard.scaleByDistance = new Cesium.NearFarScalar(billboard.scaleByDistance.near, billboard.scaleByDistance.nearValue, billboard.scaleByDistance.far, billboard.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
  363. }
  364. /* 判断是否需要绘制文字 */
  365. if (options.label) {
  366. let label = options.label || {};
  367. label.text = Cesium.defaultValue(label.text, "");
  368. label.font = Cesium.defaultValue(label.font, "24px Helvetica");
  369. if (label.fillColor instanceof Array) {
  370. label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]);
  371. } else if (typeof(label.fillColor) === 'string') {
  372. label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor);
  373. } else {
  374. label.fillColor = new Cesium.Color.fromCssColorString("#ff0000");
  375. }
  376. if (label.outlineColor instanceof Array) {
  377. label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]);
  378. } else if (typeof(label.outlineColor) === 'string') {
  379. label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor);
  380. } else {
  381. label.outlineColor = new Cesium.Color.fromCssColorString("#FFFF00");
  382. }
  383. label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1);
  384. //是否显示背景颜色
  385. label.showBackground = Cesium.defaultValue(label.showBackground, false);
  386. //背景颜色
  387. if (label.backgroundColor instanceof Array) {
  388. label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]);
  389. } else if (typeof(label.backgroundColor) === 'string') {
  390. label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor);
  391. } else {
  392. label.backgroundColor = new Cesium.Color.fromCssColorString("#FFFF00");
  393. }
  394. if (label.backgroundPadding) {
  395. label.backgroundPadding = new Cesium.Cartesian2(label.backgroundPadding, label.backgroundPadding);
  396. }
  397. entity.label = {
  398. text: label.text,
  399. font: label.font,
  400. fillColor: label.fillColor, //填充颜色
  401. outlineColor: label.outlineColor, //边框颜色
  402. outlineWidth: label.outlineWidth, //边框宽度
  403. style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充
  404. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  405. showBackground: label.showBackground, //指定标签后面背景的可见性
  406. backgroundColor: label.backgroundColor, // 背景颜色
  407. backgroundPadding: label.backgroundPadding, //指定以像素为单位的水平和垂直背景填充padding
  408. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  409. }
  410. //偏移量
  411. if (label.pixelOffset) {
  412. label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
  413. label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
  414. entity.label.pixelOffset = new Cesium.Cartesian2(label.pixelOffset.x, label.pixelOffset.y);
  415. }
  416. //相机距离
  417. if (label.scaleByDistance) {
  418. label.scaleByDistance.near = Cesium.defaultValue(label.scaleByDistance.near, 0);
  419. label.scaleByDistance.nearValue = Cesium.defaultValue(label.scaleByDistance.nearValue, 0);
  420. label.scaleByDistance.far = Cesium.defaultValue(label.scaleByDistance.far, 1);
  421. label.scaleByDistance.farValue = Cesium.defaultValue(label.scaleByDistance.farValue, 0);
  422. entity.label.scaleByDistance = new Cesium.NearFarScalar(label.scaleByDistance.near, label.scaleByDistance.nearValue, label.scaleByDistance.far, label.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
  423. }
  424. }
  425. this._viewer.entities.add(entity);
  426. resolve(entity)
  427. });
  428. },
  429. /**
  430. * 加载GLTF/GLB模型数据
  431. * @param {Array/Cesium.Cartesian3} points 坐标位置[lng,lat,height]经度,以度为单位,纬度,以度为单位
  432. * @param {Object} options
  433. * @param {Object} [options.id] 用于移除,模型实体加载ID,加入到整体图层中 以便可以删除对应的图层
  434. *
  435. * @param {Object} options.model model的样式,具有以下属性:
  436. * @param {String} options.model.url 模型路径
  437. * @param {Number} [options.model.alpha] 模型透明度
  438. * @param {Array<Number>} [options.model.silhouetteColor] 模型轮廓颜色[0~255,0~255,0~255,0~1]
  439. * @param {Number} [options.model.silhouetteSize] 模型轮廓宽度
  440. * @param {Number} [options.model.minimumPixelSize] 模型最小刻度
  441. * @param {Number} [options.model.maximumScale] 模型的最大比例尺大小,设置模型最大放大大小
  442. * @param {Number} [options.model.heading=0.0] 以弧度为单位的航向分量
  443. * @param {Number} [options.model.pitch=0.0] 以弧度为单位的螺距分量
  444. * @param {Number} [options.model.roll=0.0] 以弧度为单位的滚动分量
  445. */
  446. addModel: function(points, options) {
  447. let _self = this;
  448. let viewer = this._viewer;
  449. //异步函数
  450. return new Promise((resolve, reject) => {
  451. if (!Cesium.defined(points)) {
  452. throw new Cesium.DeveloperError("points is required.");
  453. }
  454. //坐标位置
  455. let position;
  456. if (points instanceof Cesium.Cartesian3) {
  457. position = points;
  458. } else {
  459. position = Cesium.Cartesian3.fromDegrees(points[0], points[1], points[2] || 0);
  460. }
  461. // 初始化参数默认值
  462. options = options || {};
  463. options.id = options.id || setSessionid();
  464. let model = options.model || {};
  465. //透明度
  466. model.alpha = Cesium.defaultValue(model.alpha, 1);
  467. //模型旋转
  468. model.heading = Cesium.defaultValue(model.heading, 0.0);
  469. model.pitch = Cesium.defaultValue(model.pitch, 0.0);
  470. model.roll = Cesium.defaultValue(model.roll, 0.0);
  471. //弧度的航向分量。
  472. var heading = Cesium.Math.toRadians(model.heading);
  473. //弧度的螺距分量。
  474. var pitch = model.pitch;
  475. //滚动分量(以弧度为单位)
  476. var roll = model.roll;
  477. //HeadingPitchRoll旋转表示为航向,俯仰和滚动。围绕Z轴。节距是绕负y轴的旋转。滚动是关于正x轴。
  478. var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  479. let entity = new Cesium.Entity({
  480. id: options.id, //模型id
  481. position: position, // 模型位置
  482. // orientation: Cesium.Transforms.headingPitchRollQuaternion(position, hpr), // 模型方向
  483. model: { // 模型资源
  484. uri: model.url, // 模型路径
  485. incrementallyLoadTextures: true, //加载模型后纹理是否能够继续流入
  486. colorBlendMode: Cesium.ColorBlendMode['HIGHLIGHT'], //经常使用的有三个HIGHLIGHT,REPLACE,MIX
  487. colorBlendAmount: 0.1, //这个属性必须是MIX混合属性才能生效,见colorBlendMode
  488. color: Cesium.Color.WHITE.withAlpha(model.alpha), //模型颜色,这里可以设置颜色的变化,包含透明度的颜色
  489. imageBasedLightingFactor: new Cesium.Cartesian2(12.0, 13.0),
  490. runAnimations: true, //是否运行模型中的动画效果
  491. show: true, // 模型是否可见
  492. // 仅用于调试,显示魔仙绘制时的线框
  493. debugWireframe: false,
  494. // 仅用于调试。显示模型绘制时的边界球。
  495. debugShowBoundingVolume: false,
  496. heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  497. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  498. },
  499. });
  500. // 模型最小刻度,不管缩放如何,模型的最小最小像素大小。
  501. if (model.minimumPixelSize) {
  502. entity.model.minimumPixelSize = model.minimumPixelSize;
  503. }
  504. // 模型最大刻度,模型的最大比例尺大小。 minimumPixelSize的上限。
  505. if (model.maximumScale) {
  506. entity.model.maximumScale = model.maximumScale;
  507. }
  508. // 模型轮廓颜色
  509. if (model.silhouetteColor) {
  510. if (model.silhouetteColor instanceof Array) {
  511. entity.model.silhouetteColor = new Cesium.Color(model.silhouetteColor[0] / 255, model.silhouetteColor[1] / 255, model.silhouetteColor[2] / 255, model.silhouetteColor[3]);
  512. } else if (typeof(model.silhouetteColor) === 'string') {
  513. entity.model.silhouetteColor = new Cesium.Color.fromCssColorString(model.silhouetteColor);
  514. }
  515. }
  516. //模型轮廓宽度
  517. model.silhouetteSize = Cesium.defaultValue(model.silhouetteSize, 1);
  518. _self._viewer.entities.add(entity);
  519. resolve(entity);
  520. });
  521. },
  522. /**
  523. * @description 根据坐标绘制点
  524. * @param {Array/Cesium.Cartesian3} points 坐标位置[lng,lat,height]经度,以度为单位,纬度,以度为单位
  525. * @param {Object} options
  526. *
  527. * @param {Object} [options.id] 用于移除
  528. *
  529. * @param {Object} [options.point] 点的样式,具有以下属性:
  530. * @param {Number} [options.point.pixelSize=10] 指定点的大小,以像素为单位
  531. * @param {Array} [options.point.color=[255,255,255,0]] 点位颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
  532. * @param {String} [options.point.outlineColor=[255,255,255,0]] 指定点轮廓的颜色,,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明,
  533. * @param {Number} [options.point.outlineWidth=0] 指定点轮廓的宽度
  534. *
  535. * @param {Object} [options.label] label的样式,具有以下属性:
  536. * @param {Number} [options.label.text=""] 文字
  537. * @param {String} [options.label.font="24px Helvetica"] 字体样式
  538. * @param {String} [options.label.fillColor=[255,255,255,0]] 字体颜色
  539. * @param {String} [options.label.outlineColor=[255,255,255,0]] 字体边框颜色
  540. * @param {Number} [options.label.outlineWidth=1] 边框宽度
  541. * @param {Number} [options.label.showBackground=false] 是否显示背景颜色
  542. * @param {Number} [options.label.backgroundColor=[255,255,255,0]] 背景颜色
  543. * @param {Number} [options.label.pixelOffset=0] 偏移量
  544. * @param {Number} [options.label.scale=1] 尺寸
  545. * @param {Number} [options.label.scaleByDistance] 相机范围
  546. * @param {Number} [options.label.scaleByDistance.near=1.5e2] 相机范围的下界。
  547. * @param {String} [options.label.scaleByDistance.nearValue=1] 相机范围下界的值。
  548. * @param {String} [options.label.scaleByDistance.far=2400] 相机范围的上限。
  549. * @param {Number} [options.label.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
  550. */
  551. generatePoint(points, options) {
  552. //异步函数
  553. return new Promise((resolve, reject) => {
  554. let _self = this;
  555. if (!Cesium.defined(points)) {
  556. throw new Cesium.DeveloperError("points is required.");
  557. }
  558. options = options || {};
  559. options.id = options.id || setSessionid();
  560. let point = options.point || {};
  561. //点的大小
  562. point.pixelSize = Cesium.defaultValue(point.pixelSize, 10);
  563. //点位颜色
  564. if (point.color instanceof Array) {
  565. point.color = new Cesium.Color(point.color[0] / 255, point.color[1] / 255, point.color[2] / 255, point.color[3]);
  566. } else if (typeof(point.color) === 'string') {
  567. point.color = new Cesium.Color.fromCssColorString(point.color);
  568. } else {
  569. point.color = new Cesium.Color.fromCssColorString("#FFF");
  570. }
  571. //点位轮廓颜色
  572. if (point.outlineColor instanceof Array) {
  573. point.outlineColor = new Cesium.Color(point.outlineColor[0] / 255, point.outlineColor[1] / 255, point.outlineColor[2] / 255, point.outlineColor[3]);
  574. } else if (typeof(point.outlineColor) === 'string') {
  575. point.outlineColor = new Cesium.Color.fromCssColorString(point.outlineColor);
  576. } else {
  577. point.outlineColor = new Cesium.Color.fromCssColorString("#FFF");
  578. }
  579. //点位轮廓宽度
  580. point.outlineWidth = Cesium.defaultValue(point.outlineWidth, 1);
  581. //获取指定坐标的地形高度。
  582. let terrainAltitude = getHeigthByPointsMostDetailed(_self._viewer, [points]);
  583. terrainAltitude.then(function(updatedPositions) {
  584. let position = Cesium.Cartesian3.fromDegrees(points[0], points[1], updatedPositions[0].height)
  585. let entity = new Cesium.Entity({
  586. id: options.id,
  587. position: position,
  588. point: {
  589. pixelSize: point.pixelSize, //点的大小
  590. color: point.color, //点位颜色
  591. outlineColor: point.outlineColor, //点位轮廓颜色
  592. outlineWidth: point.outlineWidth, //点位轮廓宽度
  593. heightReference: Cesium.HeightReference.NONE, //指定高度相对于什么的属性。CLAMP_TO_GROUND可使点贴地,地就是地形。NONE是绝对高程.RELATIVE_TO_GROUND是设置距离地形的相对高度。
  594. // disableDepthTestDistance: Number.POSITIVE_INFINITY, //指定距离相机的距离,在这个距离上禁用深度测试。通过设置相机到圆要素的距离阈值来判断是否开启深度检测,这里设置为1000.0米正常,但是当相机距离超过阈值时,就会开启深度检测,圆还是会只显示一半。将阈值设置为无穷大时:Number.POSITIVE_INFINITY。虽然无论相机距离远近,圆都可以正常显示,但是没有圆的深度检测,不同要素之间的遮挡无法得到有效判断,有的在建筑物后的点会在建筑物前显示,造成视觉误差与干扰。
  595. disableDepthTestDistance: updatedPositions[0].height, //指定距离相机的距离,在这个距离上禁用深度测试。通过设置相机到圆要素的距离阈值来判断是否开启深度检测,这里设置为1000.0米正常,但是当相机距离超过阈值时,就会开启深度检测,圆还是会只显示一半。将阈值设置为无穷大时:Number.POSITIVE_INFINITY。虽然无论相机距离远近,圆都可以正常显示,但是没有圆的深度检测,不同要素之间的遮挡无法得到有效判断,有的在建筑物后的点会在建筑物前显示,造成视觉误差与干扰。
  596. }
  597. });
  598. /* 判断是否需要绘制文字 */
  599. if (options.label) {
  600. let label = options.label || {};
  601. label.text = Cesium.defaultValue(label.text, "");
  602. label.font = Cesium.defaultValue(label.font, "24px Helvetica"); //字体样式
  603. //字体颜色
  604. if (label.fillColor instanceof Array) {
  605. label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]);
  606. } else if (typeof(label.fillColor) === 'string') {
  607. label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor);
  608. } else {
  609. label.fillColor = new Cesium.Color.fromCssColorString("#FFFF00");
  610. }
  611. //字体边框颜色
  612. if (label.outlineColor instanceof Array) {
  613. label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]);
  614. } else if (typeof(label.outlineColor) === 'string') {
  615. label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor);
  616. } else {
  617. label.outlineColor = new Cesium.Color.fromCssColorString("#FFF");
  618. }
  619. //字体边框宽度
  620. label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1);
  621. //是否显示背景颜色
  622. label.showBackground = Cesium.defaultValue(label.showBackground, false);
  623. //背景颜色
  624. if (label.backgroundColor instanceof Array) {
  625. label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]);
  626. } else if (typeof(label.backgroundColor) === 'string') {
  627. label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor);
  628. } else {
  629. label.backgroundColor = new Cesium.Color.fromCssColorString("#FFF");
  630. }
  631. label.pixelOffset = Cesium.defaultValue(label.pixelOffset, 0);
  632. // label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
  633. // label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
  634. label.scale = Cesium.defaultValue(label.scale, 1);
  635. entity.label = {
  636. text: label.text,
  637. font: label.font, //字体样式
  638. fillColor: label.fillColor, //字体颜色
  639. outlineColor: label.outlineColor, //字体边框颜色
  640. outlineWidth: label.outlineWidth, //边框宽度
  641. style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充
  642. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  643. showBackground: label.showBackground, //是否显示背景颜色
  644. backgroundColor: label.backgroundColor, // 背景颜色
  645. backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充padding
  646. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  647. pixelOffset: new Cesium.Cartesian2(0, label.pixelOffset), //偏移量
  648. scale: label.scale, //尺寸
  649. }
  650. }
  651. _self._viewer.entities.add(entity);
  652. resolve(entity)
  653. });
  654. });
  655. },
  656. /**
  657. * 根据GeoJson添加广告牌
  658. * @param {String} geoJsonUrl geoJson文件路径
  659. * @param {Object} options
  660. * @param {String} [options.id] 用于移除
  661. * @param {Object} [options.billboard] 广告牌的样式,具有以下属性:
  662. * @param {Number} [options.billboard.imgUrl] 广告牌图片
  663. * @param {Number} [options.billboard.imgWidth] 广告牌图片宽度
  664. * @param {Number} [options.billboard.imgHeight] 广告牌图片高度
  665. * @param {Number} [options.billboard.scale=1] 尺寸
  666. * @param {Object} [options.billboard.scaleByDistance] 距离相机的距离缩放点。
  667. * @param {Number} [options.billboard.scaleByDistance.near=0] 相机范围的下界。
  668. * @param {String} [options.billboard.scaleByDistance.nearValue=0] 相机范围下界的值。
  669. * @param {String} [options.billboard.scaleByDistance.far=1] 相机范围的上限。
  670. * @param {Number} [options.billboard.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
  671. *
  672. * @param {Object} [options.label] label的样式,具有以下属性:
  673. * @param {Number} [options.label.text=""] 文字
  674. * @param {Number} [options.label.textField=""] 文字字段
  675. * @param {String} [options.label.font="24px Helvetica"] 指定CSS字体的属性,字体大小及样式
  676. * @param {String} [options.label.fillColor=[255,255,255,1]] 字体颜色
  677. * @param {String} [options.label.outlineColor=[255,255,255,1]] 字体边框颜色
  678. * @param {Number} [options.label.outlineWidth=1] 边框宽度
  679. * @param {Number} [options.label.showBackground=false] 是否显示背景颜色
  680. * @param {Number} [options.label.backgroundColor=[255,255,255,1]] 背景颜色
  681. * @param {Number} [options.label.pixelOffset=0] 偏移量
  682. * @param {Number} [options.label.scale=1] 尺寸
  683. * @param {Object} [options.label.scaleByDistance] 距离相机的距离缩放点。
  684. * @param {Number} [options.label.scaleByDistance.near=0] 相机范围的下界。
  685. * @param {String} [options.label.scaleByDistance.nearValue=0] 相机范围下界的值。
  686. * @param {String} [options.label.scaleByDistance.far=1] 相机范围的上限。
  687. * @param {Number} [options.label.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
  688. */
  689. addBillboardByGeoJson: function(geoJsonUrl, options) {
  690. return new Promise((resolve, reject) => {
  691. let _self = this;
  692. let viewer = this._viewer;
  693. if (!Cesium.defined(geoJsonUrl)) {
  694. throw new Cesium.DeveloperError("geoJsonUrl is required.");
  695. }
  696. options = options || {};
  697. options.id = options.id || setSessionid();
  698. let billboard = options.billboard || {};
  699. billboard.imgUrl = Cesium.defaultValue(billboard.imgUrl, 'jt3dSDK/imgs/point/point3.png');
  700. billboard.scale = Cesium.defaultValue(billboard.scale, 1);
  701. billboard.pixelOffset = Cesium.defaultValue(billboard.pixelOffset, 0);
  702. // label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
  703. // label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
  704. let label = options.label || {};
  705. label.text = Cesium.defaultValue(label.text, "");
  706. label.textField = Cesium.defaultValue(label.textField, "");
  707. label.font = Cesium.defaultValue(label.font, "24px Helvetica");
  708. if (label.fillColor instanceof Array) {
  709. label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]);
  710. } else if (typeof(label.fillColor) === 'string') {
  711. label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor);
  712. } else {
  713. label.fillColor = new Cesium.Color.fromCssColorString("#ff0000");
  714. }
  715. if (label.outlineColor instanceof Array) {
  716. label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]);
  717. } else if (typeof(label.outlineColor) === 'string') {
  718. label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor);
  719. } else {
  720. label.outlineColor = new Cesium.Color.fromCssColorString("#FFFF00");
  721. }
  722. label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1);
  723. //是否显示背景颜色
  724. label.showBackground = Cesium.defaultValue(label.showBackground, false);
  725. //背景颜色
  726. if (label.backgroundColor instanceof Array) {
  727. label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]);
  728. } else if (typeof(label.backgroundColor) === 'string') {
  729. label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor);
  730. } else {
  731. label.backgroundColor = new Cesium.Color.fromCssColorString("#FFFF00");
  732. }
  733. label.pixelOffset = Cesium.defaultValue(label.pixelOffset, 0);
  734. // label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
  735. // label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
  736. label.scale = Cesium.defaultValue(label.scale, 1);
  737. const dataSource = new Cesium.GeoJsonDataSource(options.id); // 创建并取名
  738. dataSource.load(geoJsonUrl, {
  739. clampToGround: true
  740. }).then(function(data) {
  741. viewer.dataSources.add(data); // 添加这个datasource
  742. const entities = data.entities.values; // 拿到所有实体
  743. entities.forEach(entity => {
  744. entity.billboard = {
  745. image: billboard.imgUrl,
  746. horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
  747. verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
  748. scale: billboard.scale, //尺寸
  749. pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
  750. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  751. };
  752. let labelText = label.text;
  753. if (entity.properties[label.textField]) {
  754. labelText = entity.properties[label.textField]._value;
  755. }
  756. if (labelText === "") {
  757. labelText = (i + 1).toString();
  758. }
  759. entity.label = {
  760. text: labelText.toString(),
  761. font: label.font,
  762. fillColor: label.fillColor, //填充颜色
  763. outlineColor: label.outlineColor, //边框颜色
  764. outlineWidth: label.outlineWidth, //边框宽度
  765. style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充
  766. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  767. showBackground: label.showBackground, //指定标签后面背景的可见性
  768. backgroundColor: label.backgroundColor, // 背景颜色
  769. backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充padding
  770. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  771. pixelOffset: new Cesium.Cartesian2(0, label.pixelOffset), //偏移量
  772. scale: label.scale, //尺寸
  773. }
  774. if (label.scaleByDistance) {
  775. label.scaleByDistance.near = Cesium.defaultValue(label.scaleByDistance.near, 0);
  776. label.scaleByDistance.nearValue = Cesium.defaultValue(label.scaleByDistance.nearValue, 0);
  777. label.scaleByDistance.far = Cesium.defaultValue(label.scaleByDistance.far, 1);
  778. label.scaleByDistance.farValue = Cesium.defaultValue(label.scaleByDistance.farValue, 0);
  779. entity.label.scaleByDistance = new Cesium.NearFarScalar(label.scaleByDistance.near, label.scaleByDistance.nearValue, label.scaleByDistance.far, label.scaleByDistance.farValue) //按距离缩放,即距离大于180米时,图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
  780. }
  781. })
  782. })
  783. });
  784. },
  785. /**
  786. * 加载GLTF/GLB模型数据
  787. * @param {Object} options 参数对象
  788. * @param {Array/Cesium.Cartesian3} options.points 模型加载位置 Array[lng,lat,height]经度,以度为单位,纬度,以度为单位,高程
  789. * @param {String} options.url 模型路径
  790. * @param {String} [options.id=guid] 模型实体加载ID,加入到整体图层中 以便可以删除对应的图层
  791. * @param {Number} [options.heading=0.0] 以弧度为单位的航向分量
  792. * @param {Number} [options.pitch=0.0] 以弧度为单位的螺距分量
  793. * @param {Number} [options.roll=0.0] 以弧度为单位的滚动分量
  794. * @param {Number} [options.minimumPixelSize] 模型最小刻度
  795. * @param {Number} [options.maximumScale] 模型的最大比例尺大小,设置模型最大放大大小
  796. * @param {Array<Number>} [options.silhouetteColor] 模型轮廓颜色[0~255,0~255,0~255,0~1]
  797. * @param {Number} [options.alpha] 模型透明度
  798. */
  799. addGltf: function(options) {
  800. let _self = this;
  801. let viewer = this._viewer;
  802. //异步函数
  803. return new Promise((resolve, reject) => {
  804. if (!Cesium.defined(options.points)) {
  805. resolve("options.points is required.");
  806. throw new Cesium.DeveloperError("options.points is required.");
  807. }
  808. if (!Cesium.defined(options.url)) {
  809. resolve("options.url is required.");
  810. throw new Cesium.DeveloperError("options.url is required.");
  811. }
  812. // 初始化参数默认值
  813. options.id = options.id || setSessionid();
  814. options.heading = Cesium.defaultValue(options.heading, 0.0);
  815. options.pitch = Cesium.defaultValue(options.pitch, 0.0);
  816. options.roll = Cesium.defaultValue(options.roll, 0.0);
  817. options.alpha = Cesium.defaultValue(options.alpha, 1);
  818. //模型加载位置
  819. let position = undefined;
  820. if (options.points instanceof Cesium.Cartesian3) {
  821. position = options.points;
  822. } else {
  823. position = Cesium.Cartesian3.fromDegrees(options.points[0], options.points[1], options.points[2] || 0);
  824. }
  825. //弧度的航向分量。
  826. var heading = Cesium.Math.toRadians(options.heading);
  827. //弧度的螺距分量。
  828. var pitch = options.pitch;
  829. //滚动分量(以弧度为单位)
  830. var roll = options.roll;
  831. //HeadingPitchRoll旋转表示为航向,俯仰和滚动。围绕Z轴。节距是绕负y轴的旋转。滚动是关于正x轴。
  832. var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  833. var modelGltf = viewer.entities.add({
  834. id: options.id, //模型id
  835. position: position, // 模型位置
  836. orientation: Cesium.Transforms.headingPitchRollQuaternion(position, hpr), // 模型方向
  837. model: { // 模型资源
  838. uri: options.url, // 模型路径
  839. incrementallyLoadTextures: true, //加载模型后纹理是否能够继续流入
  840. colorBlendMode: Cesium.ColorBlendMode['HIGHLIGHT'], //经常使用的有三个HIGHLIGHT,REPLACE,MIX
  841. colorBlendAmount: 0.1, //这个属性必须是MIX混合属性才能生效,见colorBlendMode
  842. color: Cesium.Color.WHITE.withAlpha(options.alpha), //模型颜色,这里可以设置颜色的变化,包含透明度的颜色
  843. imageBasedLightingFactor: new Cesium.Cartesian2(12.0, 13.0),
  844. runAnimations: true, //是否运行模型中的动画效果
  845. show: true, // 模型是否可见
  846. // 仅用于调试,显示魔仙绘制时的线框
  847. debugWireframe: false,
  848. // 仅用于调试。显示模型绘制时的边界球。
  849. debugShowBoundingVolume: false,
  850. },
  851. });
  852. // 模型最小刻度,不管缩放如何,模型的最小最小像素大小。
  853. if (options.minimumPixelSize) {
  854. modelGltf.model.minimumPixelSize = options.minimumPixelSize;
  855. }
  856. // 模型最大刻度,模型的最大比例尺大小。 minimumPixelSize的上限。
  857. if (options.maximumScale) {
  858. modelGltf.model.maximumScale = options.maximumScale;
  859. }
  860. // 模型轮廓颜色
  861. if (options.silhouetteColor) {
  862. if (options.silhouetteColor instanceof Array) {
  863. options.silhouetteColor = new Cesium.Color(options.silhouetteColor[0] / 255, options.silhouetteColor[1] / 255, options.silhouetteColor[2] / 255, options.silhouetteColor[3]);
  864. } else if (typeof(options.silhouetteColor) === 'string') {
  865. options.silhouetteColor = new Cesium.Color.fromCssColorString(options.silhouetteColor);
  866. } else {
  867. options.silhouetteColor = new Cesium.Color.fromCssColorString("#FFFF00");
  868. }
  869. }
  870. window[options.id] = modelGltf;
  871. resolve(options.id);
  872. });
  873. },
  874. /**
  875. * 加载GLTF/GLB模型数据
  876. * @param {Object} options 参数对象
  877. * @param {Array/Cesium.Cartesian3} options.points 模型加载位置 Array[lng,lat,height]经度,以度为单位,纬度,以度为单位,高程
  878. * @param {String} options.url 模型路径
  879. * @param {String} [options.id=guid] 模型实体加载ID,加入到整体图层中 以便可以删除对应的图层
  880. * @param {Number} [options.scale] 放大倍数
  881. */
  882. addModelFromGltf(points, options) {
  883. let _self = this;
  884. let viewer = this._viewer;
  885. //异步函数
  886. return new Promise((resolve, reject) => {
  887. if (!Cesium.defined(options.points)) {
  888. resolve("options.points is required.");
  889. throw new Cesium.DeveloperError("options.points is required.");
  890. }
  891. if (!Cesium.defined(options.url)) {
  892. resolve("options.url is required.");
  893. throw new Cesium.DeveloperError("options.url is required.");
  894. }
  895. options.id = options.id || setSessionid();
  896. options.scale = Cesium.defaultValue(options.scale, 1);
  897. //gltf数据加载位置
  898. let position = undefined;
  899. if (options.points instanceof Cesium.Cartesian3) {
  900. position = options.points;
  901. } else {
  902. position = Cesium.Cartesian3.fromDegrees(options.points[0], options.points[1], options.points[2] || 0);
  903. }
  904. // options.heading = Cesium.defaultValue(options.heading, 0.0);
  905. // options.pitch = Cesium.defaultValue(options.pitch, 0.0);
  906. // options.roll = Cesium.defaultValue(options.roll, 0.0);
  907. // // 设置模型方向
  908. // //弧度的航向分量。
  909. // var heading = Cesium.Math.toRadians(options.heading);
  910. // //弧度的螺距分量。
  911. // var pitch = options.pitch;
  912. // //滚动分量(以弧度为单位)
  913. // var roll = options.roll;
  914. // var hpRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  915. // // 生成一个函数,该函数从以提供的原点为中心的参考帧到提供的椭圆体的固定参考帧计算4x4变换矩阵。
  916. // var fixedFrame = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
  917. const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  918. let model = viewer.scene.primitives.add(
  919. Cesium.Model.fromGltf({
  920. show: true, //确定是否将显示模型基元
  921. url: options.url, // 资源路径
  922. modelMatrix: modelMatrix, // 模型矩阵
  923. lightColor: new Cesium.Cartesian3(10.0, 10.0, 10.0),
  924. // scale: options.scale, // 放大倍数
  925. // 仅用于调试,显示魔仙绘制时的线框
  926. debugWireframe: false,
  927. // 仅用于调试。显示模型绘制时的边界球。
  928. debugShowBoundingVolume: false,
  929. })
  930. )
  931. /** 模型旋转角度 */
  932. model.readyPromise.then(function() {
  933. //延z轴旋转-90度,其它轴同理
  934. var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(0)));
  935. Cesium.Matrix4.multiply(model.modelMatrix, rotationX, model.modelMatrix);
  936. })
  937. window[options.id] = model;
  938. resolve(options.id)
  939. });
  940. },
  941. });
  942. export default PointObject;