208 lines
7.3 KiB
JavaScript
208 lines
7.3 KiB
JavaScript
/**
|
||
* 右键菜单
|
||
*/
|
||
|
||
var eText = [
|
||
{
|
||
text: "显示此处经纬度",
|
||
type: 'longlat'
|
||
},
|
||
{
|
||
text: "开启深度监测",
|
||
type: 'opendepth',
|
||
},
|
||
{
|
||
text: "关闭深度监测",
|
||
type: 'closedepth',
|
||
},
|
||
{
|
||
text: "初始视角",
|
||
type: "firstperspective",
|
||
}];
|
||
|
||
let lon = 117.191166,
|
||
lat = 34.119749,
|
||
zoom = 30000000; //原始位置
|
||
import config from './config.js';
|
||
import HTML from './html.js';
|
||
import Camera from './camera.js';
|
||
export default class RightMenu{
|
||
constructor(opt){
|
||
if(!opt){
|
||
return false;
|
||
}
|
||
for(let key in opt){
|
||
this[key] = opt[key]
|
||
}
|
||
let $this = this;
|
||
let menu = new HTML().loadCSS(config.CODEDIR +'/BaseUI/css/menu.css');
|
||
this.camera = new Camera(this.viewer);
|
||
menu.onload = function(){
|
||
setTimeout(()=>{
|
||
$this.init($this.viewer);
|
||
},50)
|
||
}
|
||
}
|
||
init(viewer){
|
||
this.cesiumContainer = document.querySelector("#"+ this.dom);
|
||
this.div = '',
|
||
this.latObj = null,
|
||
this.tileset = null,
|
||
this.entitiesId = null,
|
||
this.ellipsoid = viewer.scene.globe.ellipsoid;
|
||
this.doProhibit(viewer);
|
||
this.loadRightClick(viewer);
|
||
}
|
||
//事件处理
|
||
doProhibit(viewer){
|
||
if(window.Event)
|
||
document.captureEvents(Event.MOUSEUP);
|
||
|
||
function nocontextmenu() {
|
||
event.cancelBubble = true
|
||
event.returnvalue = false;
|
||
return false;
|
||
}
|
||
|
||
function norightclick(e) {
|
||
if (window.Event){
|
||
if (e.which == 2 || e.which == 3)
|
||
return false;
|
||
}else if (event.button == 2 || event.button == 3) {
|
||
event.cancelBubble = true
|
||
event.returnvalue = false;
|
||
return false;
|
||
}
|
||
}
|
||
document.oncontextmenu = nocontextmenu; // for IE5+
|
||
document.onmousedown = norightclick; //
|
||
}
|
||
//右键生成参数
|
||
loadRightClick(viewer){
|
||
let $this = this;
|
||
var Handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
//点击关闭
|
||
Handler.setInputAction(function(e) {
|
||
var cartesian = $this.viewer.scene.camera.pickEllipsoid(e.position, $this.viewer.scene.globe.ellipsoid);
|
||
if(!cartesian){
|
||
return false;
|
||
}
|
||
var divs = document.querySelectorAll(".contextmenu")
|
||
cesiumContainer.removeChild(divs[0]);
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
//右键菜单
|
||
Handler.setInputAction(function(e) {
|
||
var cartesian = viewer.camera.pickEllipsoid(e.position,$this.ellipsoid);
|
||
if(cartesian){
|
||
// 苗卡尔椭球体的三维坐标 转 地图坐标（弧度）
|
||
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
||
// 地图坐标（弧度） 转 十进制度数 toFixed保留小数点后几位
|
||
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(8);//经度
|
||
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);//纬度
|
||
var alt_String = (viewer.camera.positionCartographic.height/1000).toFixed(2);//视角高
|
||
var elec_String = viewer.scene.globe.getHeight(cartographic).toFixed(4);//海拔
|
||
$this.latObj = {log:log_String,lat:lat_String,alt:alt_String,elec:elec_String}
|
||
}
|
||
// 判断点击位置是否有实体
|
||
var pickedObject = viewer.scene.pick(e.position);
|
||
|
||
if(pickedObject == undefined){
|
||
$this.loadUl(e.position)
|
||
}else{
|
||
if(pickedObject.tileset != undefined && pickedObject.tileset.type == "3dtiles"){
|
||
$this.loadUl(e.position,pickedObject.tileset.contextmenuItems,"3dtiles")
|
||
}else{
|
||
$this.entitiesId = pickedObject.id._id;
|
||
// 判断实体
|
||
var entity = viewer.entities.getById($this.entitiesId);
|
||
if(entity != undefined){
|
||
var type = ""
|
||
if(entity.billboard != undefined){
|
||
type = "billboard"
|
||
}
|
||
if(entity.polygon != undefined){
|
||
type = "polygon"
|
||
}
|
||
if(entity.polyline != undefined){
|
||
type = "polyline"
|
||
}
|
||
$this.loadUl(e.position,entity._contextmenuItems,type)
|
||
}
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||
}
|
||
/**
|
||
* 右键点击html
|
||
* @params {object} pos 屏幕坐标对象｛x:122,y:444｝
|
||
* @params {object} textArr 渲染文本数组对象
|
||
* @params {string} type 实体类型 undefined：空白区域
|
||
*/
|
||
loadUl(pos,textArr,type){
|
||
var con, lis = '',$this = this;;
|
||
if(textArr != undefined && type != undefined){
|
||
for(var i=0; i<textArr.length; i++){
|
||
lis += `<li class="li-item" data-index="20">
|
||
<a type="${ textArr[i].type }" href="#" >${textArr[i].text}</a>
|
||
</li>`
|
||
}
|
||
}else{
|
||
var terrainStatus = this.viewer.scene.globe.depthTestAgainstTerrain;
|
||
for(var i=0; i<eText.length; i++){
|
||
if(terrainStatus){
|
||
if(eText[i].type == 'opendepth'){continue}
|
||
}else{
|
||
if(eText[i].type == 'closedepth'){continue}
|
||
}
|
||
lis += `<li class="li-item" data-index="20">
|
||
<a type="${ eText[i].type }" href="#">${eText[i].text}</a>
|
||
</li>`
|
||
}
|
||
}
|
||
con = `<ul class="contextmenu-ul">${lis}</ul>`
|
||
var divs = document.querySelectorAll(".contextmenu");
|
||
if(divs.length != 0){
|
||
this.cesiumContainer.removeChild(divs[0])
|
||
}
|
||
this.div = document.createElement('div')
|
||
this.div.className = "contextmenu"
|
||
this.div.style.top = pos.y + 'px'
|
||
this.div.style.left = pos.x + 'px'
|
||
this.div.style.position = 'fixed'
|
||
this.div.innerHTML = con;
|
||
this.cesiumContainer.append(this.div);
|
||
|
||
//监听事件
|
||
$('.li-item a').on('click',function(){
|
||
let type = $(this).attr('type');
|
||
if(type)$this.rightliClick(type)
|
||
});
|
||
|
||
}
|
||
|
||
/**
|
||
* 处理事件
|
||
* @param {*} type
|
||
*/
|
||
rightliClick(type){
|
||
let $this = this;
|
||
var divs = document.querySelectorAll(".contextmenu")
|
||
cesiumContainer.removeChild(divs[0]);
|
||
switch(type){
|
||
case 'longlat':
|
||
alert(JSON.stringify($this.latObj))
|
||
break;
|
||
case 'opendepth':
|
||
$this.viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
break;
|
||
case 'closedepth':
|
||
$this.viewer.scene.globe.depthTestAgainstTerrain = false;
|
||
break;
|
||
case 'firstperspective':
|
||
//默认位置
|
||
$this.camera.flyTo2(Cesium.Cartesian3.fromDegrees(lon, lat, 20000000));
|
||
break;
|
||
}
|
||
}
|
||
|
||
} |