```
//请勿修改此处命名参数
vsPluginComponentModule.factory('$vcPlugin_extwidgets_cesium', ['$vsPluginRegister', '$timeout', function ($vsPluginRegister, $timeout) {
var viewer,longitude_show,latitude_show,canvas,ellipsoid,handler,scene,flags;
var factory = {
//配置面板中显示[数据]配置
showDataCategory: true,
//配置面板中显示[边框]配置
showBorderCategory: true,
//配置面板中显示[基本]配置
showBasicCategory: true,
//配置面板中显示[浮动]配置
showFixedCategory: false,
//配置面板中显示[事件]配置
showEventCategory: false,
//配置面板中显示[标题]配置
showTitleCategory: true,
//配置面板中显示[预警]配置
showThresholdCategory: false,
/* 控件的初始化 */
init: function(scope, element, component, $compile){
scope.element = element;
scope.component = component;
//默认属性
//控件是否开启页面过滤（例如下拉框、多选框等过滤器需要设置为true）
component.config.pageFilter = false;
//控件的图形维度数量
scope.component.config.chartDimensionCount = 3;
if(!component.config.is){
scope.component.config.nav = false; //菜单显示
scope.component.config.latlng_show = false; //坐标设置
scope.component.config.xyColor = "#ff8800"; //坐标颜色
scope.component.config.three = true; //渲染模式3D
}
},
/*
* 构建数据描述，此方法中对控件的数据进行处理
*/
buildDataDescription: function(dataDescription, scope, element, component, $compile){
//接收控件刷新数据的事件
scope.$on(event_refreshComponentData, function(target, param){
scope.queryComponentData(param, {
onSuccess: function(){
refreshChartView(scope, element, component, $compile);
}
});
});
},
/*
* 构建图形描述，此方法中定义控件的配置面板
*/
buildChartDescription: function(scope, element, component, $compile){
scope.component = 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);
/*
* 构建[设置]配置面板
*/
buildSettingDescription(scope, element, component, $compile);
// 开始组件核心代码
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 bx = [
// {'x':113.46858,'y':40.073822,'name':'矿区一'},
// {'x':112.530318,'y':39.320569,'name':'矿区二'},
// {'x':106.293634,'y':38.501243,'name':'矿区三'},
// {'x':109.568353,'y':36.522929,'name':'矿区四'},
// {'x':118.793091,'y':32.074570,'name':'玄武湖'}
// ]
// for(var i = 0;i<bx.length;i++){
// scope.component.context.addObj(bx[i].x,bx[i].y,bx[i].name)
// $('.navbar-nav').append('<li><a href="javascript:;">'+ bx[i].name +'</a></li>');
// scope.component.context.collapsedElm.classList.toggle('collapse')
// }
}
};
var buildSettingDescription = function(scope, element, component, $compile){
//构建[设置]配置面板
var category = {
name: "setting",
title: "设置",
groups: []
};
component.description.categories.push(category);
category.groups.push({
name: "text",
title: {
text: "导航设置"
},
elements: [,{
title: "3D渲染模式",
type: "switch",
bind: "three",
on: vsLang.on,
off: vsLang.off
},{
title: "菜单",
type: "switch",
bind: "nav",
on: vsLang.on,
off: vsLang.off
},{
title: "坐标",
type: "switch",
bind: "latlng_show",
on: vsLang.on,
off: vsLang.off
},{
title: "坐标字体颜色",
type: "colorpicker",
bind: "xyColor"
}]
});
scope.$watch('component.config.nav', function(newValue, oldValue){
if(newValue != null && (oldValue == null || oldValue !== newValue)){
var option = component.config;
option.is = true;
option.nav = newValue;
}
});
scope.$watch('component.config.latlng_show', function(newValue, oldValue){
if(newValue != null && (oldValue == null || oldValue !== newValue)){
var option = component.config;
option.is = true;
option.latlng_show = newValue;
}
});
scope.$watch('component.config.xyColor', function(newValue, oldValue){
if(newValue != null && (oldValue == null || oldValue !== newValue)){
var option = component.config;
option.is = true;
option.xyColor = newValue;
}
});
scope.$watch('component.config.three', function(newValue, oldValue){
if(newValue != null && (oldValue == null || oldValue !== newValue)){
var option = component.config;
option.is = true;
option.three = newValue;
}
});
}
//刷新控件渲染
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(dimensions)
// console.log(measures)
// console.log(data);
// console.log(chaetData)
// var bx = [
// {'x':106.293634,'y':38.501243,'name':'矿区三'},
// {'x':109.568353,'y':36.522929,'name':'矿区四'},
// {'x':118.793091,'y':32.074570,'name':'玄武湖'}
// ]
// 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)
}
})
};
//请勿修改此处命名参数
$vsPluginRegister.register("extwidgets", "cesium", factory);
}]);
```
- 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说明文档
- 色斑图加透明