分享頁 · 代碼梳理

``` var build_cesium_component = function(scope, element, $compile, $timeout, $sce){ var component = scope.component; //控件需要的HTML var html = []; html.push('<div class="cesium-main" style="position:relative;">'); html.push('<nav ng-show="component.config.nav">'); html.push('<div class="navbar-header">'); html.push('<a href="##" class="navbar-brand"></a>'); html.push('<button class="navbar-toggle" type="button">'); html.push('<span class="icon-bar"></span>'); html.push('<span class="icon-bar"></span>'); html.push('<span class="icon-bar"></span>'); html.push('</button>'); html.push('</div>'); html.push('<div class="collapse navbar-collapse">'); html.push('<ul class="nav navbar-nav">'); html.push('<li id="fuwei" class="active"><a href="javascript:;">復位</a></li>'); html.push('</ul>'); html.push('</div>'); html.push('</nav>'); html.push('<div id="cesiumContainer"></div>'); html.push('<div ng-show="component.config.latlng_show" id="latlng_show" style="height:30px;position:absolute;bottom:10px;left:20px;z-index:1;font-size:12px;">'); html.push('<div style="height:30px;float:left;line-height:30px;margin-right:10px;">'); html.push('<font size="3" ng-style="{color:component.config.xyColor}">經度：<span id="longitude_show">104.4481</span></font>'); html.push('</div>'); html.push('<div style="height:30px;float:left;line-height:30px;margin-right:10px;">'); html.push('<font size="3" ng-style="{color:component.config.xyColor}">緯度：<span id="latitude_show">11.3676</span></font>'); html.push('</div>'); html.push('<div style="height:30px;float:left;line-height:30px;margin-right:10px;">'); html.push('<font size="3" ng-style="{color:component.config.xyColor}">視角高：<span id="altitude_show">5791.00</span>km</font>'); html.push('</div>'); html.push('</div>'); html.push('</div>'); var el = $compile(html.join(""))( scope ); element.append(el); // 開始組件核心代碼 scope.component.context.toggleBtn = document.querySelector('.navbar-toggle') scope.component.context.collapsedElm = document.querySelector('.navbar-collapse') scope.component.context.toggleBtn.addEventListener('click', function() { scope.component.context.collapsedElm.classList.toggle('collapse') }); // cesium核心 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYjEzMmZlOC0zN2VhLTQyYzctYTM4Zi0xMDMzMjc4MDY3NzIiLCJpZCI6NjY3NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NzEwNzY0N30.VicpYzQBicFaRLD4csQ8iIGmBjzHFJg9WwSdfMqfWs0' viewer = new Cesium.Viewer('cesiumContainer',{ //需要進行可視化的數據源的集合 animation: false, //是否顯示動畫控件 shouldAnimate : true, homeButton: false, //是否顯示Home按鈕 fullscreenButton: false, //是否顯示全屏按鈕 baseLayerPicker: false, //是否顯示圖層選擇控件 geocoder: false, //是否顯示地名查找控件 timeline: false, //是否顯示時間線控件 sceneModePicker: true, //是否顯示投影方式控件 navigationHelpButton: false, //是否顯示幫助信息控件 infoBox: false, //是否顯示點擊要素之后顯示的信息 requestRenderMode: true, //啟用請求渲染模式 scene3DOnly: false, //每個幾何實例將只能以3D渲染以節省GPU內存 sceneMode: 3, //初始場景模式 1 2D模式 2 2D循環模式 3 3D模式 Cesium.SceneMode fullscreenElement: document.body, //全屏時渲染的HTML元素暫時沒發現用處 imageryProvider : new Cesium.UrlTemplateImageryProvider({ //高德地圖 url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", layer: "tdtVecBasicLayer", style: "default", format: "image/png", tileMatrixSetID: "GoogleMapsCompatible", show: false }) }); // 加載高德映像圖 viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8", layer: "tdtAnnoLayer", style: "default", format: "image/jpeg", tileMatrixSetID: "GoogleMapsCompatible" })); // 設置經緯度高度 longitude_show = document.getElementById('longitude_show'); latitude_show = document.getElementById('latitude_show'); altitude_show = document.getElementById('altitude_show'); canvas = viewer.scene.canvas; //具體事件的實現 ellipsoid = viewer.scene.globe.ellipsoid; handler = new Cesium.ScreenSpaceEventHandler(canvas); handler.setInputAction(function(movement){ //捕獲橢球體，將笛卡爾二維平面坐標轉為橢球體的笛卡爾三維坐標，返回球體表面的點 var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid); if(cartesian){ //將笛卡爾三維坐標轉為地圖坐標（弧度） var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian); //將地圖坐標（弧度）轉為十進制的度數 var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4); var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4); var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2); longitude_show.innerHTML=log_String; latitude_show.innerHTML=lat_String; altitude_show.innerHTML=alti_String; } },Cesium.ScreenSpaceEventType.MOUSE_MOVE); //相機設置 var scene = viewer.scene; var canvas = viewer.canvas; viewer.camera.moveForward(28744.77) canvas.setAttribute('tabindex', '0'); // 需要把焦點放在畫布上 canvas.onclick = function() { canvas.focus(); }; //這個橢球形就是地球了 var ellipsoid = viewer.scene.globe.ellipsoid; flags = { //記錄鍵盤的前后上下左右 moveForward : false, moveBackward : false, moveUp : false, moveDown : false, moveLeft : false, moveRight : false }; //判斷鍵盤的輸入 function getFlagForKeyCode(keyCode) { switch (keyCode) { case 'W'.charCodeAt(0): return 'moveUp'; case 'S'.charCodeAt(0): return 'moveDown'; case 'Q'.charCodeAt(0): return 'moveForward'; case 'E'.charCodeAt(0): return 'moveBackward'; case 'D'.charCodeAt(0): return 'moveRight'; case 'A'.charCodeAt(0): return 'moveLeft'; default: return undefined; } } //獲得鍵盤keydown事件 document.addEventListener('keydown', function(e) { var flagName = getFlagForKeyCode(e.keyCode); if (typeof flagName !== 'undefined') { flags[flagName] = true; } }, false); //獲得鍵盤keyup事件 document.addEventListener('keyup', function(e) { var flagName = getFlagForKeyCode(e.keyCode); if (typeof flagName !== 'undefined') { flags[flagName] = false; } }, false); //更新相機 viewer.clock.onTick.addEventListener(function(clock) { // console.log("dida"); var camera = viewer.camera; // 鏡頭移動的速度基于鏡頭離地球的高度 var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height; var moveRate = cameraHeight / 100.0; // console.log(moveRate) if (flags.moveForward) { camera.moveForward(moveRate); } if (flags.moveBackward) { camera.moveBackward(moveRate); } if (flags.moveUp) { camera.moveUp(moveRate); } if (flags.moveDown) { camera.moveDown(moveRate); } if (flags.moveLeft) { camera.moveLeft(moveRate); } if (flags.moveRight) { camera.moveRight(moveRate); } }); // 復位函數 scope.component.context.fuwei = function(){ viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(104.4481,11.3676, 5791000.0), // 設置位置 orientation: { heading : Cesium.Math.toRadians(0.0), // 方向 pitch : Cesium.Math.toRadians(-68.0),// 傾斜角度 roll : 0 }, duration:8, // 設置飛行持續時間，默認會根據距離來計算 complete: function () { // 到達位置后執行的回調函數 console.log('到達目的地'); }, cancle: function () { // 如果取消飛行則會調用此函數 console.log('飛行取消') }, pitchAdjustHeight: -90, // 如果攝像機飛越高于該值，則調整俯仰俯仰的俯仰角度，并將地球保持在視口中。 maximumHeight:5000, // 相機最大飛行高度 flyOverLongitude: 100, // 如果到達目的地有2種方式，設置具體值后會強制選擇方向飛過這個經度 }); scope.component.context.collapsedElm.classList.toggle('collapse') } if(scope.component.config.three){ $('.cesium-viewer-toolbar').css({'display':'block','top':'50px'}) }else{ $('.cesium-viewer-toolbar').css({'display':'none','top':'50px'}) } // 調用 scope.component.context.fuwei() // 添加點位方法 scope.component.context.addObj = function(x,y,name){ // 添加點位 var xuanwuhu = viewer.entities.add({ name : 'xuanwuhu', position : Cesium.Cartesian3.fromDegrees(x, y,16000), point : { pixelSize : 10, color : Cesium.Color.RED, outlineColor : Cesium.Color.WHITE, outlineWidth : 2 }, label : { text : name, font : '14pt monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth : 2, //垂直位置 verticalOrigin : Cesium.VerticalOrigin.BUTTON, //中心位置 pixelOffset : new Cesium.Cartesian2(0, 20) } }); } // 事件函數 scope.component.context.even = function(x,y,url){ viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(x, y,20000), // 設置位置 orientation: { heading : Cesium.Math.toRadians(20.0), // 方向 pitch : Cesium.Math.toRadians(-90.0),// 傾斜角度 roll : 0 }, duration:5, // 設置飛行持續時間，默認會根據距離來計算 complete: function () { // 到達位置后執行的回調函數 // console.log('到達目的地'); var flag = window.open(url); if(flag==null) { alert("您的瀏覽器啟用彈出窗口過濾功能！\n\n請暫時先關閉此功能！") ; } // var index = layer.open({ // type: 2, // content: 'http://www.baidu.com', // area: ['320px', '195px'], // maxmin: true // }); // layer.full(index); }, cancle: function () { // 如果取消飛行則會調用此函數 console.log('飛行取消') }, pitchAdjustHeight: -90, // 如果攝像機飛越高于該值，則調整俯仰俯仰的俯仰角度，并將地球保持在視口中。 maximumHeight:5000, // 相機最大飛行高度 flyOverLongitude: 100, // 如果到達目的地有2種方式，設置具體值后會強制選擇方向飛過這個經度 }); scope.component.context.collapsedElm.classList.toggle('collapse') } //刷新控件渲染 var refreshChartView = function(scope, element, component, $compile){ //配置的維度 var dimensions = component.config.datasourceConfig.dimensions; //配置的度量 var measures = component.config.datasourceConfig.measures; //服務器端返回的查詢數據 var data = component.context.data; if (data == null || data.length < 1 || dimensions.length < 3) { return } var chaetData = []; for (var i = 0; i < data.length; i++) { if (dimensions.length >= 3) { chaetData.push({ "x":data[i].lat, "y":data[i].lng, "name":data[i][dimensions[1].name], "url":data[i][dimensions[2].name] }) } } console.log(chaetData) // m每次清空點位 viewer.entities.removeAll(); $('.navbar-nav').html('<li id="fuwei" class="active"><a href="javascript:;">復位</a></li>'); for(var i = 0;i<chaetData.length;i++){ scope.component.context.addObj(chaetData[i].x,chaetData[i].y,chaetData[i].name) $('.navbar-nav').append('<li ><a href="javascript:;">'+ chaetData[i].name +'</a></li>'); scope.component.context.collapsedElm.classList.toggle('collapse') } // 事件系列 $(document).on('click','.navbar-nav li',function(){ var _self = $(this).index(); if(_self == '0'){ scope.component.context.fuwei(); }else{ scope.component.context.even(chaetData[_self-1].x,chaetData[_self-1].y,chaetData[_self-1].url) } }) }; //接收控件刷新數據的事件 scope.$on(event_refreshComponentData, function(target, param){ scope.queryComponentData(param, { onSuccess: function(){ refreshChartView(scope, element, component, $compile); } }); }); } ```