JTMap3D.js 111 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436
  1. /**
  2. * 创建者:王成
  3. * 创建日期:2021年11月8日
  4. * 描述:Cesium三维图层
  5. */
  6. /**
  7. * 标注层标识
  8. */
  9. var labelFlag = "_label";
  10. /**
  11. * 绘制模式 包括点 线 面 矩形 点 空
  12. */
  13. var ActionType = {
  14. measureLength: 'measureLength', //测量长度动作
  15. measureArea: 'measureArea', //测量面积动作
  16. queryAttribute: 'queryAttribute', //查询属性动作
  17. clipBIM: 'clipBIM', //切割BIM模型动作
  18. flightAround: 'flightAround', //环绕飞行
  19. non: 'non', //null动作
  20. casePointQuery: 'casePointQuery', //案件点查询
  21. casePolygonQuery: 'casePolygonQuery', //案件区域查询
  22. }
  23. /**
  24. * 构造函数
  25. * @param {JSON} options 选项
  26. */
  27. function CrMap(options) {
  28. this._init(options);
  29. }
  30. /**
  31. * 原型设置 必须的
  32. * @param {JSON} options 选项
  33. */
  34. CrMap.prototype.extend = function(options) {
  35. for (var key in options) {
  36. CrMap.prototype[key] = options[key];
  37. }
  38. }
  39. /**
  40. * 私有函数集合
  41. */
  42. CrMap.prototype.extend({
  43. /**
  44. * 初始化函数
  45. * @param {JSON} options 选项
  46. */
  47. _init: function(options) {
  48. if (options.selector == undefined) {
  49. console.error('未设置地图容器!')
  50. return;
  51. }
  52. //局部变量
  53. this.selector = options.selector; //3D地图容器
  54. this.serverUrl = options.serverUrl;
  55. this.viewer = undefined; //地图
  56. //事件
  57. this.onMouseMove = options.onMouseMove; //鼠标移动事件
  58. this.onShowTooltip = options.onShowTooltip; //显示移动弹窗回调
  59. this.onQueryVectorResult = options.onQueryVectorResult; //矢量数据查询回调
  60. this.onQueryStart = options.onQueryStart; //查询开始回调
  61. this.onExtentChange = options.onExtentChange; //地图范围变化事件
  62. this.onPostSceneChange = options.onPostSceneChange; //场景变化后事件
  63. this.onPopoverQueryTool = options.onPopoverQueryTool; //查询工具 此处指案件
  64. /* 属性查询相关 */
  65. this.queryLayers = []; //查询图层数组
  66. this.attributesQueryIndex = 0; //服务图层查询索引
  67. this.attributesData = []; //属性查询的数据
  68. this.rightInfoIndex = undefined;
  69. this.attributesEntity = []; //Entity查询的内容 需要与attributesData中保持一致
  70. //全局变量
  71. this.beforeLayerIds = []; //预知的图层Id集合 如果是后添加图层 则必须告知该参数
  72. this.imageryLayers = undefined; //图层数组
  73. this.primitives = undefined; //原语集合
  74. this.entities = undefined; //实体集合
  75. this.dataSources = undefined; //数据源数组
  76. //切割相关
  77. this.planeTargetY = 30; //ClippingPlane距离原点的距离
  78. this.planeSelected = undefined; // 鼠标选中的ClippingPlane
  79. //测量相关变量
  80. this.actionType = ActionType.non; //鼠标动作
  81. this.measurePoints = []; //测量数组
  82. this.measureTempPoints = []; //测量面积数组
  83. this.measurePolyline = undefined; //测量线
  84. this.measurePolygon = undefined; //测量面
  85. this.measureDistanceResult = 0; //测量长度
  86. this.measureAreaResult = 0; //测量面积
  87. //测量绘制点样式
  88. this.measurePointStyle = {
  89. pixelSize: 8,
  90. color: this._toColor(0, 154, 94, 1.0),
  91. outlineColor: this._toColor(255, 255, 255, 1.0),
  92. outlineWidth: 1.0
  93. };
  94. //测量结果标注样式
  95. this.measureLabelStyle = {
  96. font: '12px sans-serif',
  97. fillColor: this._toColor(255, 255, 255, 1.0),
  98. outlineColor: this._toColor(0, 154, 94, 1.0),
  99. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  100. outlineWidth: 1.0,
  101. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  102. pixelOffset: new Cesium.Cartesian2(0, -28),
  103. showBackground: true,
  104. backgroundColor: this._toColor(0, 0, 0, 0.6),
  105. };
  106. //环绕飞行相关
  107. this.angle = 0.1; //每次旋转的角度 值越大 旋转越快
  108. this.flightListner = undefined; //环绕飞行监听函数
  109. //区域旋转相关
  110. this.areaRotation = Cesium.Math.toRadians(30);
  111. //案件标注图层文字及广告牌相关
  112. this.caseLabels = undefined;
  113. this.caseLabelBillboards = undefined;
  114. //初始化地图
  115. this._init3DMap();
  116. //注册事件
  117. this._eventRegister();
  118. },
  119. /**
  120. * 初始化三维地图
  121. */
  122. _init3DMap: function() {
  123. this.viewer = new Cesium.Viewer(this.selector, {
  124. animation: false, //是否显示动画控件
  125. baseLayerPicker: false, //地图切换控件(底图以及地形图)是否显示,默认显示true
  126. timeline: false, //是否显示时间线控件,默认true
  127. navigationHelpButton: false, //是否显示帮助信息控件
  128. sceneModePicker: false, //是否显示3D/2D选择器
  129. infoBox: false, //点击要素之后显示的信息,默认true
  130. clampToGround: true, //开启贴地
  131. homeButton: false, //主页按钮,默认true
  132. geocoder: false, //地名查找,默认true
  133. scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
  134. fullscreenButton: false, //全屏按钮,默认显示true
  135. shadows: false, //阴影
  136. // terrainExaggeration: 3.0, //地形夸大
  137. // imageryProvider: new Cesium.TileMapServiceImageryProvider({
  138. // url: 'https://a.tile.openstreetmap.org/'
  139. // }),
  140. imageryProvider: new Cesium.SingleTileImageryProvider({
  141. url: Cesium.buildModuleUrl('Assets/Images/earth_3.jpg'),
  142. }),
  143. selectionIndicator: false, //选中元素显示,默认true选中元素显示,默认true
  144. });
  145. this.viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏版本信息
  146. /* 此项设置为true可以查看哪些内容掉到地下了 正常情况下设置为false 否则会导致绘制的点只能看见一半 */
  147. this.viewer.scene.globe.depthTestAgainstTerrain = false; //地形不透明 地形检测
  148. // this.viewer.imageryLayers.get(0).show = false; //删除默认加载的影像,显示蓝色地球
  149. this.viewer.scene.skyBox.show = false; //是否显示星空
  150. this.viewer.scene.sun.show = true; //是否显示太阳
  151. this.viewer.scene.moon.show = false; //是否显示有月亮
  152. this.viewer.scene.skyAtmosphere.show = true; //是否隐藏大气圈
  153. this.viewer.scene.globe.show = true; //是否显示地球
  154. this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType
  155. .LEFT_DOUBLE_CLICK); //取消鼠标左键双击
  156. this.viewer.scene.debugShowFramesPerSecond = false; //是否显示帧FPS
  157. this.viewer.scene.requestRenderMode = true; //启动主动渲染 这样地图加载完成后停止渲染 可节省CPU的开支
  158. //是否开启抗锯齿
  159. this.viewer.scene.fxaa = true;
  160. this.viewer.scene.postProcessStages.fxaa.enabled = true;
  161. this.imageryLayers = this.viewer.imageryLayers; //赋值图层管理
  162. this.primitives = this.viewer.scene.primitives; //原语集合
  163. this.entities = this.viewer.entities; //实体集合
  164. this.dataSources = this.viewer.dataSources; //数据源集合
  165. /* 案件标注 */
  166. this.caseLabels = this.viewer.scene.primitives.add(new Cesium.LabelCollection());
  167. this.caseLabelBillboards = this.viewer.scene.primitives.add(new Cesium.BillboardCollection());
  168. /* 开启精细渲染 不要太大 否则会导致效率下降 */
  169. this.viewer._cesiumWidget._supportsImageRenderingPixelated = Cesium.FeatureDetection
  170. .supportsImageRenderingPixelated();
  171. this.viewer._cesiumWidget._forceResize = true;
  172. if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
  173. var vtxf_dpr = window.devicePixelRatio;
  174. // 适度降低分辨率
  175. while (vtxf_dpr >= 2.0) {
  176. vtxf_dpr /= 2.0;
  177. }
  178. // alert(vtxf_dpr);
  179. this.viewer.resolutionScale = 2.6;
  180. }
  181. },
  182. /**
  183. * 注册事件
  184. */
  185. _eventRegister: function() {
  186. var self = this;
  187. //定义挂接画布的handler
  188. var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
  189. /* 挂接鼠标移动动作 */
  190. handler.setInputAction(function(moveEvent) {
  191. var pickMent = self.viewer.scene.pick(moveEvent.endPosition);
  192. var ray = self.viewer.camera.getPickRay(moveEvent.endPosition);
  193. var cartesian = self.viewer.scene.globe.pick(ray, self.viewer.scene);
  194. if (cartesian != undefined) {
  195. //世界坐标转地理坐标(弧度)
  196. var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian);
  197. //弧度转换为度
  198. var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math
  199. .PI * 180
  200. ];
  201. //如果挂接了鼠标移动事件 则输出
  202. if (self.onMouseMove != undefined) {
  203. self.onMouseMove(self._getCameraParameter());
  204. }
  205. }
  206. /* Tooltip标签回调 */
  207. if (Cesium.defined(pickMent)) {
  208. //鼠标移动到对象上 指的是Entity对象 如果注册了显示Toolstip的事件 则回调显示
  209. //传递内容包括html ptx pty offsetx offsety isVisible
  210. if (self.onShowTooltip != undefined && pickMent.id && pickMent.id.tooltip) {
  211. self.onShowTooltip({
  212. html: pickMent.id.tooltip.html,
  213. x: moveEvent.endPosition.x,
  214. y: moveEvent.endPosition.y,
  215. offsetx: pickMent.id.tooltip.anchor[0],
  216. offsety: pickMent.id.tooltip.anchor[1],
  217. visible: true,
  218. name: pickMent.id.name,
  219. height: self.viewer.camera.positionCartographic.height,
  220. });
  221. } else {
  222. if (self.onShowTooltip != undefined) {
  223. self.onShowTooltip({
  224. visible: false,
  225. name: undefined,
  226. });
  227. }
  228. }
  229. } else {
  230. if (self.onShowTooltip != undefined) {
  231. self.onShowTooltip({
  232. visible: false,
  233. name: undefined,
  234. });
  235. }
  236. }
  237. /* BIM模型剪裁 */
  238. if (Cesium.defined(self.planeSelected)) {
  239. // 计算鼠标移动的过程中产生的垂直高度距离
  240. var deltaY = moveEvent.startPosition.y - moveEvent.endPosition.y;
  241. self.planeTargetY += deltaY;
  242. }
  243. // /* 测量长度 */
  244. // if (self.actionType == ActionType.measureLength) {
  245. // self._eventMeasureLengthMouseMove(moveEvent)
  246. // }
  247. // /* 测量面积 */
  248. // if (self.actionType == ActionType.measureArea) {
  249. // self._eventMeasureLengthMouseMove(moveEvent)
  250. // }
  251. }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  252. /* 挂接鼠标点击动作 */
  253. handler.setInputAction(function(event) {
  254. var pick = self.viewer.scene.pick(event.position);
  255. //查询动作
  256. if (self.actionType == ActionType.queryAttribute) {
  257. if (self.onQueryStart != undefined) {
  258. self.onQueryStart();
  259. }
  260. self.attributesEntity = [];
  261. //Entity查询
  262. if (Cesium.defined(pick)) {
  263. //经过研究 统一一个出口
  264. if (pick.id != undefined) {
  265. if (pick.id.description != undefined) {
  266. var config = JSON.parse(pick.id.name);
  267. self.attributesEntity.push({
  268. layerName: config.name,
  269. attributes: JSON.parse(pick.id.description),
  270. geometry: config.geometry,
  271. });
  272. }
  273. }
  274. }
  275. //ArcGIS矢量图层查询
  276. self._queryVectorLayer(event.position);
  277. } else if (self.actionType == ActionType.measureLength) {
  278. self._eventMeasureLengthMouseClick(event);
  279. } else if (self.actionType == ActionType.measureArea) {
  280. self._eventMeasureAreaMouseClick(event);
  281. } else if (self.actionType == ActionType.flightAround) {
  282. if (self.flightListner != undefined) {
  283. self.viewer.clock.onTick.removeEventListener(self.flightListner);
  284. self.flightListner = undefined;
  285. self.actionType = ActionType.non;
  286. } else {
  287. self._startFlightAround(event);
  288. }
  289. } else if (self.actionType == ActionType.casePointQuery) {
  290. self._eventCasePointQueryMouseClick(event);
  291. } else if (self.actionType == ActionType.casePolygonQuery) {
  292. self._eventCasePolygonQueryMouseClick(event);
  293. }
  294. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  295. /* 双指触摸变化事件 */
  296. handler.setInputAction(function(moveEvent) {
  297. //如果挂接了鼠标移动事件 则输出
  298. if (self.onMouseMove != undefined) {
  299. self.onMouseMove(self._getCameraParameter());
  300. }
  301. }, Cesium.ScreenSpaceEventType.PINCH_MOVE);
  302. /* 右键点击事件 */
  303. handler.setInputAction(function(event) {
  304. self._eventMeasureEnd(event);
  305. }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  306. /* 鼠标按下事件 */
  307. handler.setInputAction(function(event) {
  308. var pick = self.viewer.scene.pick(event.position);
  309. if (Cesium.defined(pick) && Cesium.defined(pick.id) && Cesium.defined(pick.id.plane)) {
  310. self.planeSelected = pick.id.plane;
  311. self.planeSelected.material = Cesium.Color.BLUE.withAlpha(0.3); // 更改选中的切面颜色
  312. self.planeSelected.outlineColor = Cesium.Color.WHITE;
  313. self.viewer.scene.screenSpaceCameraController.enableInputs = false; // 取消默认的鼠标一切输入事件
  314. }
  315. }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  316. /* 鼠标松开事件 */
  317. handler.setInputAction(function(event) {
  318. if (Cesium.defined(self.planeSelected)) {
  319. self.planeSelected.material = Cesium.Color.RED.withAlpha(0.1); // 恢复选中的切面颜色
  320. self.planeSelected.outlineColor = Cesium.Color.WHITE;
  321. self.planeSelected = undefined;
  322. }
  323. self.viewer.scene.screenSpaceCameraController.enableInputs = true; // 恢复默认的鼠标一切输入事件
  324. }, Cesium.ScreenSpaceEventType.LEFT_UP);
  325. /* 相机移动结束事件 */
  326. self.viewer.camera.moveEnd.addEventListener(function(event) {
  327. //地图变化范围事件
  328. if (self.onExtentChange != undefined) {
  329. //获取当前地图范围
  330. var rect = self.viewer.camera.computeViewRectangle();
  331. var result = {
  332. west: self._arcToDegree(rect.west), //西
  333. south: self._arcToDegree(rect.south),
  334. east: self._arcToDegree(rect.east), //东
  335. north: self._arcToDegree(rect.north),
  336. pitch: self._arcToDegree(self.viewer.camera.pitch),
  337. heading: self._arcToDegree(self.viewer.camera.heading),
  338. height: self.viewer.camera.positionCartographic.height,
  339. }
  340. self.onExtentChange(result);
  341. };
  342. //如果挂接了鼠标移动事件 则输出
  343. if (self.onMouseMove != undefined) {
  344. self.onMouseMove(self._getCameraParameter());
  345. }
  346. });
  347. //渲染新帧后的更新/渲染周期结束时,
  348. self.viewer.scene.postRender.addEventListener(function() {
  349. if (self.onPostSceneChange != undefined) {
  350. self.resetLabelLocation();
  351. /* 需要传递一些参数出去 */
  352. self.onPostSceneChange({
  353. pitch: self._arcToDegree(self.viewer.camera.pitch),
  354. heading: self._arcToDegree(self.viewer.camera.heading),
  355. height: self.viewer.camera.positionCartographic.height,
  356. });
  357. }
  358. });
  359. },
  360. /**
  361. * 查询ArcGIS服务图层的地图范围
  362. * @param {string} url 服务地址
  363. * @param {int} index 图层索引
  364. * @param {JSON} callSuccess 成功回调{xmin:ymin:xmax:ymax:}
  365. * @param {string} callError 失败回调(errorString)
  366. */
  367. _queryAGServerExtent: function(url, index, callSuccess, callError) {
  368. $.ajax({
  369. async: true,
  370. type: 'POST',
  371. dataType: 'json',
  372. url: url + '/' + index + '?f=pjson',
  373. success: function(data) {
  374. if (callSuccess != undefined) {
  375. callSuccess({
  376. xmin: data.extent.xmin,
  377. ymin: data.extent.ymin,
  378. xmax: data.extent.xmax,
  379. ymax: data.extent.ymax,
  380. });
  381. }
  382. },
  383. error: function(XMLHttpRequest, textStatus, errorThrown) {
  384. //通常情况下textStatus和errorThrown只有其中一个包含信息
  385. if (callError != undefined) {
  386. callError(textStatus);
  387. }
  388. }
  389. });
  390. },
  391. /**
  392. * 查询ArcGIS服务图层的数据
  393. * @param {JSON} options
  394. * where{string}:查询条件
  395. * geometry{JSONString}:查询关联的要素 JSON字符串
  396. * fields{string}:需要查询的字段 逗号分隔开的字符串
  397. * returnGeometry{boolean}[true/false]:是否返回要素
  398. * @param {JSON} callSuccess 成功回调 返回的JSON数组
  399. * @param {String} callError 失败回调(errorString)
  400. */
  401. _queryArcGISGeoJSON: function(options, callSuccess, callError) {
  402. var queryParam = {}
  403. //查询文字条件
  404. if (options.where == undefined) {
  405. queryParam.where = "1=1";
  406. } else {
  407. queryParam.where = "1=1 and " + options.where;
  408. }
  409. queryParam.text = "";
  410. queryParam.objectIds = "";
  411. queryParam.time = "";
  412. //查询区域
  413. if (options.geometry == undefined) {
  414. queryParam.geometry = "";
  415. } else {
  416. queryParam.geometry = options.geometry;
  417. }
  418. queryParam.geometryType = "esriGeometryEnvelope";
  419. queryParam.inSR = "";
  420. queryParam.spatialRel = "esriSpatialRelIntersects";
  421. queryParam.relationParam = "";
  422. //查询字段集合
  423. if (options.fields == undefined) {
  424. queryParam.outFields = "*";
  425. } else {
  426. queryParam.outFields = options.fields;
  427. }
  428. if (options.returnGeometry == undefined) {
  429. queryParam.returnGeometry = false;
  430. } else {
  431. queryParam.returnGeometry = options.returnGeometry;
  432. }
  433. queryParam
  434. .maxAllowableOffset = "";
  435. queryParam.geometryPrecision = "";
  436. queryParam.outSR = "";
  437. queryParam.returnIdsOnly = false;
  438. queryParam.returnCountOnly = false;
  439. queryParam.orderByFields = "";
  440. queryParam.groupByFieldsForStatistics = "";
  441. queryParam.outStatistics = "";
  442. queryParam.returnZ = "";
  443. queryParam.returnM = "";
  444. queryParam.gdbVersion = "";
  445. queryParam.returnDistinctValues = "";
  446. queryParam.f = "pjson";
  447. //开始查询
  448. $.ajax({
  449. async: true,
  450. type: 'POST',
  451. dataType: 'jsonp',
  452. contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
  453. url: options.url + '/query',
  454. data: queryParam,
  455. success: function(data) {
  456. if (data.error != undefined) {
  457. if (callError != undefined) callError(data.error.message);
  458. }
  459. if (callSuccess != undefined) callSuccess(data);
  460. },
  461. error: function(XMLHttpRequest, textStatus, errorThrown) {
  462. if (callError != undefined) callError(errorThrown);
  463. }
  464. });
  465. },
  466. /**
  467. * 检测当前的索引是否查过图层总数
  468. * @param {int} index 索引
  469. */
  470. _checkLayerIndex: function(index) {
  471. if (this.imageryLayers == undefined || index == undefined) return false;
  472. var layerIndex = parseFloat(index);
  473. if (layerIndex < this.imageryLayers.length) return true;
  474. else return false;
  475. },
  476. /**
  477. * @param {int} layerIndex 当前图层索引
  478. * @param {string} layerIndex
  479. */
  480. _consoleLayerInfo: function(layerIndex, layerId) {
  481. return;
  482. console.log("已有图层数量:" + this.imageryLayers.length + " 当前图层索引:" + layerIndex);
  483. var result = this._searchCorrelationLayerIndex(layerId);
  484. if (result == undefined) {
  485. console.log("图层Id=" + layerId + " 上下均未有关联图层!");
  486. } else {
  487. console.log("图层Id=" + layerId + " 底部图层索引=" + result.minIndex + " 顶部图层索引=" + result.maxIndex);
  488. }
  489. },
  490. /**
  491. * 搜索指定Id的上下关联图层索引
  492. * @param {string} layerId 图层Id
  493. */
  494. _searchCorrelationLayerIndex: function(layerId) {
  495. var index = this.beforeLayerIds.indexOf(layerId);
  496. if (index == -1) return undefined;
  497. var minIndex = -1;
  498. var maxIndex = -1;
  499. /* 找该图层底部的图层 */
  500. for (var i = index - 1; i >= 0; i--) {
  501. minIndex = this.imageryLayers.indexOf(window[this.beforeLayerIds[i]]);
  502. if (minIndex != -1) {
  503. break;
  504. }
  505. }
  506. /* 找该图层顶部的图层 */
  507. for (var i = index + 1; i < this.beforeLayerIds.length; i++) {
  508. maxIndex = this.imageryLayers.indexOf(window[this.beforeLayerIds[i]]);
  509. if (maxIndex != -1) {
  510. break;
  511. }
  512. }
  513. /* 返回寻找结果 */
  514. return {
  515. minIndex: minIndex,
  516. maxIndex: maxIndex
  517. };
  518. },
  519. /**
  520. * 添加provider到地图中
  521. * @param {Object} provider 图层构建器
  522. * @param {Object} layerId 图层Id
  523. */
  524. _addImageryProvider: function(provider, layerId) {
  525. var resSearch = this._searchCorrelationLayerIndex(layerId);
  526. var resLayer = undefined;
  527. if (resSearch != undefined && resSearch.maxIndex != -1) {
  528. /* 找到该图层顶部的关联图层 则直接插入到该图层到底部 */
  529. resLayer = this.imageryLayers.addImageryProvider(provider, resSearch.maxIndex);
  530. } else if (resSearch != undefined && resSearch.minIndex != -1 && resSearch.minIndex != this
  531. .imageryLayers.length - 1) {
  532. /* 找到该图层底部关联的图层 且该图层不是最顶部的图层 则将该图层加载到这个图层之上 */
  533. resLayer = this.imageryLayers.addImageryProvider(provider, resSearch.minIndex + 1);
  534. } else {
  535. resLayer = this.imageryLayers.addImageryProvider(provider);
  536. }
  537. return resLayer;
  538. },
  539. /**
  540. * @param {int} red 红色[0~255]
  541. * @param {int} green 绿色[0~255]
  542. * @param {int} blue 蓝色[0~255]
  543. * @param {int} alpha 透明度[0~1]
  544. */
  545. _toColor: function(red, green, blue, alpha) {
  546. return new Cesium.Color(red / 255.0, green / 255.0, blue / 255.0, alpha)
  547. },
  548. /**
  549. * 弧度转度
  550. * @param {float} arc 弧度
  551. */
  552. _arcToDegree: function(arc) {
  553. return arc / Math.PI * 180;
  554. },
  555. /**
  556. * 获取海拔高度等信息
  557. * @param {Object} screenPoint 屏幕点
  558. */
  559. _getHeightPoint: function(screenPoint) {
  560. var self = this;
  561. var viewer = this.viewer;
  562. var pick = new Cesium.Cartesian2(screenPoint.x, screenPoint.y);
  563. let resultPoint = {};
  564. if (pick) {
  565. //根据射线和场景求出在球面中的笛卡尔坐标
  566. var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);
  567. //获取该浏览器坐标的顶部数据
  568. var feature = viewer.scene.pick(screenPoint);
  569. if (cartesian) {
  570. //世界坐标转地理坐标(弧度)
  571. var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
  572. if (cartographic) {
  573. //海拔
  574. var height = viewer.scene.globe.getHeight(cartographic);
  575. //视角海拔高度
  576. var he = Math.sqrt(viewer.scene.camera.positionWC.x * viewer.scene.camera.positionWC.x +
  577. viewer.scene.camera.positionWC.y * viewer.scene.camera.positionWC.y + viewer
  578. .scene.camera.positionWC.z * viewer.scene.camera.positionWC.z);
  579. var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian
  580. .z * cartesian.z);
  581. //地理坐标(弧度)转经纬度坐标
  582. var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI *
  583. 180
  584. ];
  585. if (!height) {
  586. height = 0;
  587. }
  588. if (!he) {
  589. he = 0;
  590. }
  591. if (!he2) {
  592. he2 = 0;
  593. }
  594. if (!point) {
  595. point = [0, 0];
  596. }
  597. resultPoint['x'] = point[0].toFixed(6); //经度
  598. resultPoint['y'] = point[0].toFixed(6); //纬度
  599. resultPoint['z'] = height.toFixed(1); //海拔
  600. resultPoint['m'] = (he - he2).toFixed(1); //视角(相机)高度
  601. resultPoint['h'] = height.toFixed(1); //建筑物海拔高度
  602. }
  603. }
  604. if (feature != undefined) {
  605. let cartesian = viewer.scene.pickPosition(screenPoint);
  606. if (Cesium.defined(cartesian)) {
  607. //如果对象已定义,将度转为经纬度
  608. let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  609. let lon = Cesium.Math.toDegrees(cartographic.longitude);
  610. let lat = Cesium.Math.toDegrees(cartographic.latitude);
  611. let MouseHeight = cartographic.height; //模型高度
  612. resultPoint['h'] = MouseHeight.toFixed(1);
  613. }
  614. }
  615. }
  616. return resultPoint;
  617. },
  618. /**
  619. * 三维模型旋转平移
  620. * @param {Object} tileset 三维模型数据
  621. * @param {JSON} params
  622. * params参数{tx:{float}x方向平移 ty:{float}y方向平移 tz:{float}z方向平移}
  623. * params参数{rx:{float}x方向旋转 ry:{float}y方向旋转 rz:{float}z方向旋转}
  624. */
  625. _update3dtilesMaxtrix: function(tileset, params) {
  626. //旋转
  627. var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
  628. var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
  629. var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
  630. var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
  631. var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
  632. var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
  633. //平移
  634. var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
  635. var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  636. //旋转、平移矩阵相乘
  637. Cesium.Matrix4.multiply(m, rotationX, m);
  638. Cesium.Matrix4.multiply(m, rotationY, m);
  639. Cesium.Matrix4.multiply(m, rotationZ, m);
  640. //赋值给tileset
  641. tileset._root.transform = m;
  642. },
  643. /**
  644. * 世界坐标系坐标转换为经纬度坐标
  645. * @param {Object} coord 世界坐标系坐标
  646. */
  647. _wordToWGS84: function(coord) {
  648. var g84 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(coord);
  649. var lat = Cesium.Math.toDegrees(g84.latitude);
  650. var lng = Cesium.Math.toDegrees(g84.longitude);
  651. var alt = g84.height;
  652. return {
  653. lng: lng,
  654. lat: lat,
  655. alt: alt,
  656. }
  657. },
  658. _getDataUri: function(url, callback) {
  659. var image = new Image();
  660. image.onload = function() {
  661. var canvas = document.createElement('canvas');
  662. canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
  663. canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
  664. canvas.getContext('2d').drawImage(this, 0, 0);
  665. // Get raw image data
  666. callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
  667. // ... or get as Data URI
  668. callback(canvas.toDataURL('image/png'));
  669. };
  670. image.src = url;
  671. },
  672. /**
  673. * 获取相机输出参数
  674. */
  675. _getCameraParameter: function() {
  676. var self = this;
  677. var position = this._getCameraPosition();
  678. return {
  679. screenX: '',
  680. screenY: '',
  681. mapX: position.lng.toFixed(6),
  682. mapY: position.lat.toFixed(6),
  683. mapZ: position.alt.toFixed(2),
  684. pitch: self._arcToDegree(self.viewer.camera.pitch),
  685. height: self.viewer.camera.positionCartographic.height,
  686. heading: self._arcToDegree(self.viewer.camera.heading),
  687. }
  688. },
  689. /**
  690. * 获取相机位置{lng: lat: alt:}
  691. */
  692. _getCameraPosition: function() {
  693. var ellipsoid = this.viewer.scene.globe.ellipsoid;
  694. var position = this.viewer.camera.position;
  695. var cartographic = ellipsoid.cartesianToCartographic(position);
  696. return {
  697. lng: this._arcToDegree(cartographic.longitude),
  698. lat: this._arcToDegree(cartographic.latitude),
  699. alt: cartographic.height,
  700. }
  701. },
  702. /**
  703. * 获取屏幕点的经纬度及高度 如果点击位置有模型则获取模型高度 否则获取地形高度
  704. * @param {JSON} screenPoint 屏幕点
  705. * x{float}:x位置
  706. * y{float}:y位置
  707. */
  708. _getLocation: function(screenPoint) {
  709. var lng = undefined,
  710. lat = undefined,
  711. height = undefined;
  712. /* 从相机位置到 windowPosition 处的像素创建射线在世界坐标系中 */
  713. var ray = this.viewer.scene.camera.getPickRay(screenPoint);
  714. /* 找到射线与渲染的地球表面之间的交点 */
  715. var position = this.viewer.scene.globe.pick(ray, this.viewer.scene);
  716. /* 获取地理位置的制图表达 */
  717. var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
  718. /* 查询屏幕位置的要素 */
  719. var feature = this.viewer.scene.pick(screenPoint);
  720. if (feature == undefined) {
  721. lng = Cesium.Math.toDegrees(cartographic.longitude);
  722. lat = Cesium.Math.toDegrees(cartographic.latitude);
  723. height = cartographic.height;
  724. console.log("地形高度 = " + height);
  725. } else {
  726. var cartesian = this.viewer.scene.pickPosition(screenPoint);
  727. if (Cesium.defined(cartesian)) {
  728. var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  729. lng = Cesium.Math.toDegrees(cartographic.longitude);
  730. lat = Cesium.Math.toDegrees(cartographic.latitude);
  731. height = cartographic.height;
  732. console.log("三维高度 = " + height);
  733. }
  734. }
  735. /* 返回结果 */
  736. return {
  737. lng: lng,
  738. lat: lat,
  739. height: height,
  740. }
  741. }
  742. })
  743. /**
  744. * 图层相关
  745. */
  746. CrMap.prototype.extend({
  747. /**
  748. * 设置地形
  749. * @param {JSON} options
  750. * url{string}:地形服务URL地址
  751. */
  752. setTerrainLayer: function(options) {
  753. var terrainLayer = new Cesium.CesiumTerrainProvider({
  754. url: options.url, // 默认立体地表
  755. // 请求照明
  756. requestVertexNormals: true,
  757. // 请求水波纹效果
  758. requestWaterMask: true
  759. });
  760. this.viewer.terrainProvider = terrainLayer;
  761. /* 保存值公共变量 后期使用 */
  762. window['dem'] = terrainLayer;
  763. },
  764. /**
  765. * 添加Mapbox图层
  766. * @param {JSON} options
  767. * id{String}:图层Id
  768. * isshow{boolean}[true/false]:是否显示
  769. */
  770. addMapboxLayer: function(options) {
  771. this._consoleLayerInfo(options.index, options.id);
  772. var mapboxProvider = new Cesium.MapboxStyleImageryProvider({
  773. url: 'https://api.mapbox.com/styles/v1',
  774. username: 'chenchen1990',
  775. styleId: 'ckvgc14xrh7mo14qowdw4wrkf',
  776. accessToken: 'pk.eyJ1IjoiY2hlbmNoZW4xOTkwIiwiYSI6ImNrbzA3eTY1OTA3dXkyd20zdG40ZGdmNXYifQ.xWKxjBG6mEDh55_oln0nAg',
  777. scaleFactor: true
  778. });
  779. /* 加入图层 */
  780. var mapboxLayer = this._addImageryProvider(mapboxProvider, options.id);
  781. /* 控制是否显示 */
  782. mapboxLayer.show = options.isshow == undefined ? true : options.isshow;
  783. /* 加入到整体图层中 以便可以删除对应的图层 */
  784. window[options.id] = mapboxLayer;
  785. },
  786. /**
  787. * 添加在线影像地图
  788. * @param {JSON} options
  789. * id{string}:图层id
  790. * isshow{boolean}[true/false]:是否显示
  791. */
  792. addOnlineRasterLayer: function(options) {
  793. this._consoleLayerInfo(options.index, options.id);
  794. /* 加载影像图底图 */
  795. var tdtImageURL =
  796. "https://{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2471a323eac0646da7c7af7e16788b71";
  797. var tdtImageURLTemplate = new Cesium.UrlTemplateImageryProvider({
  798. url: tdtImageURL,
  799. tilingScheme: new Cesium.WebMercatorTilingScheme(),
  800. minimumLevel: 0,
  801. maximumLevel: 18,
  802. subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  803. });
  804. var layerRaseter = this._addImageryProvider(tdtImageURLTemplate, options.id);
  805. layerRaseter.gamma = 0.5;
  806. layerRaseter.show = options.isshow == undefined ? true : options.isshow;
  807. /* 加载影像图标签 */
  808. var tdtImageLabelURL =
  809. "https://{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2471a323eac0646da7c7af7e16788b71";
  810. var tdtImageLabelURLTemplate = new Cesium.UrlTemplateImageryProvider({
  811. url: tdtImageLabelURL,
  812. tilingScheme: new Cesium.WebMercatorTilingScheme(),
  813. minimumLevel: 0,
  814. maximumLevel: 18,
  815. subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  816. });
  817. /* 标注添加到最顶层 */
  818. var layerLabel = this.imageryLayers.addImageryProvider(tdtImageLabelURLTemplate);;
  819. layerLabel.show = options.isshow == undefined ? true : options.isshow;
  820. //查询标注图层索引 然后在其下方加载对应的图层
  821. var labelIndex = this.imageryLayers.indexOf(layerLabel);
  822. /* 加入到整体图层中 以便可以删除对应的图层 */
  823. window[options.id] = layerRaseter;
  824. window[options.id + labelFlag] = layerLabel;
  825. },
  826. /**
  827. * 添加在线标准地图
  828. * @param {JSON} options
  829. * id{string}:图层id
  830. * isshow{boolean}[true/false]:是否显示
  831. */
  832. addOnlineVectorLayer: function(options) {
  833. this._consoleLayerInfo(options.index, options.id);
  834. /* 加载矢量底图 */
  835. var tdtImageURL =
  836. "https://{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2471a323eac0646da7c7af7e16788b71";
  837. var tdtImageURLTemplate = new Cesium.UrlTemplateImageryProvider({
  838. url: tdtImageURL,
  839. tilingScheme: new Cesium.WebMercatorTilingScheme(),
  840. minimumLevel: 0,
  841. maximumLevel: 18,
  842. subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  843. });
  844. var layerVector = this._addImageryProvider(tdtImageURLTemplate, options.id);
  845. layerVector.gamma = 0.1;
  846. layerVector.show = options.isshow == undefined ? true : options.isshow;
  847. //首先添加标注图层
  848. var tdtImageLabelURL =
  849. "https://{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2471a323eac0646da7c7af7e16788b71";
  850. var tdtImageLabelURLTemplate = new Cesium.UrlTemplateImageryProvider({
  851. url: tdtImageLabelURL,
  852. tilingScheme: new Cesium.WebMercatorTilingScheme(),
  853. minimumLevel: 0,
  854. maximumLevel: 18,
  855. subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  856. });
  857. var layerLabel = this.imageryLayers.addImageryProvider(tdtImageLabelURLTemplate);
  858. layerLabel.gamma = 0.2;
  859. layerLabel.show = options.isshow == undefined ? true : options.isshow;
  860. /* 加入到整体图层中 以便可以删除对应的图层 */
  861. window[options.id] = layerVector;
  862. window[options.id + labelFlag] = layerLabel;
  863. },
  864. /**
  865. * @param {JSON} options
  866. * url{string}:wmts服务地址
  867. * maxLevel{int}:最大缩放层级
  868. * minLevel{int}:最小缩放层级
  869. * isshow{boolean}[true/false]:是否显示
  870. * alpha{float}[0.0-1.0]:透明度
  871. */
  872. addWmtsTileLayer: function(options) {
  873. this._consoleLayerInfo(options.index, options.id);
  874. var wmtsProvider = new Cesium.WebMapTileServiceImageryProvider({
  875. url: options.url,
  876. layer: 1,
  877. style: 'default',
  878. format: 'image/png',
  879. tileMatrixSetID: 'default028mm',
  880. maximumLevel: options.maxLevel,
  881. minimumLevel: options.minLevel,
  882. });
  883. var wmtslayer = this._addImageryProvider(wmtsProvider, options.id);
  884. wmtslayer.show = options.isshow == undefined ? true : options.isshow;
  885. /*加入到窗体中*/
  886. window[options.id] = wmtslayer;
  887. window[options.id].alpha = options.alpha == undefined ? 1.0 : parseFloat(options.alpha);
  888. },
  889. /**
  890. * 加载ArcGIS矢量图层
  891. * @param {JSON} options 参数集合
  892. * id{string}:图层Id 唯一标识
  893. * url{string}:服务地址
  894. * layers{array}:图层数组 [0]
  895. * isshow{boolean}[true/false]:是否显示
  896. * isQuery{boolean}[true/false]:是否支持查询
  897. * label{JSON}:标注配置
  898. * url{string}:标注地址
  899. * lng{string}:标注位置的经度字段名称
  900. * lat{string}:标注位置的纬度字段名称
  901. * alt{string}:标注位置的高度字段名称
  902. * key{string}:标注显示内容的字段名称
  903. * size{int}:标注的大小 单位是px 无需带px
  904. * family{string}:标注的字体名称
  905. * color{string}:标注的颜色,为使用逗号分隔开的字符串 233,124,234
  906. * display{int}:标注的显示距离
  907. * image{string}:标注关联的广告牌路径
  908. */
  909. addAGSVectorServer: function(options) {
  910. this._consoleLayerInfo(options.index, options.id);
  911. var self = this;
  912. self._queryAGServerExtent(options.url, options.layers[0], function(data) {
  913. var gisProvider = new Cesium.ArcGisMapServerImageryProvider({
  914. url: options.url,
  915. layers: options.layers,
  916. rectangle: Cesium.Rectangle.fromDegrees(data.xmin, data.ymin, data.xmax,
  917. data.ymax),
  918. });
  919. //添加到图层中
  920. var layer = self._addImageryProvider(gisProvider, options.id);
  921. layer.show = options.isshow == undefined ? true : options.isshow; //控制是否显示
  922. //判断是否需要加入到查询数组
  923. if (options.isQuery != undefined && options.isQuery) {
  924. //判断是否已经存在
  925. var isExists = false;
  926. for (var qIdx = 0; qIdx < self.queryLayers.length; qIdx++) {
  927. if (self.queryLayers[qIdx].id == options.id) {
  928. isExists = true;
  929. break;
  930. }
  931. }
  932. if (!isExists) {
  933. self.queryLayers.push({
  934. id: options.id,
  935. provider: gisProvider,
  936. });
  937. }
  938. }
  939. if (options.label != undefined) {
  940. var queryFields = options.label.lat + "," + options.label.lng + "," + options
  941. .label
  942. .alt + "," + options.label.key;
  943. //追加属性 如果是多图片显示
  944. if (options.label.images != undefined) {
  945. queryFields += "," + options.label.images.key;
  946. }
  947. //如果存在移动弹出信息 则对查询字段进行组合
  948. var entityTooltip = options.label.tooltip;
  949. if (entityTooltip != undefined) {
  950. queryFields += "," + entityTooltip.key + "," + entityTooltip.fields.join();
  951. }
  952. self._queryArcGISGeoJSON({
  953. url: options.label.url,
  954. fields: queryFields,
  955. }, function(resData) {
  956. var parentEntity = self.viewer.entities.add(new Cesium.Entity({
  957. name: options.id,
  958. }));
  959. parentEntity.show = options.isshow == undefined ? true : options
  960. .isshow; //设置是否显示
  961. //查询结束 开始添加标注
  962. for (var i = 0; i < resData.features.length; i++) {
  963. var lng = resData.features[i].attributes[options.label.lng];
  964. var lat = resData.features[i].attributes[options.label.lat];
  965. var alt = resData.features[i].attributes[options.label.alt];
  966. var key = resData.features[i].attributes[options.label.key];
  967. var entity = self.viewer.entities.add({
  968. name: options.id,
  969. parent: parentEntity,
  970. position: Cesium.Cartesian3.fromDegrees(lng, lat,
  971. parseFloat(alt) + 50),
  972. label: {
  973. text: key,
  974. font: options.label.size + 'px ' + options.label
  975. .family,
  976. scale: 0.5,
  977. fillColor: Cesium.Color.WHITE,
  978. outlineColor: Cesium.Color.fromCssColorString(
  979. 'rgba(' + options.label.color + ')'),
  980. outlineWidth: 4,
  981. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  982. horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  983. verticalOrigin: Cesium.VerticalOrigin.center,
  984. pixelOffset: new Cesium.Cartesian2(20, 0),
  985. showBackground: false,
  986. backgroundColor: new Cesium.Color(0.5, 0.6, 1,
  987. 0.5),
  988. distanceDisplayCondition: new Cesium
  989. .DistanceDisplayCondition(0, options.label
  990. .display),
  991. },
  992. billboard: {
  993. image: self.serverUrl + options.label.image,
  994. horizontalOrigin: Cesium.HorizontalOrigin
  995. .center,
  996. verticalOrigin: Cesium.VerticalOrigin.center,
  997. scale: 0.5,
  998. }
  999. });
  1000. //如果是多图片显示 则重置entity的广告牌图片
  1001. if (options.label.images != undefined) {
  1002. var value = resData.features[i].attributes[options.label
  1003. .images
  1004. .key];
  1005. var config = options.label.images.config;
  1006. for (var idx = 0; idx < config.length; idx++) {
  1007. var minValue = config[idx].minValue;
  1008. var maxValue = config[idx].maxValue;
  1009. if (value >= minValue && value <= maxValue) {
  1010. entity.billboard.image = config[idx].icon;
  1011. break;
  1012. }
  1013. }
  1014. }
  1015. //加入实体
  1016. //组合弹出信息
  1017. if (entityTooltip != undefined) {
  1018. var htmlJSON = {};
  1019. htmlJSON['key'] = resData.features[i].attributes[
  1020. entityTooltip
  1021. .key];
  1022. for (var fld = 0; fld < entityTooltip.fields
  1023. .length; fld++) {
  1024. htmlJSON[entityTooltip.fields[fld]] = resData.features[
  1025. i]
  1026. .attributes[entityTooltip.fields[fld]];
  1027. }
  1028. entity.tooltip = {
  1029. html: JSON.stringify(htmlJSON),
  1030. anchor: [0, 30],
  1031. }
  1032. }
  1033. }
  1034. window[options.id] = layer;
  1035. window[options.id + labelFlag] = parentEntity;
  1036. });
  1037. } else {
  1038. window[options.id] = layer;
  1039. }
  1040. }, function(err) {
  1041. });
  1042. },
  1043. /**
  1044. * 加载ArcGIS矢量图层
  1045. * @param {JSON} options 参数集合
  1046. * id{string}:图层Id 唯一标识
  1047. * url{string}:服务地址
  1048. * layers{array}:图层数组 [0]
  1049. * isshow{boolean}[true/false]:是否显示
  1050. * isQuery{boolean}[true/false]:是否支持查询
  1051. * label{JSON}:标注配置
  1052. * url{string}:标注地址
  1053. * lng{string}:标注位置的经度字段名称
  1054. * lat{string}:标注位置的纬度字段名称
  1055. * alt{string}:标注位置的高度字段名称
  1056. * key{string}:标注显示内容的字段名称
  1057. * size{int}:标注的大小 单位是px 无需带px
  1058. * family{string}:标注的字体名称
  1059. * color{string}:标注的颜色,为使用逗号分隔开的字符串 233,124,234
  1060. * display{int}:标注的显示距离
  1061. * offset{array}:标注的偏移距离[0,0]
  1062. * scale{float}:标注的显示比例
  1063. * billboard{JSON}:广告牌配置
  1064. * image{string}:关联的广告牌路径
  1065. * display{int}:广告牌的显示距离
  1066. * offset{array}:广告牌的偏移距离[0,0]
  1067. * scale{float}:广告牌的显示比例
  1068. */
  1069. addAGSVectorServerToo: function(options) {
  1070. this._consoleLayerInfo(options.index, options.id);
  1071. var self = this;
  1072. self._queryAGServerExtent(options.url, options.layers[0], function(data) {
  1073. var gisProvider = new Cesium.ArcGisMapServerImageryProvider({
  1074. url: options.url,
  1075. layers: options.layers,
  1076. rectangle: Cesium.Rectangle.fromDegrees(data.xmin, data.ymin, data.xmax,
  1077. data.ymax),
  1078. });
  1079. //添加到图层中
  1080. var layer = self._addImageryProvider(gisProvider, options.id);
  1081. layer.show = options.isshow == undefined ? true : options.isshow; //控制是否显示
  1082. //判断是否需要加入到查询数组
  1083. if (options.isQuery != undefined && options.isQuery) {
  1084. //判断是否已经存在
  1085. var isExists = false;
  1086. for (var qIdx = 0; qIdx < self.queryLayers.length; qIdx++) {
  1087. if (self.queryLayers[qIdx].id == options.id) {
  1088. isExists = true;
  1089. break;
  1090. }
  1091. }
  1092. if (!isExists) {
  1093. self.queryLayers.push({
  1094. id: options.id,
  1095. provider: gisProvider,
  1096. });
  1097. }
  1098. }
  1099. if (options.label != undefined) {
  1100. var queryFields = options.label.lat + "," + options.label.lng + "," + options
  1101. .label
  1102. .alt + "," + options.label.key;
  1103. //如果存在移动弹出信息 则对查询字段进行组合
  1104. var entityTooltip = options.label.tooltip;
  1105. if (entityTooltip != undefined) {
  1106. queryFields += "," + entityTooltip.key + "," + entityTooltip.fields.join();
  1107. }
  1108. self._queryArcGISGeoJSON({
  1109. url: options.label.url,
  1110. fields: queryFields,
  1111. }, function(resData) {
  1112. var parentEntity = self.viewer.entities.add(new Cesium.Entity({
  1113. name: options.id,
  1114. }));
  1115. parentEntity.show = options.isshow == undefined ? true : options
  1116. .isshow; //设置是否显示
  1117. //查询结束 开始添加标注
  1118. for (var i = 0; i < resData.features.length; i++) {
  1119. var lng = resData.features[i].attributes[options.label.lng];
  1120. var lat = resData.features[i].attributes[options.label.lat];
  1121. var alt = resData.features[i].attributes[options.label.alt];
  1122. var key = resData.features[i].attributes[options.label.key];
  1123. var entity = self.viewer.entities.add({
  1124. name: options.id,
  1125. parent: parentEntity,
  1126. position: Cesium.Cartesian3.fromDegrees(lng, lat,
  1127. parseFloat(alt) - 0),
  1128. label: {
  1129. text: key,
  1130. font: options.label.size + 'px ' + options.label
  1131. .family,
  1132. scale: options.label.scale,
  1133. fillColor: Cesium.Color.fromCssColorString(
  1134. 'rgba(' + options.label.color + ')'),
  1135. horizontalOrigin: Cesium.HorizontalOrigin
  1136. .CENTER,
  1137. verticalOrigin: Cesium.VerticalOrigin.CENTER,
  1138. pixelOffset: new Cesium.Cartesian2(options.label
  1139. .offset[0], options.label.offset[1]),
  1140. distanceDisplayCondition: new Cesium
  1141. .DistanceDisplayCondition(0, options.label
  1142. .display),
  1143. eyeOffset: new Cesium.Cartesian3(0, 0, -10)
  1144. }
  1145. });
  1146. if (options.billboard != undefined) {
  1147. entity.billboard = {
  1148. image: options.billboard.image,
  1149. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  1150. scale: options.billboard.scale,
  1151. verticalOrigin: Cesium.VerticalOrigin.BASELINE,
  1152. pixelOffset: new Cesium.Cartesian2(options.billboard
  1153. .offset[0], options.billboard.offset[1]),
  1154. distanceDisplayCondition: new Cesium
  1155. .DistanceDisplayCondition(0, options.billboard
  1156. .display),
  1157. }
  1158. }
  1159. //组合弹出信息
  1160. if (entityTooltip != undefined) {
  1161. var htmlJSON = {};
  1162. htmlJSON['key'] = resData.features[i].attributes[
  1163. entityTooltip
  1164. .key];
  1165. for (var fld = 0; fld < entityTooltip.fields
  1166. .length; fld++) {
  1167. htmlJSON[entityTooltip.fields[fld]] = resData.features[
  1168. i]
  1169. .attributes[entityTooltip.fields[fld]];
  1170. }
  1171. entity.tooltip = {
  1172. html: JSON.stringify(htmlJSON),
  1173. anchor: [0, 30],
  1174. }
  1175. }
  1176. }
  1177. window[options.id] = layer;
  1178. window[options.id + labelFlag] = parentEntity;
  1179. });
  1180. } else {
  1181. window[options.id] = layer;
  1182. }
  1183. }, function(err) {
  1184. });
  1185. },
  1186. /**
  1187. * @param {JSON} options
  1188. * url[{string}]:资源的Url数组
  1189. * id{string}:图层Id
  1190. * isshow{boolean}[true/false]:是否显示
  1191. * params参数{tx:{float}x方向平移 ty:{float}y方向平移 tz:{float}z方向平移}
  1192. * params参数{rx:{float}x方向旋转 ry:{float}y方向旋转 rz:{float}z方向旋转}
  1193. */
  1194. add3DTilesets: function(options) {
  1195. var self = this;
  1196. var subLayerIds = [];
  1197. var tilesets = new Cesium.PrimitiveCollection();
  1198. for (var i = 0; i < options.url.length; i++) {
  1199. var url = options.url[i];
  1200. var tileLayer = new Cesium.Cesium3DTileset({
  1201. url: url,
  1202. show: options.isshow == undefined ? true : options.isshow,
  1203. maximumScreenSpaceError: 16,
  1204. maxmumMemoryUsage: 218,
  1205. skipScreenSpaceErrorFactor: 16,
  1206. dynamicScreenSpaceError: true,
  1207. skipLevels: 1,
  1208. cullWithChildrenBounds: true,
  1209. cullRequestsWhileMoving: true,
  1210. cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
  1211. });
  1212. var tileset = tilesets.add(tileLayer);
  1213. tileset.readyPromise.then(function(primitive) {
  1214. if (options.params != undefined) {
  1215. self._update3dtilesMaxtrix(primitive, options.params);
  1216. }
  1217. })
  1218. }
  1219. /* 加入图层 */
  1220. this.primitives.add(tilesets);
  1221. /* 加入公共资源 */
  1222. window[options.id] = tilesets;
  1223. },
  1224. /**
  1225. * @param {JSON} options
  1226. * id{string}:图层Id
  1227. * isshow{boolean}[true/false]:是否显示
  1228. * model{JSON数组}[{url:glb地址,lng:lat:alt:},{}] 加载的glb文件JSON格式数组
  1229. */
  1230. addGlbs: function(options) {
  1231. /* 如果没有配置模型则返回 */
  1232. if (options.model == undefined || options.model.length == 0) rturn;
  1233. var self = this;
  1234. var layer = undefined;
  1235. /* 创建第0个glb 作为飞行点 */
  1236. var model0 = options.model[0];
  1237. var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
  1238. Cesium.Cartesian3.fromDegrees(model0.lng, model0.lat, model0.alt)
  1239. );
  1240. var parentEntity = self.entities.add({
  1241. name: options.id,
  1242. position: Cesium.Cartesian3.fromDegrees(model0.lng, model0.lat, model0.alt),
  1243. model: {
  1244. uri: model0.name,
  1245. modelMatrix: modelMatrix,
  1246. scale: 1.0 //放大倍数
  1247. },
  1248. });
  1249. /* 设置显示或隐藏 */
  1250. parentEntity.show = options.isshow == undefined ? true : options.isshow;
  1251. /* 挂接其他大棚 */
  1252. for (var i = 1; i < options.model.length; i++) {
  1253. var model = options.model[i];
  1254. var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
  1255. Cesium.Cartesian3.fromDegrees(model.lng, model.lat, model.alt)
  1256. );
  1257. //做个实验试试
  1258. var entity = self.entities.add({
  1259. parent: parentEntity,
  1260. name: options.id,
  1261. position: Cesium.Cartesian3.fromDegrees(model.lng, model.lat, model.alt),
  1262. model: {
  1263. uri: model.name,
  1264. modelMatrix: modelMatrix,
  1265. scale: 1.0 //放大倍数
  1266. },
  1267. });
  1268. }
  1269. /* 加入到全局*/
  1270. window[options.id] = parentEntity;
  1271. },
  1272. /**
  1273. * 添加GeoJSON数据图层
  1274. * @param {JSON} options 配置项
  1275. * url{String}:数据地址
  1276. * line{JSON}:线的配置
  1277. * line.width{int}宽度
  1278. * line.power{double}[0-1]:发光强度
  1279. * line.color{}
  1280. */
  1281. addGeoJSONLayer: function(options) {
  1282. var self = this;
  1283. /* 加载JSON数据 */
  1284. var promise = Cesium.GeoJsonDataSource.load(options.url, {
  1285. clampToGround: true,
  1286. });
  1287. promise.then(function(dataSource) {
  1288. /* 设置数据源的名称 */
  1289. dataSource.name = options.id;
  1290. /* 添加数据源 */
  1291. self.dataSources.add(dataSource);
  1292. var entities = dataSource.entities.values;
  1293. var lineWidth = 20;
  1294. var linePower = 0.2;
  1295. var lineColor = Cesium.Color.ORANGERED.withAlpha(.9);
  1296. /* 根据配置项判断是否进行了相关设置 */
  1297. if (options.line != undefined) {
  1298. if (options.line.width != undefined) lineWidth = options.line.width;
  1299. if (options.line.power != undefined) linePower = options.line.power;
  1300. if (options.line.color != undefined) {
  1301. var jsonColor = options.line.color;
  1302. if (jsonColor.r != undefined && jsonColor.g != undefined && jsonColor.b !=
  1303. undefined && jsonColor.a != undefined) {
  1304. lineColor = self._toColor(jsonColor.r, jsonColor.g, jsonColor.b,
  1305. jsonColor
  1306. .a);
  1307. }
  1308. }
  1309. }
  1310. for (var o = 0; o < entities.length; o++) {
  1311. var entity = entities[o];
  1312. entity.nameID = o; //给每条线添加一个编号,方便之后对线修改样式
  1313. entity.polyline.width = lineWidth; //添加默认样式
  1314. (entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({
  1315. glowPower: linePower, //一个数字属性,指定发光强度,占总线宽的百分比。
  1316. color: lineColor,
  1317. }), 10)
  1318. }
  1319. /* 加入到全局 */
  1320. window[options.id] = dataSource;
  1321. })
  1322. },
  1323. /**
  1324. * 删除加载的所有图层
  1325. */
  1326. removeAllLayer: function() {
  1327. this.imageryLayers.removeAll();
  1328. this.viewer.entities.removeAll();
  1329. this.viewer.scene.primitives.removeAll();
  1330. this.queryLayers = [];
  1331. this.dataSources.removeAll();
  1332. },
  1333. /**
  1334. * 移除图层
  1335. * @param {Object} layerId 图层Id
  1336. */
  1337. removeLayer: function(layerId) {
  1338. this.imageryLayers.remove(window[layerId]);
  1339. this.primitives.remove(window[layerId]);
  1340. this.dataSources.remove(window[layerId]);
  1341. /* 如果标注层存在则同步删除 */
  1342. if (window[layerId + labelFlag] != undefined) {
  1343. this.imageryLayers.remove(window[layerId + labelFlag]);
  1344. var entities = this.viewer.entities;
  1345. var delEntitys = [];
  1346. //循环查找符合条件的Entity
  1347. for (var i = 0; i < entities.values.length; i++) {
  1348. if (entities.values[i].name == layerId) {
  1349. delEntitys.push(entities.values[i]);
  1350. }
  1351. }
  1352. //删除符合条件的Entity
  1353. for (var i = 0; i < delEntitys.length; i++) {
  1354. entities.remove(delEntitys[i]);
  1355. }
  1356. }
  1357. /* 如果该图层是Entity 则根据名称判断是否需要删除 */
  1358. if (window[layerId] instanceof Cesium.Entity) {
  1359. var entities = this.viewer.entities;
  1360. var delEntitys = [];
  1361. //循环查找符合条件的Entity
  1362. for (var i = 0; i < entities.values.length; i++) {
  1363. if (entities.values[i].name == layerId) {
  1364. delEntitys.push(entities.values[i]);
  1365. }
  1366. }
  1367. //删除符合条件的Entity
  1368. for (var i = 0; i < delEntitys.length; i++) {
  1369. entities.remove(delEntitys[i]);
  1370. }
  1371. }
  1372. /* 如果图层可查询 则移除 */
  1373. for (var i = 0; i < this.queryLayers.length; i++) {
  1374. var qConfig = this.queryLayers[i];
  1375. if (qConfig.id == layerId) {
  1376. this.queryLayers.splice(i, 1);
  1377. }
  1378. }
  1379. },
  1380. })
  1381. /**
  1382. * 图斑标注相关
  1383. */
  1384. CrMap.prototype.extend({
  1385. /**
  1386. * @param {JSON} options 配置项
  1387. */
  1388. addCaseLabel: function(options) {
  1389. var self = this;
  1390. var longitude = parseFloat(options.lng);
  1391. var latitude = parseFloat(options.lat);
  1392. var altitude = parseFloat(options.alt);
  1393. this.caseLabels.add({
  1394. position: new Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude),
  1395. text: options.text,
  1396. font: '22px SansCN-Normal',
  1397. fillColor: Cesium.Color.WHITE,
  1398. outlineColor: self._toColor(11, 48, 115, 1.0),
  1399. outlineWidth: 2,
  1400. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  1401. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  1402. verticalOrigin: Cesium.VerticalOrigin.CENTER,
  1403. distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
  1404. heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
  1405. eyeOffset: new Cesium.Cartesian3(0, 0, -10),
  1406. pixelOffset: new Cesium.Cartesian2(10, -50),
  1407. scale: 0.45
  1408. });
  1409. this.caseLabelBillboards.add({
  1410. position: new Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude),
  1411. image: self.serverUrl + options.image,
  1412. distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
  1413. heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
  1414. scale: 0.5,
  1415. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  1416. verticalOrigin: Cesium.VerticalOrigin.BASELINE,
  1417. });
  1418. /* 刷祯 */
  1419. this.updateSence();
  1420. },
  1421. /**
  1422. * 删除全部图斑标注
  1423. */
  1424. removeAllCaseLabel: function() {
  1425. var self = this;
  1426. return new Promise((resolve, reject) => {
  1427. self.caseLabels.removeAll();
  1428. self.caseLabelBillboards.removeAll();
  1429. resolve(true);
  1430. });
  1431. },
  1432. /**
  1433. * 添加当前可视区域
  1434. * @param {JSON} options 配置项
  1435. * strLng{double}:矩形起始点经度
  1436. * strLat{double}:矩形起始点纬度
  1437. * endLng{double}:矩形终止点经度
  1438. * endLat{double}:矩形终止点纬度
  1439. */
  1440. addAreaRectangle: function(options) {
  1441. var self = this;
  1442. this.entities.removeById('areaRectangle');
  1443. var extent = Cesium.Rectangle.fromDegrees(options.strLng, options.strLat, options.endLng,
  1444. options
  1445. .endLat);
  1446. var flyRectangle = this.entities.add({
  1447. id: 'areaRectangle',
  1448. name: 'areaRectangle',
  1449. rectangle: {
  1450. coordinates: extent,
  1451. material: Cesium.Color.GREEN.withAlpha(0.6),
  1452. height: 10.0,
  1453. outline: false
  1454. }
  1455. });
  1456. },
  1457. /**
  1458. * 计算高程
  1459. * @param {JSON} options 配置项
  1460. * points{Array[JSON(lng,lat),...]}:点数组JSON
  1461. * success{function}:成功回调函数
  1462. */
  1463. calculateAltitude: function(options) {
  1464. var positions = [];
  1465. var points = options.points;
  1466. /* 构建点位置集合 */
  1467. for (var i = 0; i < points.length; i++) {
  1468. var point = points[i];
  1469. positions.push(Cesium.Cartographic.fromDegrees(parseFloat(point.lng), parseFloat(point
  1470. .lat)));
  1471. }
  1472. /* 构建查询 */
  1473. var promise = Cesium.sampleTerrain(window['dem'], 14, positions);
  1474. /* 监听查询完成 */
  1475. Cesium.when(promise, function(resData) {
  1476. var outHeights = [];
  1477. for (var i = 0; i < resData.length; i++) {
  1478. outHeights.push(resData[i].height);
  1479. }
  1480. if (options.success != undefined) options.success(outHeights);
  1481. });
  1482. }
  1483. });
  1484. /**
  1485. * 切割相关
  1486. */
  1487. CrMap.prototype.extend({
  1488. /**
  1489. * 动态改变ClippingPlane距离原点的距离
  1490. * @param {Object} plane ClippingPlane实例
  1491. */
  1492. _createPlaneUpdateFunction: function(plane) {
  1493. var self = this;
  1494. return function() {
  1495. plane.distance = self.planeTargetY + 10;
  1496. return plane;
  1497. };
  1498. },
  1499. /**
  1500. * 开始切割BIM
  1501. * @param {Object} tilesetId BIM模型图层Id
  1502. * @param {String} callback 消息回调
  1503. */
  1504. openClipBIM: function(tilesetId, callback) {
  1505. var self = this;
  1506. //self.planeTargetY = 30;
  1507. var tileset = window[tilesetId];
  1508. if (tileset == undefined) {
  1509. if (callback != undefined) {
  1510. callback("先开启BIM图层!");
  1511. }
  1512. } else {
  1513. var boundingSphere = tileset.get(0).boundingSphere;
  1514. var clippingPlanes = new Cesium.ClippingPlaneCollection({
  1515. planes: [
  1516. new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0, -1),
  1517. 30) // 平面的方向 以及 平面到原点的距离
  1518. ],
  1519. edgeColor: Cesium.Color.WHITE, // 平面切割时模型的边缘颜色
  1520. edgeWidth: 3.0 // 平面切割时模型的边缘宽度
  1521. });
  1522. tileset.get(0).clippingPlanes = clippingPlanes; //设置可以切割
  1523. var radius = boundingSphere.radius; // 长度
  1524. for (var i = 0; i < clippingPlanes.length; ++i) {
  1525. var plane = clippingPlanes.get(i);
  1526. self.viewer.entities.add({
  1527. name: 'entity_clip_bim',
  1528. position: boundingSphere.center,
  1529. plane: {
  1530. dimensions: new Cesium.Cartesian2(radius, radius),
  1531. material: Cesium.Color.RED.withAlpha(0.1),
  1532. plane: new Cesium.CallbackProperty(self._createPlaneUpdateFunction(
  1533. plane),
  1534. false),
  1535. outline: true,
  1536. outlineColor: Cesium.Color.WHITE
  1537. }
  1538. });
  1539. }
  1540. /* 缩放到位置 */
  1541. self.flyTo(tileset);
  1542. }
  1543. },
  1544. /**
  1545. * 关闭BIM切割
  1546. */
  1547. closeClipBIM: function() {
  1548. var name = 'entity_clip_bim';
  1549. var entities = this.viewer.entities;
  1550. var delEntitys = [];
  1551. //循环查找符合条件的Entity
  1552. for (var i = 0; i < entities.values.length; i++) {
  1553. if (entities.values[i].name == name) {
  1554. delEntitys.push(entities.values[i]);
  1555. }
  1556. }
  1557. //删除符合条件的Entity
  1558. for (var i = 0; i < delEntitys.length; i++) {
  1559. entities.remove(delEntitys[i]);
  1560. }
  1561. }
  1562. });
  1563. /**
  1564. * 工具相关
  1565. */
  1566. CrMap.prototype.extend({
  1567. /**
  1568. * 刷新场景 刷新一帧
  1569. */
  1570. updateSence: function() {
  1571. this.viewer.scene.requestRender();
  1572. },
  1573. /**
  1574. * 飞行至指定位置
  1575. * @param {double} longitude 经度
  1576. * @param {double} latitude 纬度
  1577. * @param {double} altitude 高度
  1578. */
  1579. zoomTo: function(longitude, latitude, altitude) {
  1580. var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(longitude,
  1581. latitude,
  1582. 0), altitude /
  1583. 3);
  1584. this.viewer.camera.flyToBoundingSphere(boundingSphere);
  1585. },
  1586. /**
  1587. * 飞行至指定对象
  1588. * @param {Object} obj 对象
  1589. */
  1590. flyTo: function(obj) {
  1591. if (obj instanceof Cesium.PrimitiveCollection) {
  1592. obj = obj.get(0);
  1593. }
  1594. this.viewer.flyTo(obj, {
  1595. offset: new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-45.0)),
  1596. });
  1597. },
  1598. /**
  1599. * 相机视角飞行到指定位置
  1600. * @param {JSON} options 位置信息
  1601. * {lng: lat: alt: heading: pitch:}
  1602. */
  1603. flyToo: function(options) {
  1604. this.viewer.camera.flyTo({
  1605. destination: Cesium.Cartesian3.fromDegrees(options.lng, options.lat, options.alt),
  1606. orientation: {
  1607. heading: Cesium.Math.toRadians(options.heading, 0),
  1608. pitch: Cesium.Math.toRadians(options.pitch),
  1609. roll: 0.0
  1610. },
  1611. duration: options.duration == undefined ? 10 : options.duration,
  1612. complete: function() {
  1613. if (options.success != undefined) options.success();
  1614. },
  1615. })
  1616. },
  1617. /**
  1618. * 添加图层Id到初始化集合中
  1619. * @param {Object} layerId 图层Id
  1620. */
  1621. addBeforeLayerId: function(layerId) {
  1622. this.beforeLayerIds.push(layerId);
  1623. },
  1624. /**
  1625. * 设置地图在当前窗口中心点和高度下指北
  1626. */
  1627. setMapNorth: function() {
  1628. var height = Math.ceil(this.viewer.camera.positionCartographic.height);
  1629. var result = this.viewer.camera.pickEllipsoid(new Cesium.Cartesian2(this.viewer.canvas
  1630. .clientWidth /
  1631. 2, this.viewer
  1632. .canvas.clientHeight / 2));
  1633. var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
  1634. var lon = curPosition.longitude * 180 / Math.PI;
  1635. var lat = curPosition.latitude * 180 / Math.PI;
  1636. var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(lon, lat, 0),
  1637. height /
  1638. 3);
  1639. this.viewer.camera.flyToBoundingSphere(boundingSphere);
  1640. },
  1641. /**
  1642. * 经纬度转换为屏幕坐标
  1643. * @param {JSON} point 坐标点
  1644. * point格式{lng: lat: alt:}
  1645. */
  1646. wgs84ToScreen: function(point) {
  1647. var position = Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.alt);
  1648. var res = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, position);
  1649. if (res == undefined) {
  1650. return {
  1651. x: -500,
  1652. y: -500,
  1653. }
  1654. } else {
  1655. return {
  1656. x: res.x - 0,
  1657. y: res.y - 0,
  1658. };
  1659. }
  1660. },
  1661. /**
  1662. * 输出当前相机视角参数
  1663. */
  1664. exportCameraViewParams: function() {
  1665. var self = this;
  1666. var g84Position = self._wordToWGS84(self.viewer.camera.position)
  1667. var result = {
  1668. lng: g84Position.lng,
  1669. lat: g84Position.lat,
  1670. alt: g84Position.alt,
  1671. pitch: self._arcToDegree(self.viewer.camera.pitch),
  1672. heading: self._arcToDegree(self.viewer.camera.heading),
  1673. }
  1674. return result;
  1675. },
  1676. /**
  1677. * 计算当前位置距离相机的空间距离
  1678. * @param {Object} options 位置
  1679. * {lng: lat: alt:}
  1680. */
  1681. calculationToCameraDistance: function(options) {
  1682. var self = this;
  1683. var cameraPosition = self.viewer.camera.position;
  1684. var wgs84Position = Cesium.Cartographic.fromDegrees(options.lng, options.lat, options.alt);
  1685. var pointPosition = self.viewer.scene.globe.ellipsoid.cartographicToCartesian(wgs84Position);
  1686. /* 开始计算距离 */
  1687. var dx = cameraPosition.x - pointPosition.x;
  1688. var dy = cameraPosition.y - pointPosition.y;
  1689. var dz = cameraPosition.z - pointPosition.z;
  1690. return Math.sqrt(dx * dx + dy * dy + dz * dz);
  1691. },
  1692. /**
  1693. * 相机飞行位置
  1694. * @param {Object} options 设置项
  1695. * {lng:经度 lat:纬度 alt:高度}
  1696. */
  1697. flyCameraTo: function(options) {
  1698. alert(options.lng + "," + options.lat + "," + options.alt)
  1699. var self = this;
  1700. var newPosition = self._calculateCameraPosition({
  1701. lng: options.lng,
  1702. lat: options.lat,
  1703. alt: options.alt,
  1704. angle: self.angle,
  1705. });
  1706. alert(JSON.stringify(newPosition));
  1707. self.viewer.camera.setView({
  1708. destination: newPosition,
  1709. orientation: {
  1710. heading: Cesium.Math.toRadians(Cesium.Math.toDegrees(self.viewer.camera
  1711. .heading) + self.angle),
  1712. pitch: self.viewer.camera.pitch,
  1713. }
  1714. });
  1715. },
  1716. /**
  1717. * 设置显示范围
  1718. * @param {JSON} options 配置项
  1719. * lng{double}:经度
  1720. * lat{double}:纬度
  1721. * alt{double}:高度
  1722. * heading{double}:指北角度 度
  1723. * pitch{double}:垂直视角 度
  1724. * roll{double}:翻滚视角 度
  1725. */
  1726. setMapRange: function(options) {
  1727. this.viewer.camera.setView({
  1728. destination: Cesium.Cartesian3.fromDegrees(options.lng, options.lat, options.alt),
  1729. orientation: {
  1730. //此视角为观察者/相机
  1731. heading: options.heading,
  1732. pitch: Cesium.Math.toRadians(options.pitch),
  1733. roll: options.roll
  1734. }
  1735. });
  1736. },
  1737. /**
  1738. * 异步飞行
  1739. * @param {JSON} options 配置项
  1740. * target{Object}:飞行目的地目标
  1741. * duration{int}:飞行持续时间 秒
  1742. * radians{double}:旋转角度 度
  1743. * isRemove{boolean}:执行完成后是否删除目标 true/false
  1744. */
  1745. asyncFlyTo: function(options) {
  1746. var self = this;
  1747. return new Promise((resolve, reject) => {
  1748. /* 飞行 */
  1749. var flyPromise = self.viewer.flyTo(options.target, {
  1750. duration: options.duration, //飞行持续时间
  1751. offset: new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(options
  1752. .radians)),
  1753. });
  1754. /* 飞行完成 */
  1755. flyPromise.then(function(isFly) {
  1756. if (isFly && options.isRemove && options.target != undefined) {
  1757. self.viewer.entities.remove(options.target);
  1758. }
  1759. resolve(true);
  1760. })
  1761. });
  1762. },
  1763. /**
  1764. * 飞向矩形区域
  1765. * @param {JSON} options 配置项
  1766. * strLng{double}:矩形起始点经度
  1767. * strLat{double}:矩形起始点纬度
  1768. * endLng{double}:矩形终止点经度
  1769. * endLat{double}:矩形终止点纬度
  1770. */
  1771. flyToRectangle: function(options) {
  1772. var self = this;
  1773. this.entities.removeById('flyRectangle');
  1774. var extent = Cesium.Rectangle.fromDegrees(options.strLng, options.strLat, options.endLng,
  1775. options
  1776. .endLat);
  1777. /* 创建飞行矩形 */
  1778. var flyRectangle = this.entities.add({
  1779. id: 'flyRectangle',
  1780. name: 'flyRectangle',
  1781. rectangle: {
  1782. coordinates: extent,
  1783. material: Cesium.Color.GREEN.withAlpha(0),
  1784. height: 10.0,
  1785. outline: false
  1786. }
  1787. });
  1788. this.asyncFlyTo({
  1789. target: flyRectangle, //定位对象
  1790. isRemove: false, //定位完成后是否删除
  1791. duration: 3,
  1792. radians: -90,
  1793. }).then(function(isFly) {
  1794. if (isFly) {
  1795. self.asyncFlyTo({
  1796. target: flyRectangle, //定位对象
  1797. isRemove: true, //定位完成后是否删除
  1798. duration: 1,
  1799. radians: -40,
  1800. }).then(function(isFly) {
  1801. if (isFly && options.success != undefined) {
  1802. options.success();
  1803. }
  1804. })
  1805. }
  1806. }).catch(function(err) {
  1807. alert(err);
  1808. })
  1809. }
  1810. });
  1811. /**
  1812. * 特效相关 雨雪雾
  1813. */
  1814. CrMap.prototype.extend({
  1815. /**
  1816. * 开启下雪
  1817. */
  1818. _openSnow: function() {
  1819. return "uniform sampler2D colorTexture;\n\
  1820. varying vec2 v_textureCoordinates;\n\
  1821. \n\
  1822. float snow(vec2 uv,float scale)\n\
  1823. {\n\
  1824. float time = czm_frameNumber / 60.0;\n\
  1825. float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
  1826. uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
  1827. uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
  1828. p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
  1829. k=smoothstep(0.,k,sin(f.x+f.y)*0.01);\n\
  1830. return k*w;\n\
  1831. }\n\
  1832. \n\
  1833. void main(void){\n\
  1834. vec2 resolution = czm_viewport.zw;\n\
  1835. vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
  1836. vec3 finalColor=vec3(0);\n\
  1837. float c = 0.0;\n\
  1838. c+=snow(uv,30.)*.0;\n\
  1839. c+=snow(uv,20.)*.0;\n\
  1840. c+=snow(uv,15.)*.0;\n\
  1841. c+=snow(uv,10.);\n\
  1842. c+=snow(uv,8.);\n\
  1843. c+=snow(uv,6.);\n\
  1844. c+=snow(uv,5.);\n\
  1845. finalColor=(vec3(c)); \n\
  1846. gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.5); \n\
  1847. \n\
  1848. }\n\
  1849. ";
  1850. },
  1851. /**
  1852. * 开启下雨
  1853. */
  1854. _openRain: function() {
  1855. return "uniform sampler2D colorTexture;\n\
  1856. varying vec2 v_textureCoordinates;\n\
  1857. \n\
  1858. float hash(float x){\n\
  1859. return fract(sin(x*133.3)*13.13);\n\
  1860. }\n\
  1861. \n\
  1862. void main(void){\n\
  1863. \n\
  1864. float time = czm_frameNumber / 60.0;\n\
  1865. vec2 resolution = czm_viewport.zw;\n\
  1866. \n\
  1867. vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
  1868. vec3 c=vec3(.6,.7,.8);\n\
  1869. \n\
  1870. float a=-.4;\n\
  1871. float si=sin(a),co=cos(a);\n\
  1872. uv*=mat2(co,-si,si,co);\n\
  1873. uv*=length(uv+vec2(0,4.9))*.3+1.;\n\
  1874. \n\
  1875. float v=1.-sin(hash(floor(uv.x*100.))*2.);\n\
  1876. float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;\n\
  1877. c*=v*b; \n\
  1878. \n\
  1879. gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5); \n\
  1880. }\n\
  1881. ";
  1882. },
  1883. /**
  1884. * 打开雾
  1885. */
  1886. _openFog: function() {
  1887. return 'uniform sampler2D colorTexture;\n' +
  1888. ' uniform sampler2D depthTexture;\n' +
  1889. ' varying vec2 v_textureCoordinates;\n' +
  1890. ' void main(void)\n' +
  1891. ' {\n' +
  1892. ' vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);\n' +
  1893. ' vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);\n' +
  1894. ' float depth = czm_readDepth(depthTexture, v_textureCoordinates);\n' +
  1895. ' vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);\n' +
  1896. ' float f=(depthcolor.r-0.55)/0.5;\n' +
  1897. ' if(f<0.0) f=0.0;\n' +
  1898. ' else if(f>1.0) f=1.0;\n' +
  1899. ' gl_FragColor = mix(origcolor,fogcolor,f);\n' +
  1900. ' }';
  1901. },
  1902. /**
  1903. * 开启雪模式
  1904. */
  1905. openSnow: function() {
  1906. var self = this;
  1907. var collection = self.viewer.scene.postProcessStages;
  1908. var fs_snow = self._openSnow();
  1909. self.snowStage = new Cesium.PostProcessStage({
  1910. name: 'czm_snow',
  1911. fragmentShader: fs_snow
  1912. });
  1913. collection.add(self.snowStage);
  1914. self.viewer.scene.requestRenderMode = false; //关闭主动渲染 否则无法下雪持续
  1915. self.viewer.scene.skyAtmosphere.hueShift = -0.8;
  1916. self.viewer.scene.skyAtmosphere.saturationShift = -0.7;
  1917. self.viewer.scene.skyAtmosphere.brightnessShift = -0.33;
  1918. self.viewer.scene.fog.density = 0.001;
  1919. self.viewer.scene.fog.minimumBrightness = 0.8;
  1920. },
  1921. /**
  1922. * 开启雨的模式
  1923. */
  1924. openRain: function() {
  1925. var self = this;
  1926. var collection = self.viewer.scene.postProcessStages;
  1927. var fs_snow = self._openRain();
  1928. self.rainStage = new Cesium.PostProcessStage({
  1929. name: 'czm_rain',
  1930. fragmentShader: fs_snow
  1931. });
  1932. collection.add(self.rainStage);
  1933. self.viewer.scene.requestRenderMode = false; //关闭主动渲染 否则无法下雪持续
  1934. self.viewer.scene.skyAtmosphere.hueShift = -0.8;
  1935. self.viewer.scene.skyAtmosphere.saturationShift = -0.7;
  1936. self.viewer.scene.skyAtmosphere.brightnessShift = -0.33;
  1937. self.viewer.scene.fog.density = 0.001;
  1938. self.viewer.scene.fog.minimumBrightness = 0.8;
  1939. },
  1940. /**
  1941. * 开启雾模式
  1942. */
  1943. openFog: function() {
  1944. var self = this;
  1945. var collection = self.viewer.scene.postProcessStages;
  1946. var fs_snow = self._openFog();
  1947. self.fogStage = new Cesium.PostProcessStage({
  1948. name: 'czm_fog',
  1949. fragmentShader: fs_snow
  1950. });
  1951. collection.add(self.fogStage);
  1952. self.viewer.scene.requestRenderMode = false; //关闭主动渲染 否则无法下雪持续
  1953. self.viewer.scene.skyAtmosphere.hueShift = -0.8;
  1954. self.viewer.scene.skyAtmosphere.saturationShift = -0.7;
  1955. self.viewer.scene.skyAtmosphere.brightnessShift = -0.33;
  1956. self.viewer.scene.fog.density = 0.001;
  1957. self.viewer.scene.fog.minimumBrightness = 0.8;
  1958. },
  1959. /**
  1960. * 关闭雨
  1961. */
  1962. closeRain: function() {
  1963. var self = this;
  1964. if (this.rainStage) {
  1965. this.viewer.scene.postProcessStages.remove(this.rainStage);
  1966. this.rainStage = undefined;
  1967. // setTimeout(function(){
  1968. // self.viewer.scene.requestRenderMode = true; //启动主动渲染 否则无法下雪持续
  1969. // },1000);
  1970. }
  1971. },
  1972. /**
  1973. * 关闭雪
  1974. */
  1975. closeSnow: function() {
  1976. var self = this;
  1977. if (this.snowStage) {
  1978. this.viewer.scene.postProcessStages.remove(this.snowStage);
  1979. this.snowStage = undefined;
  1980. // setTimeout(function(){
  1981. // self.viewer.scene.requestRenderMode = true; //启动主动渲染 否则无法下雪持续
  1982. // },1000);
  1983. }
  1984. },
  1985. /**
  1986. * 关闭雾
  1987. */
  1988. closeFog: function() {
  1989. var self = this;
  1990. if (this.fogStage) {
  1991. this.viewer.scene.postProcessStages.remove(this.fogStage);
  1992. this.fogStage = undefined;
  1993. // setTimeout(function(){
  1994. // self.viewer.scene.requestRenderMode = true; //启动主动渲染 否则无法下雪持续
  1995. // },1000);
  1996. }
  1997. },
  1998. });
  1999. /**
  2000. * 调起查询工具
  2001. */
  2002. CrMap.prototype.extend({
  2003. /**
  2004. * 点查询
  2005. */
  2006. queryPoint: function() {
  2007. this.actionType = ActionType.queryAttribute;
  2008. },
  2009. });
  2010. /**
  2011. * 矢量服务查询
  2012. */
  2013. CrMap.prototype.extend({
  2014. /**
  2015. * 获取tile分级
  2016. * @param {Object} height 高度
  2017. */
  2018. _getLevel: function(height) {
  2019. if (height > 48000000) {
  2020. return 0;
  2021. } else if (height > 24000000) {
  2022. return 1;
  2023. } else if (height > 12000000) {
  2024. return 2;
  2025. } else if (height > 6000000) {
  2026. return 3;
  2027. } else if (height > 3000000) {
  2028. return 4;
  2029. } else if (height > 1500000) {
  2030. return 5;
  2031. } else if (height > 750000) {
  2032. return 6;
  2033. } else if (height > 375000) {
  2034. return 7;
  2035. } else if (height > 187500) {
  2036. return 8;
  2037. } else if (height > 93750) {
  2038. return 9;
  2039. } else if (height > 46875) {
  2040. return 10;
  2041. } else if (height > 23437.5) {
  2042. return 11;
  2043. } else if (height > 11718.75) {
  2044. return 12;
  2045. } else if (height > 5859.38) {
  2046. return 13;
  2047. } else if (height > 2929.69) {
  2048. return 14;
  2049. } else if (height > 1464.84) {
  2050. return 15;
  2051. } else if (height > 732.42) {
  2052. return 16;
  2053. } else if (height > 366.21) {
  2054. return 17;
  2055. } else {
  2056. return 18;
  2057. }
  2058. },
  2059. /**
  2060. * 点击查询矢量数据
  2061. * @param {Object} position 鼠标点击位置
  2062. */
  2063. _queryVectorLayer(position) {
  2064. var self = this;
  2065. //测试 打印查询的图层看看
  2066. // for(var i=0;i<self.queryLayers.length;i++){
  2067. // var queryLayer = self.queryLayers[i];
  2068. // console.log("i = " + i + " LayerId = " + queryLayer.id);
  2069. // }
  2070. //查询射线
  2071. var ray = self.viewer.camera.getPickRay(position);
  2072. //查询射线坐标位置
  2073. var cartesian = self.viewer.scene.globe.pick(ray, self.viewer.scene);
  2074. if (cartesian) {
  2075. var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  2076. if (cartographic) {
  2077. var alti = self.viewer.camera.positionCartographic.height;
  2078. var level = self._getLevel(alti);
  2079. //通过callback方式进行 否则无法一次性返回
  2080. self.attributesQueryIndex = 0; //初始化查询索引
  2081. self.attributesData = []; //重置数组
  2082. self._queryAttribuesCallback(cartographic, level); //执行回调查询
  2083. }
  2084. }
  2085. },
  2086. /**
  2087. * 属性查询循环回调
  2088. * @param {Object} cartographic 图形点
  2089. * @param {Object} level 等级
  2090. */
  2091. _queryAttribuesCallback: function(cartographic, level) {
  2092. var self = this;
  2093. if (self.attributesQueryIndex > self.queryLayers.length - 1) {
  2094. //如果事件存在 则回调
  2095. if (self.onQueryVectorResult != undefined) {
  2096. //在挂接以下Entity的查询信息
  2097. for (var i = 0; i < self.attributesEntity.length; i++) {
  2098. self.attributesData.push(self.attributesEntity[i]);
  2099. }
  2100. self.onQueryVectorResult(self.attributesData);
  2101. }
  2102. } else {
  2103. var queryConfig = self.queryLayers[self.attributesQueryIndex];
  2104. var imageryProvider = queryConfig.provider;
  2105. if (imageryProvider.ready) {
  2106. var xy = new Cesium.Cartesian2();
  2107. xy = imageryProvider.tilingScheme.positionToTileXY(cartographic, level, xy);
  2108. var promise = imageryProvider.pickFeatures(xy.x, xy.y, level, cartographic.longitude,
  2109. cartographic.latitude);
  2110. Cesium.when(promise, function(resData) {
  2111. if (window[queryConfig.id] != undefined && window[queryConfig.id].show) {
  2112. for (var i = 0; i < resData.length; i++) {
  2113. /* 此处需要判断一下 点击的是点、线、面 */
  2114. var geoType = resData[i].data.geometryType;
  2115. console.log(geoType);
  2116. var geometry = {
  2117. type: 'non',
  2118. pts: [],
  2119. }
  2120. if (geoType === "esriGeometryPoint") {
  2121. geometry.type = 'point';
  2122. geometry.pts.push({
  2123. lng: resData[i].data.geometry.x,
  2124. lat: resData[i].data.geometry.y,
  2125. })
  2126. } else if (geoType === "esriGeometryPolygon") {
  2127. geometry.type = 'polygon';
  2128. var rings = resData[i].data.geometry.rings;
  2129. for (var rIdx = 0; rIdx < rings.length; rIdx++) {
  2130. var subRing = resData[i].data.geometry.rings[rIdx];
  2131. var pts = [];
  2132. for (var ptIdx = 0; ptIdx < subRing.length; ptIdx++) {
  2133. pts.push({
  2134. lng: subRing[ptIdx][0],
  2135. lat: subRing[ptIdx][1],
  2136. })
  2137. };
  2138. geometry.pts.push(pts);
  2139. }
  2140. }
  2141. self.attributesData.push({
  2142. layerName: resData[i].data.layerName,
  2143. attributes: resData[i].data.attributes,
  2144. geometry: geometry,
  2145. });
  2146. }
  2147. }
  2148. self.attributesQueryIndex++;
  2149. self._queryAttribuesCallback(cartographic, level);
  2150. });
  2151. }
  2152. }
  2153. },
  2154. });
  2155. /**
  2156. * 绘制相关
  2157. */
  2158. CrMap.prototype.extend({
  2159. /**
  2160. * 根据名称删除绘制的实体
  2161. * @param {Object} name 实体名称
  2162. */
  2163. _removeEntities: function(name) {
  2164. var entities = this.viewer.entities;
  2165. var delEntitys = [];
  2166. //循环查找符合条件的Entity
  2167. for (var i = 0; i < entities.values.length; i++) {
  2168. if (entities.values[i].name == name) {
  2169. delEntitys.push(entities.values[i]);
  2170. }
  2171. }
  2172. //删除符合条件的Entity
  2173. for (var i = 0; i < delEntitys.length; i++) {
  2174. entities.remove(delEntitys[i]);
  2175. }
  2176. this.viewer.scene.requestRenderMode = true; //停止主动刷新
  2177. this.updateSence(); //主动刷新以下
  2178. },
  2179. /**
  2180. * @param {JSON} option
  2181. * {name: points:[{lng,lat},...] color:{r: g: b: a:}}
  2182. */
  2183. addSelectPolylineEntity: function(options) {
  2184. var self = this;
  2185. //解析线坐标
  2186. var linepts = [];
  2187. for (var i = 0; i < options.points.length; i++) {
  2188. linepts.push(Cesium.Cartesian3.fromDegrees(options.points[i].lng, options.points[i].lat));
  2189. }
  2190. var x = 1.0;
  2191. var flog = true;
  2192. var plineEntity = new Cesium.Entity({
  2193. name: options.name,
  2194. polyline: {
  2195. show: true,
  2196. positions: linepts,
  2197. width: 6,
  2198. clampToGround: true,
  2199. material: new Cesium.PolylineGlowMaterialProperty({
  2200. glowPower: 0.2, //一个数字属性,指定发光强度,占总线宽的百分���。
  2201. color: Cesium.Color.BLUE,
  2202. }),
  2203. //distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000)
  2204. }
  2205. });
  2206. //加入图层
  2207. self.viewer.entities.add(plineEntity);
  2208. //更新场景
  2209. self.updateSence();
  2210. plineEntity.polyline.material = new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(
  2211. function() {
  2212. if (flog) {
  2213. x = x - 0.01;
  2214. if (x <= 0) {
  2215. flog = false;
  2216. }
  2217. } else {
  2218. x = x + 0.01;
  2219. if (x >= 1) {
  2220. flog = true;
  2221. }
  2222. }
  2223. self.updateSence();
  2224. // return {
  2225. // glowPower: 0.25,
  2226. // color: Cesium.Color.RED.withAlpha(0.3),
  2227. // };
  2228. return Cesium.Color.RED.withAlpha(x);
  2229. }, false));
  2230. },
  2231. /**
  2232. * @param {JSON} options
  2233. * {name: point:{lng,lat}}
  2234. */
  2235. addSelectPointEntity: function(options) {
  2236. var self = this;
  2237. var a = true;
  2238. var n = true;
  2239. var o = true;
  2240. var markerOpacity = 1;
  2241. var pixelSize = 3;
  2242. var outLineOpacity = 0.7;
  2243. var ptColor = Cesium.Color.RED;
  2244. var pixelMax = 50;
  2245. var pointEntity = {
  2246. name: options.name,
  2247. position: Cesium.Cartesian3.fromDegrees(options.point.lng, options.point.lat),
  2248. point: {
  2249. heightReference: 50,
  2250. color: new Cesium.CallbackProperty(() => {
  2251. self.updateSence();
  2252. return a ? (markerOpacity -= .03,
  2253. markerOpacity <= 0 && (a = false)) : (markerOpacity = 1,
  2254. a = true),
  2255. ptColor.withAlpha(markerOpacity)
  2256. }, false),
  2257. pixelSize: new Cesium.CallbackProperty((time, result) => {
  2258. self.updateSence();
  2259. return n ? (pixelSize += 1,
  2260. pixelSize >= pixelMax && (n = false)) : (pixelSize = 3,
  2261. n = true),
  2262. pixelSize
  2263. }, false),
  2264. // outlineColor: new Cesium.CallbackProperty(() => {
  2265. // self.updateSence();
  2266. // return o ? (outLineOpacity -= .035,
  2267. // outLineOpacity <= 0 && (o = false)) : (outLineOpacity = .7,
  2268. // o = true),
  2269. // ptColor.withAlpha(outLineOpacity)
  2270. // }, false),
  2271. // outlineWidth: 2,
  2272. scaleByDistance: new Cesium.NearFarScalar(1200, 1, 5200, 0.4),
  2273. }
  2274. };
  2275. //加入图层
  2276. self.entities.add(pointEntity);
  2277. //更新场景
  2278. self.updateSence();
  2279. },
  2280. /**
  2281. * 添加面对像
  2282. * @param {JSON} options
  2283. * id:添加的面对象Id
  2284. * config:(JSON){name:图层名称 geo:矢量数据}
  2285. * points:[{lng,lat},...]
  2286. * color:{r: g: b: a:}}
  2287. * description:(JSON)
  2288. */
  2289. addPolygonEntity: function(options) {
  2290. var self = this;
  2291. //解析线坐标
  2292. var points = [];
  2293. var pts = [];
  2294. for (var i = 0; i < options.points.length; i++) {
  2295. points.push(Cesium.Cartesian3.fromDegrees(options.points[i].lng, options.points[i].lat));
  2296. pts.push({
  2297. lng: options.points[i].lng,
  2298. lat: options.points[i].lat,
  2299. });
  2300. }
  2301. var polygonEntity = new Cesium.Entity({
  2302. name: JSON.stringify({
  2303. name: options.config.name,
  2304. geometry: {
  2305. type: 'polygon',
  2306. pts: [pts],
  2307. },
  2308. }),
  2309. id: options.id,
  2310. description: JSON.stringify(options.description),
  2311. polygon: {
  2312. hierarchy: {
  2313. positions: points,
  2314. },
  2315. material: self._toColor(options.color.r, options.color.g, options.color.b,
  2316. options
  2317. .color.a),
  2318. classificationType: Cesium.ClassificationType.BOTH,
  2319. }
  2320. });
  2321. //加入图层
  2322. self.viewer.entities.add(polygonEntity);
  2323. },
  2324. /**
  2325. * 添加点实体
  2326. * @param {JSON} options 数据项
  2327. * {name:实体名称 lng:经度 lat:纬度}
  2328. * point:{color:'0,0,0,1' outlineColor:'0,0,0,1' size: outlineWidth:}
  2329. * label:{text: size: family: color: offset:[,]}
  2330. * billboard:{img: scale:}
  2331. */
  2332. addPoint: function(options) {
  2333. var self = this;
  2334. var point = Cesium.Cartesian3.fromDegrees(options.lng, options.lat, 200);
  2335. var pointEntity = new Cesium.Entity({
  2336. name: options.name,
  2337. position: point,
  2338. });
  2339. var configPoint = options.point;
  2340. var configLabel = options.label;
  2341. var configBillboard = options.billboard;
  2342. /* 配置点信息 */
  2343. if (configPoint != undefined) {
  2344. pointEntity.point = {
  2345. color: Cesium.Color.fromCssColorString('rgba(' + configPoint.color + ')'),
  2346. pixelSize: configPoint.size,
  2347. outlineColor: Cesium.Color.fromCssColorString('rgba(' + configPoint.outlineColor +
  2348. ')'),
  2349. outlineWidth: configPoint.outlineWidth,
  2350. heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  2351. }
  2352. }
  2353. /* 配置广告牌信息 */
  2354. if (configBillboard != undefined) {
  2355. pointEntity.billboard = {
  2356. image: configBillboard.img,
  2357. scale: configBillboard.scale,
  2358. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  2359. verticalOrigin: Cesium.VerticalOrigin.BASELINE,
  2360. heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  2361. };
  2362. }
  2363. /* 配置标签 */
  2364. if (configLabel != undefined) {
  2365. pointEntity.label = {
  2366. text: configLabel.text,
  2367. font: configLabel.size + 'px ' + configLabel.family,
  2368. scale: 0.5,
  2369. heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  2370. fillColor: Cesium.Color.WHITE,
  2371. outlineColor: Cesium.Color.fromCssColorString('rgba(' + configLabel.color + ')'),
  2372. outlineWidth: 4,
  2373. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  2374. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  2375. verticalOrigin: Cesium.VerticalOrigin.center,
  2376. pixelOffset: new Cesium.Cartesian2(configLabel.offset[0], configLabel.offset[1]),
  2377. showBackground: false,
  2378. }
  2379. }
  2380. /* 添加实体 */
  2381. self.entities.add(pointEntity);
  2382. /* 更新场景 */
  2383. self.updateSence();
  2384. },
  2385. /**
  2386. * 获取旋转值
  2387. */
  2388. _getRotationValue: function() {
  2389. var self = this;
  2390. return function() {
  2391. self.areaRotation += 0.005;
  2392. return self.areaRotation;
  2393. }
  2394. },
  2395. /**
  2396. * 添加旋转区域
  2397. * @param {JSON} options 配置项
  2398. * strLng{double}:矩形起始点经度
  2399. * strLat{double}:矩形起始点纬度
  2400. * endLng{double}:矩形终止点经度
  2401. * endLag{double}:矩形终止点纬度
  2402. * northImage{String}:指北照片Url
  2403. * scaleImage{String}:旋转照片Url
  2404. */
  2405. addRotateArea: function(options) {
  2406. var self = this;
  2407. // alert(self.serverUrl + options.northImage);
  2408. self.entities.add({
  2409. name: "rotateArea",
  2410. rectangle: {
  2411. coordinates: Cesium.Rectangle.fromDegrees(options.strLng, options.strLat,
  2412. options
  2413. .endLng, options.endLat),
  2414. material: self.serverUrl + options.northImage,
  2415. classificationType: Cesium.ClassificationType.TERRAIN,
  2416. },
  2417. });
  2418. // self.entities.add({
  2419. // name: "rotateArea",
  2420. // rectangle: {
  2421. // coordinates: Cesium.Rectangle.fromDegrees(options.strLng, options.strLat, options
  2422. // .endLng, options.endLat),
  2423. // material: self.serverUrl + options.scaleImage,
  2424. // rotation: new Cesium.CallbackProperty(self._getRotationValue(), false),
  2425. // stRotation: new Cesium.CallbackProperty(self._getRotationValue(), false),
  2426. // classificationType: Cesium.ClassificationType.TERRAIN,
  2427. // },
  2428. // });
  2429. },
  2430. /**
  2431. * 从集合中删除具有提供的ID的实体
  2432. * 如果已删除项目,则为true;如果集合中不存在具有提供的ID的项目,则为false
  2433. * @param {Object} entityId 实体Id
  2434. */
  2435. removeEntityById: function(entityId) {
  2436. var isDel = this.viewer.entities.removeById(entityId);
  2437. this.updateSence();
  2438. return isDel;
  2439. },
  2440. /**
  2441. * 根据名称删除实体
  2442. * @param {Object} entityName 实体名称
  2443. */
  2444. removeEntityByName: function(entityName) {
  2445. this._removeEntities(entityName);
  2446. },
  2447. });
  2448. /**
  2449. * OD线相关
  2450. */
  2451. CrMap.prototype.extend({
  2452. /**
  2453. * 计算间隔点
  2454. * @param {JSON} options
  2455. * @param {Array} resultOut
  2456. */
  2457. _parabolaEquation: function(options, resultOut) {
  2458. //方程 y=-(4h/L^2)*x^2+h h:顶点高度 L:横纵间距较大者
  2459. var h = options.height && options.height < 5000 ? options.height : 5000;
  2460. var L = Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2
  2461. .lat) ?
  2462. Math.abs(options.pt1.lon - options.pt2.lon) : Math.abs(options.pt1.lat - options.pt2.lat);
  2463. var num = options.num && options.num > 50 ? options.num : 50;
  2464. var result = [];
  2465. var tempResult = []; //临时数组
  2466. var dlt = L / num;
  2467. var addHeight = options.pt1.alt > options.pt2.alt ? options.pt1.alt : options.pt2.alt;
  2468. var maxHeight = addHeight + h;
  2469. var minHeight1 = options.pt1.alt;
  2470. var minHeight2 = options.pt2.alt;
  2471. if (Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2
  2472. .lat)) { //以lon为基准
  2473. var delLat = (options.pt2.lat - options.pt1.lat) / num;
  2474. if (options.pt1.lon - options.pt2.lon > 0) {
  2475. dlt = -dlt;
  2476. }
  2477. for (var i = 1; i < num; i++) {
  2478. var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
  2479. var lon = options.pt1.lon + dlt * i;
  2480. var lat = options.pt1.lat + delLat * i;
  2481. var alt = undefined;
  2482. if (Math.abs(dlt) * i == 0.5 * L) {
  2483. alt = maxHeight;
  2484. } else if (Math.abs(dlt) * i < 0.5 * L) {
  2485. //说明是抛物线左侧
  2486. alt = ((maxHeight - minHeight1) / h) * tempH + minHeight1;
  2487. } else {
  2488. //说明是抛物线右侧
  2489. alt = ((maxHeight - minHeight2) / h) * tempH + minHeight2;
  2490. }
  2491. tempResult.push([lon, lat, alt]);
  2492. }
  2493. } else { //以lat为基准
  2494. var delLon = (options.pt2.lon - options.pt1.lon) / num;
  2495. if (options.pt1.lat - options.pt2.lat > 0) {
  2496. dlt = -dlt;
  2497. }
  2498. for (var i = 1; i < num; i++) {
  2499. var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);
  2500. var lon = options.pt1.lon + delLon * i;
  2501. var lat = options.pt1.lat + dlt * i;
  2502. var alt = undefined;
  2503. if (Math.abs(dlt) * i == 0.5 * L) {
  2504. alt = maxHeight;
  2505. } else if (Math.abs(dlt) * i < 0.5 * L) {
  2506. //说明是抛物线左侧
  2507. alt = ((maxHeight - minHeight1) / h) * tempH + minHeight1;
  2508. } else {
  2509. //说明是抛物线右侧
  2510. alt = ((maxHeight - minHeight2) / h) * tempH + minHeight2;
  2511. }
  2512. tempResult.push([lon, lat, alt]);
  2513. }
  2514. }
  2515. /* 对结果进行处理 */
  2516. result.push([options.pt1.lon, options.pt1.lat, options.pt1.alt]);
  2517. for (var i = 0; i < tempResult.length; i++) {
  2518. result.push(tempResult[i]);
  2519. }
  2520. result.push([options.pt2.lon, options.pt2.lat, options.pt2.alt]);
  2521. if (resultOut != undefined) {
  2522. resultOut = result;
  2523. }
  2524. return result;
  2525. },
  2526. /**
  2527. * 设置OD线
  2528. * @param {JSON} center 中心点
  2529. * @param {Array(JSON)} cities 到达点
  2530. * @param {String} name 添加的OD线的名称
  2531. */
  2532. addODLine: function(center, cities, name) {
  2533. var self = this; //Cesium.Color.BLUE
  2534. var material = new Cesium.PolylineTrailLinkMaterialProperty(self._toColor(0, 0, 255, 1.0),
  2535. 4000);
  2536. /* 添加OD线 */
  2537. for (var j = 0; j < cities.length; j++) {
  2538. var points = self._parabolaEquation({
  2539. pt1: center,
  2540. pt2: cities[j],
  2541. height: 800,
  2542. num: 10
  2543. });
  2544. var pointArr = [];
  2545. for (var i = 0; i < points.length; i++) {
  2546. pointArr.push(points[i][0], points[i][1], points[i][2]);
  2547. }
  2548. self.entities.add({
  2549. name: name,
  2550. polyline: {
  2551. positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
  2552. width: 2,
  2553. material: material
  2554. }
  2555. });
  2556. }
  2557. /* 添加目标点 */
  2558. self.entities.add({
  2559. name: name,
  2560. position: Cesium.Cartesian3.fromDegrees(center.lon, center.lat, center.alt),
  2561. point: {
  2562. pixelSize: 6,
  2563. color: Cesium.Color.BLUE
  2564. }
  2565. });
  2566. /* 添加来源点数组 */
  2567. for (var i = 0; i < cities.length; i++) {
  2568. self.entities.add({
  2569. name: name,
  2570. position: Cesium.Cartesian3.fromDegrees(cities[i].lon, cities[i].lat, cities[i]
  2571. .alt),
  2572. point: {
  2573. pixelSize: 6,
  2574. color: Cesium.Color.RED
  2575. }
  2576. });
  2577. }
  2578. self.viewer.scene.requestRenderMode = false; //开启主动刷新
  2579. },
  2580. /**
  2581. * 移除OD线
  2582. * @param {Object} name OD线的名称
  2583. */
  2584. removeODLine: function(name) {
  2585. this._removeEntities(name);
  2586. }
  2587. });
  2588. /**
  2589. * 地图案件查询相关
  2590. */
  2591. CrMap.prototype.extend({
  2592. /**
  2593. * 案件查询 点方式查询 点击事件
  2594. * @param {Object} event 点击事件
  2595. */
  2596. _eventCasePointQueryMouseClick: function(event) {
  2597. var self = this;
  2598. var ray = this.viewer.camera.getPickRay(event.position);
  2599. var cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
  2600. this.measurePoints.push(cartesian);
  2601. //添加点和标注
  2602. this.entities.add({
  2603. name: 'measure',
  2604. position: self.measurePoints[self.measurePoints.length - 1],
  2605. point: {
  2606. pixelSize: self.measurePointStyle.pixelSize,
  2607. color: self.measurePointStyle.color,
  2608. outlineColor: self.measurePointStyle.outlineColor,
  2609. outlineWidth: self.measurePointStyle.outlineWidth,
  2610. },
  2611. });
  2612. //还原工具 以免多次点击
  2613. this.actionType = ActionType.non;
  2614. //刷新场景
  2615. this.updateSence(); //主动刷新场景
  2616. //弹出气泡查询窗口
  2617. var g84Coord = this._wordToWGS84(cartesian); //世界坐标转经纬度坐标
  2618. if (this.onPopoverQueryTool != undefined) {
  2619. this.onPopoverQueryTool({
  2620. x: event.position.x,
  2621. y: event.position.y,
  2622. lng: g84Coord.lng,
  2623. lat: g84Coord.lat,
  2624. alt: g84Coord.alt,
  2625. extent: g84Coord.lng + "," + g84Coord.lat,
  2626. queryType: 'point',
  2627. });
  2628. }
  2629. },
  2630. /**
  2631. * 案件查询 区域方式查询 点击事件
  2632. * @param {Object} event 点击事件
  2633. */
  2634. _eventCasePolygonQueryMouseClick: function(event) {
  2635. var self = this;
  2636. var ray = this.viewer.camera.getPickRay(event.position);
  2637. var cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
  2638. this.measurePoints.push(cartesian);
  2639. //添加绘制面
  2640. if (this.measurePoints.length > 2 && !Cesium.defined(self.measurePolygon)) {
  2641. /* 添加一个面 */
  2642. self.measurePolygon = new Cesium.Entity({
  2643. name: 'measure',
  2644. polygon: {
  2645. show: true,
  2646. hierarchy: new Cesium.CallbackProperty(self._measureUpdatePolygon(),
  2647. false),
  2648. material: Cesium.Color.GREEN.withAlpha(0.3),
  2649. }
  2650. })
  2651. self.entities.add(self.measurePolygon);
  2652. }
  2653. //添加点
  2654. this.entities.add({
  2655. name: 'measure',
  2656. position: self.measurePoints[self.measurePoints.length - 1],
  2657. point: {
  2658. pixelSize: self.measurePointStyle.pixelSize,
  2659. color: self.measurePointStyle.color,
  2660. outlineColor: self.measurePointStyle.outlineColor,
  2661. outlineWidth: self.measurePointStyle.outlineWidth,
  2662. },
  2663. });
  2664. //判断是否显示查询按钮气泡窗口
  2665. if (self.measurePoints.length >= 4) {
  2666. /* 转换全部坐标点 */
  2667. var queryExtent = undefined;
  2668. for (var i = 0; i < self.measurePoints.length; i++) {
  2669. var g84 = this._wordToWGS84(self.measurePoints[i]); //世界坐标转经纬度坐标
  2670. if (queryExtent == undefined) queryExtent = g84.lng + "," + g84.lat;
  2671. else queryExtent += "," + g84.lng + "," + g84.lat;
  2672. }
  2673. var g84Coord = this._wordToWGS84(cartesian); //世界坐标转经纬度坐标
  2674. if (this.onPopoverQueryTool != undefined) {
  2675. this.onPopoverQueryTool({
  2676. x: event.position.x,
  2677. y: event.position.y,
  2678. lng: g84Coord.lng,
  2679. lat: g84Coord.lat,
  2680. alt: g84Coord.alt,
  2681. extent: queryExtent,
  2682. queryType: 'polygon',
  2683. });
  2684. }
  2685. }
  2686. this.updateSence(); //主动刷新场景
  2687. },
  2688. /**
  2689. * 地图上案件点查询
  2690. * @param {function} callback 查询提示信息回调
  2691. */
  2692. casePointQuery: function(callback) {
  2693. this._measureInit();
  2694. this.actionType = ActionType.casePointQuery;
  2695. if (callback != undefined) {
  2696. callback("单击案件位置查询!");
  2697. }
  2698. },
  2699. /**
  2700. * 地图上案件区域查询
  2701. * @param {Object} callback 查询提示信息回调
  2702. */
  2703. casePolygonQuery: function(callback) {
  2704. this._measureInit();
  2705. this.actionType = ActionType.casePolygonQuery;
  2706. if (callback != undefined) {
  2707. callback("单击绘制查询区域,点击开始查询按钮进行查询!");
  2708. }
  2709. }
  2710. });
  2711. /**
  2712. * 测量相关
  2713. */
  2714. CrMap.prototype.extend({
  2715. /**
  2716. * 添加广告牌和标签
  2717. * @param {JSON} options
  2718. * position{Cartesian3}:位置
  2719. * text{string}:标签
  2720. */
  2721. _measureAddBillboardAndLabel: function(options) {
  2722. var self = this;
  2723. var entity = new Cesium.Entity({
  2724. name: 'measure',
  2725. position: options.position,
  2726. billboard: {
  2727. image: self.serverUrl + 'ico_measure_location.png',
  2728. horizontalOrigin: Cesium.HorizontalOrigin.center,
  2729. verticalOrigin: Cesium.VerticalOrigin.bottom,
  2730. scale: 0.5,
  2731. pixelOffset: new Cesium.Cartesian2(0, -10),
  2732. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  2733. }
  2734. });
  2735. /* 判断是否添加标注 */
  2736. if (options.text != undefined) {
  2737. entity.label = {
  2738. text: options.text,
  2739. font: '12px sans-serif',
  2740. fillColor: this._toColor(255, 255, 255, 1.0),
  2741. outlineColor: this._toColor(0, 154, 94, 1.0),
  2742. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  2743. outlineWidth: 1.0,
  2744. verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  2745. pixelOffset: new Cesium.Cartesian2(0, -28),
  2746. showBackground: true,
  2747. backgroundColor: this._toColor(0, 0, 0, 0.6),
  2748. disableDepthTestDistance: Number.POSITIVE_INFINITY,
  2749. }
  2750. }
  2751. this.entities.add(entity);
  2752. },
  2753. /**
  2754. * 添加测量多段线
  2755. */
  2756. _measureAddPolyline: function() {
  2757. if (!Cesium.defined(this.measurePolyline)) {
  2758. this.measurePolyline = new Cesium.Entity({
  2759. name: 'measure',
  2760. polyline: {
  2761. show: true,
  2762. positions: new Cesium.CallbackProperty(this._measureUpdatePolyline(),
  2763. false),
  2764. material: this._toColor(0, 255, 0, 0.6),
  2765. width: 2,
  2766. clampToGround: true, //开启贴地 如果有模型则贴模型
  2767. }
  2768. })
  2769. this.entities.add(this.measurePolyline);
  2770. }
  2771. },
  2772. /**
  2773. * 添加一个测量面
  2774. */
  2775. _measureAddPolygon: function() {
  2776. if (!Cesium.defined(this.measurePolygon)) {
  2777. this.measurePolygon = new Cesium.Entity({
  2778. name: 'measure',
  2779. polygon: {
  2780. show: true,
  2781. hierarchy: new Cesium.CallbackProperty(this._measureUpdatePolygon(),
  2782. false),
  2783. material: Cesium.Color.GREEN.withAlpha(0.3),
  2784. classificationType: Cesium.ClassificationType.BOTH,
  2785. }
  2786. })
  2787. this.entities.add(this.measurePolygon);
  2788. }
  2789. },
  2790. /**
  2791. * 测量长度的鼠标点击事件
  2792. * @param {Object} event 事件
  2793. */
  2794. _eventMeasureLengthMouseClick: function(event) {
  2795. var self = this;
  2796. /* 根据屏幕位置获取经度、纬度和高度信息 */
  2797. var resLocation = this._getLocation(event.position);
  2798. /* 创建空间三维坐标 */
  2799. var cartesian = Cesium.Cartesian3.fromDegrees(resLocation.lng, resLocation.lat, resLocation.height);
  2800. /* 将创建的空间位置存储到点集合 */
  2801. this.measurePoints.push(cartesian.clone());
  2802. if (this.measurePoints.length > 1) {
  2803. this.measureLengthResult = this._measureSpaceDistance(this.measurePoints);
  2804. } else {
  2805. this.measureLengthResult = "起点";
  2806. }
  2807. /* 添加线 */
  2808. this._measureAddPolyline();
  2809. /* 添加广告牌定位标签和标注 */
  2810. this._measureAddBillboardAndLabel({
  2811. position: self.measurePoints[self.measurePoints.length - 1],
  2812. text: self.measureLengthResult,
  2813. });
  2814. this.updateSence(); //主动刷新场景
  2815. },
  2816. /**
  2817. * 测量面积的鼠标点击事件
  2818. * @param {Object} event 事件
  2819. */
  2820. _eventMeasureAreaMouseClick: function(event) {
  2821. var self = this;
  2822. /* 根据屏幕位置获取经度、纬度和高度信息 */
  2823. var resLocation = this._getLocation(event.position);
  2824. /* 创建空间三维坐标 */
  2825. var cartesian = Cesium.Cartesian3.fromDegrees(resLocation.lng, resLocation.lat, resLocation.height);
  2826. /* 将创建的空间位置存储到点集合 */
  2827. this.measurePoints.push(cartesian.clone());
  2828. /* 添加点到计算集合 */
  2829. this.measureTempPoints.push({
  2830. lon: resLocation.lng,
  2831. lat: resLocation.lat,
  2832. hei: resLocation.height
  2833. });
  2834. if (this.measurePoints.length > 2) {
  2835. this.measureAreaResult = this._measureArea(this.measureTempPoints); //计算面积
  2836. if (this.measurePoints.length == 3) {
  2837. this._measureAddPolygon(); //添加测量面
  2838. /* 添加广告牌定位标签和标注 */
  2839. this._measureAddBillboardAndLabel({
  2840. position: self.measurePoints[0],
  2841. text: new Cesium.CallbackProperty(self._measureUpdateLabelText(), false),
  2842. });
  2843. } else {
  2844. /* 添加广告牌定位标签 */
  2845. this._measureAddBillboardAndLabel({
  2846. position: self.measurePoints[self.measurePoints.length - 1],
  2847. });
  2848. }
  2849. } else {
  2850. /* 添加广告牌定位标签 */
  2851. this._measureAddBillboardAndLabel({
  2852. position: self.measurePoints[self.measurePoints.length - 1],
  2853. });
  2854. }
  2855. this.updateSence(); //主动刷新场景
  2856. },
  2857. /**
  2858. * 测量长度点集合属性回调
  2859. */
  2860. _measureUpdatePolyline: function() {
  2861. var self = this;
  2862. return function() {
  2863. return self.measurePoints;
  2864. };
  2865. },
  2866. /**
  2867. * 测量长度更新标签回调位置
  2868. */
  2869. _measureUpdateLabel: function() {
  2870. var self = this;
  2871. return function() {
  2872. return self.measurePoints[self.measurePoints.length - 1];
  2873. };
  2874. },
  2875. /**
  2876. * 测量长度更新标签回调内容
  2877. */
  2878. _measureUpdateLabelText: function() {
  2879. var self = this;
  2880. return function() {
  2881. if (self.measureAreaResult > 100000) {
  2882. return (self.measureAreaResult / 100000).toFixed(2) + "km²";
  2883. } else {
  2884. return self.measureAreaResult.toFixed(2) + "m²";
  2885. }
  2886. };
  2887. },
  2888. /**
  2889. * 测量面积点集合属性回调
  2890. */
  2891. _measureUpdatePolygon: function() {
  2892. var self = this;
  2893. return function() {
  2894. return {
  2895. positions: self.measurePoints,
  2896. };
  2897. };
  2898. },
  2899. /**
  2900. * 测量长度的鼠标移动事件
  2901. * @param {Object} event 事件
  2902. */
  2903. _eventMeasureLengthMouseMove: function(event) {
  2904. var self = this;
  2905. var ray = this.viewer.camera.getPickRay(event.endPosition);
  2906. var cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
  2907. if (self.measurePoints.length > 1) {
  2908. self.measurePoints.pop();
  2909. self.measurePoints.push(cartesian);
  2910. }
  2911. },
  2912. /**
  2913. * 测量结束事件
  2914. * @param {Object} event 事件
  2915. */
  2916. _eventMeasureEnd: function(event) {
  2917. this.actionType = ActionType.non;
  2918. this.measurePoints.pop();
  2919. this.viewer.scene.requestRenderMode = true; //停止主动刷新
  2920. //this.updateSence(); //主动刷新以下
  2921. },
  2922. /**
  2923. * 计算距离
  2924. * @param {Object} positions 点集合
  2925. */
  2926. _measureSpaceDistance: function(positions) {
  2927. var distance = 0;
  2928. for (var i = 0; i < positions.length - 1; i++) {
  2929. var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
  2930. var point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);
  2931. /**根据经纬度计算出距**/
  2932. var geodesic = new Cesium.EllipsoidGeodesic();
  2933. geodesic.setEndPoints(point1cartographic, point2cartographic);
  2934. var s = geodesic.surfaceDistance;
  2935. //返回两点之间的距离
  2936. s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic
  2937. .height,
  2938. 2));
  2939. distance = distance + s;
  2940. }
  2941. if (distance < 1000) return distance.toFixed(2) + "米";
  2942. else return (distance / 1000).toFixed(2) + "公里";
  2943. },
  2944. /**
  2945. * 计算面积
  2946. * @param {Object} points 点集合
  2947. */
  2948. _measureArea: function(points) {
  2949. var self = this;
  2950. var res = 0;
  2951. // for (var i = 0; i < tempPoints.length; i++) {
  2952. // console.log("i = " + i + " value = " + JSON.stringify(tempPoints[i]));
  2953. // }
  2954. //拆分三角曲面
  2955. for (var i = 0; i < points.length - 2; i++) {
  2956. var j = (i + 1) % points.length;
  2957. var k = (i + 2) % points.length;
  2958. var totalAngle = self._measureAreaAngle(points[i], points[j], points[k]);
  2959. var dis_temp1 = self._measureAreaDistance(self.measurePoints[i], self.measurePoints[j]);
  2960. var dis_temp2 = self._measureAreaDistance(self.measurePoints[j], self.measurePoints[k]);
  2961. res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));
  2962. // console.log(res);
  2963. }
  2964. return res;
  2965. },
  2966. /**
  2967. * 计算角度
  2968. * @param {Object} p1 点1
  2969. * @param {Object} p2 点2
  2970. * @param {Object} p3 点3
  2971. */
  2972. _measureAreaAngle: function(p1, p2, p3) {
  2973. var bearing21 = this._measureAreaBearing(p2, p1);
  2974. var bearing23 = this._measureAreaBearing(p2, p3);
  2975. var angle = bearing21 - bearing23;
  2976. if (angle < 0) {
  2977. angle += 360;
  2978. }
  2979. return angle;
  2980. },
  2981. /**
  2982. * 计算方向
  2983. * @param {Object} from 起始
  2984. * @param {Object} to 终止
  2985. */
  2986. _measureAreaBearing: function(from, to) {
  2987. var radiansPerDegree = Math.PI / 180.0; //角度转化为弧度(rad)
  2988. var degreesPerRadian = 180.0 / Math.PI; //弧度转化为角度
  2989. var lat1 = from.lat * radiansPerDegree;
  2990. var lon1 = from.lon * radiansPerDegree;
  2991. var lat2 = to.lat * radiansPerDegree;
  2992. var lon2 = to.lon * radiansPerDegree;
  2993. var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(
  2994. lat2) -
  2995. Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
  2996. if (angle < 0) {
  2997. angle += Math.PI * 2.0;
  2998. }
  2999. angle = angle * degreesPerRadian; //角度
  3000. return angle;
  3001. },
  3002. /**
  3003. * 计算两点之间的距离
  3004. * @param {Object} point1 点1
  3005. * @param {Object} point2 点2
  3006. */
  3007. _measureAreaDistance(point1, point2) {
  3008. var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
  3009. var point2cartographic = Cesium.Cartographic.fromCartesian(point2);
  3010. /**根据经纬度计算出距离**/
  3011. var geodesic = new Cesium.EllipsoidGeodesic();
  3012. geodesic.setEndPoints(point1cartographic, point2cartographic);
  3013. var s = geodesic.surfaceDistance;
  3014. //console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
  3015. //返回两点之间的距离
  3016. s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic
  3017. .height, 2));
  3018. return s;
  3019. },
  3020. /**
  3021. * 清除测量结果
  3022. */
  3023. _measureRemoveResult: function() {
  3024. this._removeEntities('measure');
  3025. },
  3026. /**
  3027. * 测量初始化
  3028. */
  3029. _measureInit: function() {
  3030. this.measurePoints = []; //测量数组
  3031. this.measureTempPoints = []; //面积计算数组
  3032. this.measurePolyline = undefined; //测量线
  3033. this.measurePolygon = undefined; //测量线
  3034. this.measureDistanceResult = 0; //测量长度
  3035. this.measureAreaResult = 0; //测量面积
  3036. this._measureRemoveResult();
  3037. },
  3038. /**
  3039. * @param {string} callback 回调消息
  3040. */
  3041. measureLength: function(callback) {
  3042. this._measureInit();
  3043. this.actionType = ActionType.measureLength;
  3044. if (callback != undefined) {
  3045. callback("单击开始测量!");
  3046. }
  3047. },
  3048. /**
  3049. * @param {string} callback 回调消息
  3050. */
  3051. measureArea: function(callback) {
  3052. this._measureInit();
  3053. this.actionType = ActionType.measureArea;
  3054. if (callback != undefined) {
  3055. callback("单击开始面积测量!");
  3056. }
  3057. },
  3058. /**
  3059. * 测量初始化
  3060. * @param {function} callback 回调函数
  3061. */
  3062. measureClear: function(callback) {
  3063. this._measureInit();
  3064. this.actionType = ActionType.non;
  3065. if (callback != undefined) callback();
  3066. },
  3067. });
  3068. /**
  3069. * 路径飞行相关
  3070. */
  3071. CrMap.prototype.extend({
  3072. /**
  3073. *
  3074. */
  3075. _getMapCenter: function() {
  3076. /* 获取当前视图的可视范围 west西经 south南纬 east东经 north北纬 以弧度表示*/
  3077. var rectangle = this.viewer.camera.computeViewRectangle();
  3078. /* 计算中心点 */
  3079. var cGraphic = Cesium.Rectangle.center(rectangle);
  3080. /* 计算高度 */
  3081. var height = this.viewer.scene.globe.getHeight(cGraphic);
  3082. cGraphic.height = height;
  3083. /* 制图表达转换为笛卡尔坐标 */
  3084. var point = Cesium.Cartographic.toCartesian(cGraphic);
  3085. /* 笛卡尔坐标系转换为WGS84坐标系 */
  3086. var rg84Point = Cesium.Cartographic.fromCartesian(point);
  3087. /* 返回 */
  3088. return {
  3089. lng: (Cesium.Math.toDegrees(rectangle.west) + Cesium.Math.toDegrees(rectangle.east)) / 2,
  3090. lat: (Cesium.Math.toDegrees(rectangle.south) + Cesium.Math.toDegrees(rectangle.north)) / 2,
  3091. alt: rg84Point.height,
  3092. };
  3093. },
  3094. /**
  3095. * 计算当前相机位置基于给定基础点旋转一定角度后的位置信息
  3096. * @param {JSON} options
  3097. * {lng: lat: alt: angle:}
  3098. * return{x: y: z:}
  3099. */
  3100. _calculateCameraPosition: function(options) {
  3101. var self = this;
  3102. /* 两个点 */
  3103. var point = Cesium.Cartesian3.fromDegrees(options.lng, options.lat, options.alt);
  3104. var cameraPosition = self.viewer.camera.position;
  3105. /* 计算参考点的地面法向量 */
  3106. var chicB = Cesium.Cartographic.fromCartesian(point); //转成以弧度表示的数据
  3107. chicB.height = 0;
  3108. var dB = Cesium.Cartographic.toCartesian(chicB); //此点其实为地面点对应的投影平面上的点
  3109. //normalize 对输入的坐标进行标准化处理 subtract计算两个笛卡尔的分量差异
  3110. var normaB = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(dB, point, new Cesium
  3111. .Cartesian3()), new Cesium.Cartesian3());
  3112. /* 构造基于B的法向量旋转90度的矩阵 */
  3113. //计算表示围绕轴旋转的四元数
  3114. var Q = Cesium.Quaternion.fromAxisAngle(normaB, Cesium.Math.toRadians(options.angle));
  3115. //根据提供的四元数计算3x3旋转矩阵
  3116. var m3 = Cesium.Matrix3.fromQuaternion(Q);
  3117. //从Matrix3计算代表旋转的Matrix4
  3118. var m4 = Cesium.Matrix4.fromRotationTranslation(m3);
  3119. /* 计算相机相对于基础点的位置 */
  3120. var A1 = Cesium.Cartesian3.subtract(cameraPosition, point, new Cesium.Cartesian3());
  3121. /* 对计算后的点应用旋转矩阵 计算矩阵与 Cartesian3 的乘积*/
  3122. var p = Cesium.Matrix4.multiplyByPoint(m4, A1, new Cesium.Cartesian3());
  3123. /* 新相机位置的坐标 */
  3124. var p2 = Cesium.Cartesian3.add(p, point, new Cesium.Cartesian3());
  3125. return p2;
  3126. },
  3127. // lng: 117.981144,
  3128. // lat: 36.314221,
  3129. // alt: 300,
  3130. /**
  3131. * 开始路径飞行 为了尝试使用点击事件确定中心点 则改为利用屏幕坐标进行飞行
  3132. * @param {Object} event 鼠标点击事件
  3133. */
  3134. _startFlightAround: function(event) {
  3135. var self = this;
  3136. var ray = self.viewer.camera.getPickRay(event.position);
  3137. var cartesian = self.viewer.scene.globe.pick(ray, self.viewer.scene);
  3138. if (cartesian == undefined) {
  3139. return;
  3140. }
  3141. //世界坐标转地理坐标(弧度)
  3142. var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian);
  3143. //弧度转换为度
  3144. var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math
  3145. .PI * 180
  3146. ];
  3147. if (self.flightListner == undefined) {
  3148. /* 设置当前时间为起始时间 */
  3149. var startTime = Cesium.JulianDate.fromDate(new Date());
  3150. /* 设置当前时间+1000秒为结束时间 */
  3151. var stopTime = Cesium.JulianDate.addSeconds(startTime, 1000, new Cesium.JulianDate());
  3152. /* 设置Cesium固定时钟的起始时间 */
  3153. self.viewer.clock.startTime = startTime.clone();
  3154. /* 设置Cesium固定时钟的终止时间 */
  3155. self.viewer.clock.stopTime = stopTime.clone();
  3156. /* 设置Cesium固定时钟的当前时间 */
  3157. self.viewer.clock.currentTime = startTime.clone();
  3158. /* UNBOUNDED到达终止时间后继续读秒 CLAMPED达到终止时间后停止 LOOP_STOP到达终止时间后重复 */
  3159. self.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
  3160. /* 用于确定每次通话需要多少时间的常数 */
  3161. self.viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
  3162. /* 设置动画监听 */
  3163. self.flightListner = function eventClock() {
  3164. var newPosition = self._calculateCameraPosition({
  3165. lng: point[0],
  3166. lat: point[1],
  3167. alt: 300,
  3168. angle: self.angle,
  3169. });
  3170. self.viewer.camera.setView({
  3171. destination: newPosition,
  3172. orientation: {
  3173. heading: Cesium.Math.toRadians(Cesium.Math.toDegrees(self.viewer
  3174. .camera
  3175. .heading) + self.angle),
  3176. pitch: self.viewer.camera.pitch,
  3177. }
  3178. });
  3179. }
  3180. self.viewer.clock.onTick.addEventListener(self.flightListner);
  3181. }
  3182. },
  3183. /**
  3184. * 调起环飞工具
  3185. */
  3186. flightAround: function() {
  3187. this.actionType = ActionType.flightAround;
  3188. }
  3189. });
  3190. /**
  3191. * 动态Div标签相关
  3192. */
  3193. CrMap.prototype.extend({
  3194. /**
  3195. * 向地图中添加标签
  3196. * @param {JSON} options 配置项
  3197. * title{string}:标题
  3198. * sup{string}:子标题
  3199. * lng{float}:经度
  3200. * lat{float}:纬度
  3201. * alt{float}:高度
  3202. */
  3203. appendLabelToMap: function(options) {
  3204. var self = this;
  3205. var points = [{
  3206. lng: options.lng,
  3207. lat: options.lat,
  3208. }];
  3209. self.calculateAltitude({
  3210. points: points,
  3211. success: function(heights) {
  3212. var screenPoint = self.wgs84ToScreen({
  3213. lng: options.lng,
  3214. lat: options.lat,
  3215. alt: heights[0],
  3216. });
  3217. // /* 添加一个点 用于验证位置是否正确 */
  3218. // var point = Cesium.Cartesian3.fromDegrees(options.lng, options.lat, heights[0]);
  3219. // var pointEntity = new Cesium.Entity({
  3220. // name: 'test',
  3221. // position: point,
  3222. // point: {
  3223. // color: Cesium.Color.CRIMSON,
  3224. // pixelSize: 9,
  3225. // outlineColor: Cesium.Color.ALICEBLUE,
  3226. // outlineWidth: 2
  3227. // }
  3228. // });
  3229. // console.log("实体数量 = " + self.entities.values.length + " 高度=" + heights[0]);
  3230. // self.entities.add(pointEntity);
  3231. // console.log("实体数量 = " + self.entities.values.length);
  3232. var airWindowId = options.id;
  3233. /* 判断该div是否存在 */
  3234. var objAirBubbleWindow = document.getElementById(airWindowId);
  3235. if (objAirBubbleWindow == null) {
  3236. /* 创建div */
  3237. objAirBubbleWindow = document.createElement('div');
  3238. objAirBubbleWindow.id = airWindowId;
  3239. objAirBubbleWindow.setAttribute('tag',
  3240. 'label'); //设置标识 为了在地图变化的时候能找到需要处理的Div
  3241. objAirBubbleWindow.className = 'jt-tooltip-popup';
  3242. objAirBubbleWindow.onclick = function() {
  3243. this.style.display = 'none';
  3244. }
  3245. /* 加入到页面 */
  3246. document.body.append(objAirBubbleWindow);
  3247. }
  3248. objAirBubbleWindow.style.display = 'flex';
  3249. var contentHtml = "";
  3250. /* 具体内容 */
  3251. contentHtml += "<div>";
  3252. contentHtml += "<span class='title'>" + options.title + "</span>";
  3253. contentHtml += "<div>";
  3254. contentHtml += "<span class='state'>" + options.state + "</span>";
  3255. contentHtml += "<span class='area'>" + options.area + "</span>";
  3256. contentHtml += "</div>";
  3257. contentHtml += "</div>";
  3258. /* 竖线 */
  3259. contentHtml += "<div></div>";
  3260. /* 底部小圆圈 */
  3261. contentHtml += "<div></div>";
  3262. /* 赋值 */
  3263. objAirBubbleWindow.innerHTML = contentHtml;
  3264. /* 赋值位置 */
  3265. objAirBubbleWindow.style.top = (screenPoint.y - objAirBubbleWindow
  3266. .clientHeight) + 'px';
  3267. objAirBubbleWindow.style.left = (screenPoint.x - objAirBubbleWindow
  3268. .clientWidth / 2) + 'px';
  3269. /* 存储地理位置 */
  3270. objAirBubbleWindow.setAttribute('location', options.lng + "," + options.lat +
  3271. "," + heights[0]);
  3272. }
  3273. });
  3274. },
  3275. /**
  3276. * 重置标签的位置
  3277. */
  3278. resetLabelLocation() {
  3279. /* 获取符合要求的全部标签 */
  3280. var labels = document.querySelectorAll("div[tag = 'label']");
  3281. for (var i = 0; i < labels.length; i++) {
  3282. var labelDom = labels[i];
  3283. if (labelDom.style.display != 'none') {
  3284. /* 说明该标签处于显示状态 获取存储的位置信息*/
  3285. var location = labelDom.getAttribute('location');
  3286. var res = this.wgs84ToScreen({
  3287. lng: location.split(',')[0],
  3288. lat: location.split(',')[1],
  3289. alt: location.split(',')[2],
  3290. });
  3291. labelDom.style.top = (res.y - labelDom.clientHeight) + 'px';
  3292. labelDom.style.left = (res.x - labelDom.clientWidth / 2) + 'px';
  3293. }
  3294. }
  3295. }
  3296. });
  3297. /**
  3298. * 设置纹理属性信息
  3299. */
  3300. Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
  3301. Cesium.Material.PolylineTrailLinkImage =
  3302. "./img/colors1.png";
  3303. Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
  3304. {\n\
  3305. czm_material material = czm_getDefaultMaterial(materialInput);\n\
  3306. vec2 st = materialInput.st;\n\
  3307. vec4 colorImage = texture2D(image, vec2(fract(-st.s - time), st.t));\n\
  3308. material.alpha = colorImage.a * color.a;\n\
  3309. material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
  3310. return material;\n\
  3311. }";
  3312. /**
  3313. * 将自定义纹理添加到纹理缓存中
  3314. */
  3315. Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
  3316. fabric: {
  3317. type: Cesium.Material.PolylineTrailLinkType,
  3318. uniforms: {
  3319. color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
  3320. image: Cesium.Material.PolylineTrailLinkImage,
  3321. time: 0
  3322. },
  3323. source: Cesium.Material.PolylineTrailLinkSource
  3324. },
  3325. translucent: function(material) {
  3326. return true;
  3327. }
  3328. });