356 lines
14 KiB
JavaScript
356 lines
14 KiB
JavaScript
|
/*
|
|||
|
|
* @Descripttion:
|
|||
|
|
* @version:
|
|||
|
|
* @Author: sueRimn
|
|||
|
|
* @Date: 2019-09-19 09:10:57
|
|||
|
|
* @LastEditors : sueRimn
|
|||
|
|
* @LastEditTime : 2020-01-16 13:31:24
|
|||
|
|
*/
|
|||
|
|
let lensFlare = null,latlonMsg = null,
|
|||
|
|
lon = 117.191166, lat = 34.289749, zoom = 15000000; //
|
|||
|
|
/**
|
|||
|
|
* 常用配置项
|
|||
|
|
*/
|
|||
|
|
import SceneTree from './sceneTree.js';
|
|||
|
|
import Handler from './handler.js';
|
|||
|
|
import MouseManager from './mouseManager.js';
|
|||
|
|
export default class CONFIG {
|
|||
|
|
constructor(){}
|
|||
|
|
//数据目录
|
|||
|
|
static DATADIR = '/map/3d/data';
|
|||
|
|
//code目录
|
|||
|
|
static CODEDIR = '/map/3d/code';
|
|||
|
|
//cesiumApp存放目录
|
|||
|
|
static APPDIR = '/map/3d/static/Cesium1.62';
|
|||
|
|
//静态资源 图像视频文件目录
|
|||
|
|
static STATICDIR = '/map/3d/static';
|
|||
|
|
//外部资源 libs
|
|||
|
|
static LIBSDIR = '/map/libs';
|
|||
|
|
/**
|
|||
|
|
* cesium初始化配置
|
|||
|
|
* 配合场景树
|
|||
|
|
*/
|
|||
|
|
static INIT(viewer){
|
|||
|
|
//默认隐藏
|
|||
|
|
$('.cesium-viewer-animationContainer').hide();
|
|||
|
|
$('.cesium-viewer-timelineContainer').hide();
|
|||
|
|
//信息框
|
|||
|
|
$('.cesium-infoBox').hide();
|
|||
|
|
//cesium工具
|
|||
|
|
$('.cesium-viewer-toolbar').hide();
|
|||
|
|
//汉化
|
|||
|
|
CesiumZh.load();
|
|||
|
|
//帧率
|
|||
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$('.cesium-performanceDisplay-defaultContainer').hide();
|
|||
|
|
}, 1);
|
|||
|
|
//添加导航
|
|||
|
|
let options = {};
|
|||
|
|
options.defaultResetView = Cesium.Cartographic.fromCartesian(Cesium.Cartesian3.fromDegrees(lon, lat, 20000000));
|
|||
|
|
options.enableCompass= true;
|
|||
|
|
options.enableZoomControls= false;
|
|||
|
|
options.enableDistanceLegend= false;
|
|||
|
|
options.enableCompassOuterRing= true;
|
|||
|
|
viewer.extend(Cesium.viewerCesiumNavigationMixin,options);
|
|||
|
|
//生成光晕
|
|||
|
|
lensFlare = viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createLensFlareStage());
|
|||
|
|
lensFlare.enabled = false;
|
|||
|
|
//取消双击事件
|
|||
|
|
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
|||
|
|
//深度检测
|
|||
|
|
viewer.scene.globe.depthTestAgainstTerrain = false;
|
|||
|
|
//默认位置
|
|||
|
|
viewer.camera.setView({
|
|||
|
|
destination: Cesium.Cartesian3.fromDegrees(lon, lat, zoom)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Date formatting to a global form
|
|||
|
|
function localeDateTimeFormatter(datetime, viewModel, ignoredate) {
|
|||
|
|
var julianDT = new Cesium.JulianDate();
|
|||
|
|
Cesium.JulianDate.addHours(datetime, 8, julianDT)
|
|||
|
|
var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT)
|
|||
|
|
var objDT;
|
|||
|
|
if (ignoredate)
|
|||
|
|
objDT = '';
|
|||
|
|
else {
|
|||
|
|
objDT = new Date(gregorianDT.year, gregorianDT.month - 1, gregorianDT.day);
|
|||
|
|
objDT = gregorianDT.year + '年' + objDT.toLocaleString("zh-cn", { month: "short" }) + gregorianDT.day + '日';
|
|||
|
|
if (viewModel || gregorianDT.hour + gregorianDT.minute === 0)
|
|||
|
|
return objDT;
|
|||
|
|
objDT += ' ';
|
|||
|
|
}
|
|||
|
|
return objDT + Cesium.sprintf("%02d:%02d:%02d", gregorianDT.hour, gregorianDT.minute, gregorianDT.second);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function localeTimeFormatter(time, viewModel) {
|
|||
|
|
return localeDateTimeFormatter(time, viewModel, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var animationviewModel = viewer.animation.viewModel;
|
|||
|
|
var timeline = viewer.timeline;
|
|||
|
|
animationviewModel.dateFormatter = localeDateTimeFormatter;
|
|||
|
|
animationviewModel.timeFormatter = localeTimeFormatter;
|
|||
|
|
timeline.makeLabel = function (time) { return localeDateTimeFormatter(time) };
|
|||
|
|
//辅助工具
|
|||
|
|
//viewer.extend(Cesium.viewerCesiumInspectorMixin);
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 避免相机进入地下
|
|||
|
|
*/
|
|||
|
|
static TopGround(viewer){
|
|||
|
|
viewer.clock.onTick.addEventListener(function () {
|
|||
|
|
if(viewer.camera.pitch > 0){
|
|||
|
|
viewer.scene.screenSpaceCameraController.enableTilt = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
let mousePosition,startMousePosition;
|
|||
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
|||
|
|
handler.setInputAction(function(movement) {
|
|||
|
|
mousePosition=startMousePosition= Cesium.Cartesian3.clone(movement.position);
|
|||
|
|
handler.setInputAction(function(movement) {
|
|||
|
|
mousePosition = movement.endPosition;
|
|||
|
|
var y = mousePosition.y - startMousePosition.y;
|
|||
|
|
if(y>0){
|
|||
|
|
viewer.scene.screenSpaceCameraController.enableTilt = true;
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|||
|
|
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生成环境控制
|
|||
|
|
*/
|
|||
|
|
static crateSceneController(viewer) {
|
|||
|
|
let Options = function () {
|
|||
|
|
this.contrast = 128;
|
|||
|
|
this.brightness = -0.3;
|
|||
|
|
this.delta = 1;
|
|||
|
|
this.gamma = 3.5;
|
|||
|
|
this.enabled = false;
|
|||
|
|
this.highDynamicRange = true;
|
|||
|
|
this.shadows = false;
|
|||
|
|
}
|
|||
|
|
let option = new Options();
|
|||
|
|
let gui = new dat.GUI();
|
|||
|
|
gui.__closeButton.innerHTML = "收缩面板";
|
|||
|
|
|
|||
|
|
let bloom = viewer.scene.postProcessStages.bloom;
|
|||
|
|
|
|||
|
|
gui.add(option, 'highDynamicRange').name("高动态范围").onChange(function (value) {
|
|||
|
|
viewer.scene.highDynamicRange = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'gamma', 0, 5).name("伽马亮度").onChange(function (value) {
|
|||
|
|
viewer.scene.gamma = value;
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
gui.add(option, 'enabled').name("启用模糊").onChange(function (value) {
|
|||
|
|
bloom.enabled = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'contrast', -128, 128).name("对比度").onChange(function (value) {
|
|||
|
|
bloom.uniforms.contrast = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'brightness', -2, 2).name("光泽亮度").onChange(function (value) {
|
|||
|
|
bloom.uniforms.brightness = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'delta', -5, 5).name("因子(delta)").onChange(function (value) {
|
|||
|
|
bloom.uniforms.delta = value;
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
gui.add(option, 'shadows').name("启用阴影").onChange(function (value) {
|
|||
|
|
viewer.shadows = value;
|
|||
|
|
})
|
|||
|
|
$('.dg.ac').css('top', '10%');
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 生成场景树
|
|||
|
|
*/
|
|||
|
|
static createSceneTree(viewer) {
|
|||
|
|
let sceneTree = new SceneTree(viewer);
|
|||
|
|
let Options = function () {
|
|||
|
|
this.fog = true;
|
|||
|
|
this.lighting = false;
|
|||
|
|
this.lensFlare = false;
|
|||
|
|
this.groundAtmosphere = true;
|
|||
|
|
this.rain = false;
|
|||
|
|
this.snow = false;
|
|||
|
|
this.sun = true;
|
|||
|
|
this.skyBox = true;
|
|||
|
|
this.globe = true;
|
|||
|
|
this.sbstyle = false;
|
|||
|
|
this.depthTestAgainstTerrain = false;
|
|||
|
|
this.rotation = false;
|
|||
|
|
this.grid = false;
|
|||
|
|
this.tileGrid = false;
|
|||
|
|
this.mgrsGrid = false;
|
|||
|
|
this.navi = true;
|
|||
|
|
this.timeLine = false;
|
|||
|
|
this.info = false;
|
|||
|
|
this.sbjk = true;
|
|||
|
|
this.cesiumTool = false;
|
|||
|
|
this.radar = false;
|
|||
|
|
this.province = false;
|
|||
|
|
this.terrain = false;
|
|||
|
|
this.tiles = false;
|
|||
|
|
this.btnCut = function(){
|
|||
|
|
CONFIG.cutScene(viewer);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
let option = new Options();
|
|||
|
|
let gui = new dat.GUI();
|
|||
|
|
gui.__closeButton.innerHTML = "收缩面板";
|
|||
|
|
gui.add(option, 'fog').name("雾天").onChange(function (value) {
|
|||
|
|
sceneTree.build({"fog" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'lighting').name("昼夜").onChange(function (value) {
|
|||
|
|
sceneTree.build({"lighting" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'lensFlare').name("光晕").onChange(function (value) {
|
|||
|
|
lensFlare.enabled = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'groundAtmosphere').name("大气层").onChange(function (value) {
|
|||
|
|
sceneTree.build({"groundAtmosphere" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'rain').name("雨天").onChange(function (value) {
|
|||
|
|
sceneTree.build({"rain" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'snow').name("雪天").onChange(function (value) {
|
|||
|
|
sceneTree.build({"snow" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'sun').name("太阳").onChange(function (value) {
|
|||
|
|
viewer.scene.sun.show = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'skyBox').name("星空").onChange(function (value) {
|
|||
|
|
viewer.scene.skyBox.show = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'globe').name("地球").onChange(function (value) {
|
|||
|
|
viewer.scene.globe.show = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'sbstyle').name("鼠标十字").onChange(function (value) {
|
|||
|
|
sceneTree.build({"sbstyle" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'depthTestAgainstTerrain').name("深度检测").onChange(function (value) {
|
|||
|
|
viewer.scene.globe.depthTestAgainstTerrain = value;
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'rotation').name("地球自转").onChange(function (value) {
|
|||
|
|
sceneTree.build({"rotation" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'grid').name("经纬网").onChange(function (value) {
|
|||
|
|
sceneTree.build({"grid" : {"cmd":1,"flag":value}});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'tileGrid').name("标注网格").onChange(function (value) {
|
|||
|
|
sceneTree.build({"grid" : {"cmd":2,"flag":value}});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'mgrsGrid').name("军事网格").onChange(function (value) {
|
|||
|
|
sceneTree.build({"grid" : {"cmd":3,"flag":value}});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'navi').name("导航插件").onChange(function (value) {
|
|||
|
|
sceneTree.build({"navi" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'timeLine').name("时间轴").onChange(function (value) {
|
|||
|
|
sceneTree.build({"sjz" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'sbjk').name("鼠标位置").onChange(function (value) {
|
|||
|
|
sceneTree.build({"xjzt" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'cesiumTool').name("内置工具").onChange(function (value) {
|
|||
|
|
sceneTree.build({"cesiumTool" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'radar').name("全球雷达站").onChange(function (value) {
|
|||
|
|
sceneTree.build({"radar" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'province').name("全国省份").onChange(function (value) {
|
|||
|
|
sceneTree.build({"province" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'terrain').name("地形图").onChange(function (value) {
|
|||
|
|
sceneTree.build({"terrain" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'tiles').name("3d瓦片").onChange(function (value) {
|
|||
|
|
sceneTree.build({"_3dtiles" : value});
|
|||
|
|
})
|
|||
|
|
gui.add(option, 'btnCut').name("截取场景");
|
|||
|
|
$('.dg.ac').css('top', '10%');
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 截取场景
|
|||
|
|
*/
|
|||
|
|
static cutScene(viewer){
|
|||
|
|
let canvas = viewer.scene.canvas;
|
|||
|
|
let dataUrl = canvas.toDataURL("image/png"); //生成base64图片数据
|
|||
|
|
let newImg = document.createElement("img");
|
|||
|
|
newImg.src = dataUrl, newImg.width = 600, newImg.height = 500;
|
|||
|
|
let downloadIamge = function () {
|
|||
|
|
let a = document.createElement('a');
|
|||
|
|
a.download = '视图' + new Date().getTime(); //这边是文件名，可以自定义
|
|||
|
|
a.href = dataUrl;
|
|||
|
|
document.body.appendChild(a);
|
|||
|
|
a.click();
|
|||
|
|
document.body.removeChild(a);
|
|||
|
|
}
|
|||
|
|
downloadIamge();
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 鼠标信息
|
|||
|
|
*/
|
|||
|
|
static initMouseInfo(viewer){
|
|||
|
|
let handler = new Handler(viewer),mouseManager = new MouseManager(viewer);
|
|||
|
|
|
|||
|
|
//创建鼠标移动信息
|
|||
|
|
latlonMsg = new initLonLatMsg().init()
|
|||
|
|
function updateLatlonMsg(position){
|
|||
|
|
latlonMsg.lon = parseInt(position.lon);
|
|||
|
|
latlonMsg.lat = parseInt(position.lat);
|
|||
|
|
latlonMsg.height = parseInt(position.height);
|
|||
|
|
latlonMsg.pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2);
|
|||
|
|
latlonMsg.heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
|
|||
|
|
latlonMsg.roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2);
|
|||
|
|
latlonMsg.rate = $('.cesium-performanceDisplay-ms').text() + ' | ' + $('.cesium-performanceDisplay-fps').text();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//移动
|
|||
|
|
handler.Action(function (event) {
|
|||
|
|
let pickPosition = viewer.scene.pickPosition(event.endPosition);
|
|||
|
|
if(pickPosition == undefined){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
let latlonObj = mouseManager.piTerrainToModule(event.endPosition,"1")
|
|||
|
|
//修改鼠标位置
|
|||
|
|
updateLatlonMsg(latlonObj);
|
|||
|
|
}, handler.MOUSE_MOVE);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 鼠标坐标信息
|
|||
|
|
*/
|
|||
|
|
class initLonLatMsg {
|
|||
|
|
constructor(){}
|
|||
|
|
init(){
|
|||
|
|
$('.map-move-msg').append(`<div id="latlonMsg" style='float:right;padding-right:10px;'>
|
|||
|
|
<p class="data"> 帧率 : {{ rate }} </p><p class="data">经度 : {{ lon }}°</p><p class="data">纬度 : {{ lat }}°</p><p class="data">高度 : {{ height }}</p>
|
|||
|
|
<p class="data"> 航向 : {{ heading }}°</p><p class="data">俯仰 : {{ pitch }}°</p><p class="data">翻转 : {{ roll }}°</p></div>`);
|
|||
|
|
$('#latlonMsg p').css('color', 'white').css('margin', '3px').css('float', 'left');
|
|||
|
|
var latlonMsg = new Vue({
|
|||
|
|
el: '#latlonMsg',
|
|||
|
|
data: {
|
|||
|
|
lon: '',
|
|||
|
|
lat: '',
|
|||
|
|
height: '',
|
|||
|
|
heading: '',
|
|||
|
|
pitch: '',
|
|||
|
|
roll: '',
|
|||
|
|
rate: ''
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
latlonMsg.lon = 0.0;
|
|||
|
|
latlonMsg.lat = 0.0;
|
|||
|
|
latlonMsg.height = 0.0;
|
|||
|
|
latlonMsg.pitch = 0.0;
|
|||
|
|
latlonMsg.heading = 0.0;
|
|||
|
|
latlonMsg.roll = 0.0;
|
|||
|
|
latlonMsg.rate = 0.0 + ' | ' + 0.0;
|
|||
|
|
|
|||
|
|
return latlonMsg;
|
|||
|
|
}
|
|||
|
|
}
|