```
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);
}
});
});
}
```
- video
- treemap
- mian.html文件注釋
- 配置項tab
- 配置項屬性
- internalRefreshAxisMdelData函數梳理
- 函數配置項-engine文件
- 替換數據源流程
- design.js
- 樹圖
- 下鉆 廢棄
- 人體圖
- 下鉆地圖
- 行列互轉
- 預覽樣式
- logo旁邊的報表名
- echarts 組件生成圖片
- 數據集樣式
- 頭部 黑色head
- 手機 ipad 圖片
- k線圖部分
- 平臺管理css樣式
- 目錄css和平板的邊距
- 設計頁-數據源-目錄
- 數據集 - 查看數據表 -按鈕和目錄樣式
- 報表列表頁按鈕css
- 角色管理頁按鈕css
- 推送通知按鈕css
- 子賬號按鈕css
- 數據連接
- openlayers地圖線路圖
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 說明
- 常用圖標小bug
- echarts 氣泡地圖
- echarts 線路軌跡圖
- 導出pdf
- 可視化sql--css
- 表格滾動
- 主題色
- 時間軸
- 分享彈框
- 管理平臺header和菜單
- 報表平臺和菜單
- 初始化組件顏色
- 其他彈框
- olap分析樣式-廢棄
- 3d地圖柱狀圖
- 關系圖
- olap分析
- 地區地圖
- k線圖相關屬性設置
- 世界地圖
- 時間軸(new)
- 選擇省份下轉地圖
- 選擇省市飛線地圖
- 面積預警地圖默認顏色
- 組件覆層開關組件
- 汽車儀表盤bug
- 雷達圖bug修復不能分享的問題
- 餅狀 條形圖 自動播放
- 臨時用
- 自動輪播
- 方形元素 按鈕浮動報錯
- 面積預警地圖整合可選擇省市區
- 下鉆地圖添加返回按鈕
- 下鉆地圖修復預警bug
- 基本時間組件
- 添加時鐘組件
- 3d地球組件
- 盒須圖
- 組件加載動畫
- 報表背景漸變色
- 主題模板
- 沒用
- 3機房第三方組件
- 設計
- 分享
- 3d機房需要的靜態資源
- cesium地球需要的文件以及樣式
- cesium地球
- 設計頁
- 分享頁
- 圖標條形圖
- 世豪-前端代碼整理
- component.css 文件新添加
- 雜項
- index.jsp
- designer.css 樣式暫時不整理 里面比較雜
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加組件設置頁模板
- 以前的報表頁設置控制器---做個記錄
- 大概修改過的代碼
- 2019-5-8 修改皮膚控制器
- 選擇模板
- 桑基圖2019-11-20
- bug 修正 2019-11-21
- 插圖柱狀圖
- cesiumchart組件
- gis 地圖 聯動 彈框 圖標
- 動態面積圖添加按鈕類配置項
- 玫瑰圖形組件
- cesium 圖形 和three.js 沖突的bug
- gis 地圖 默認圖層
- 網格標簽
- gis 點圖 值域
- gis 面圖 值域
- 按鈕圖標添加提示框
- 百度地圖
- 剩余的組件
- gulp說明文檔
- 色斑圖加透明