代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>cesium 右键菜单</title><script src=""></script><link href="" rel="stylesheet"><style>
html,body,#cesiumContainer{
padding:0;
margin:0;
width:100%;height:100%}
ul,li{
padding:0;
margin:0;}.contextmenu-ul{
background:rgba(43,44,47,.6);
border:1px solid #2b2c2f;
min-width:110px;
list-style: none;
font-size:14px;}.contextmenu-ul a{
border-bottom:1px solid rgba(128,128,128,0.5);
padding:6px 10px;
transition: background-color .25s;
display: block;
clear: both;
font-weight:400;
line-height:1.6;
white-space: nowrap;
color: #edffff;
text-decoration: none;}.contextmenu-ul li:last-child a{
border-bottom:none;}.contextmenu-ul a:hover{
background-color: #444d59;
color: #fff;
text-decoration: none;}</style></head><body><div id="cesiumContainer"></div><script>
Cesium.Ion.defaultAccessToken ='你的秘钥';var viewer =newCesium.Viewer('cesiumContainer',{
geocoder:false,
sceneModePicker:false,
navigationHelpButton:false,
baseLayerPicker:false,
homeButton:false,
fullscreenButton:false,
timeline:false,
animation:false,});
viewer.cesiumWidget.creditContainer.style.display ="none";var cesiumContainer = document.querySelector("#cesiumContainer"),
div,
latObj,
tileset,
entitiesId,
ellipsoid = viewer.scene.globe.ellipsoid;flyToSatrt()functionflyToSatrt(){
viewer.camera.flyTo({
destination :newCesium.Cartesian3.fromDegrees(117.224601,31.808241,4071.32),
orientation :{
heading : Cesium.Math.toRadians(356.7),
pitch : Cesium.Math.toRadians(-61),
roll :0.0}})}var eText =[{
text:"显示此处经纬度",
type:'longlat'},{
text:"开启深度监测",
type:'opendepth',},{
text:"关闭深度监测",
type:'closedepth',},{
text:"初始视角",
type:"firstperspective",}];loadentity()functionloadentity(){var i =[{
text:"删除对象",
type:"cesiumObj",
calback:function(e){var i = e.target;
i && viewer.entities.remove(i)}}];
viewer.entities.add({
name:"点",
position: Cesium.Cartesian3.fromDegrees(117.22193,31.823638,43.48),
billboard:{
image:"acting.png",
scale:1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND},
contextmenuItems: i
})
viewer.entities.add({
name:"线",
polyline:{
positions: Cesium.Cartesian3.fromDegreesArrayHeights([117.210308,31.82165,39.61,117.217186,31.819723,35,117.216931,31.828351,38.79,117.214205,31.828521,41.01,117.214378,31.825595,32.42]),
width:7,
material: Cesium.Color.YELLOW.withAlpha(.5),
clampToGround:!0},
contextmenuItems: i
})
viewer.entities.add({
name:"面",
polygon:{
hierarchy:newCesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([117.220448,31.826988,40.72,117.226041,31.826992,40.93,117.226094,31.831935,48.08,117.220457,31.831917,46.88,117.220448,31.834688,40.72])),
width:5,
material: Cesium.Color.YELLOW.withAlpha(.3),
classificationType: Cesium.ClassificationType.BOTH},
contextmenuItems: i
})
tileset = viewer.scene.primitives.add(newCesium.Cesium3DTileset({
url:"",}))
tileset.name ="教学楼";
tileset.type ="3dtiles"
tileset.contextmenuItems =[{
text:"删除模型",
type:"3dtiles",}]}functiondoProhibit(){if(window.Event)
document.captureEvents(Event.MOUSEUP);functionnocontextmenu(){
event.cancelBubble =true
event.returnvalue =false;returnfalse;}functionnorightclick(e){if(window.Event){if(e.which ==2|| e.which ==3)returnfalse;}elseif(event.button ==2|| event.button ==3){
event.cancelBubble =true
event.returnvalue =false;returnfalse;}}
document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;}doProhibit()loadRightClick();functionloadRightClick(){var Handler =newCesium.ScreenSpaceEventHandler(viewer.scene.canvas);
Handler.setInputAction(function(e){var cartesian = viewer.camera.pickEllipsoid(e.position,ellipsoid);if(cartesian){var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);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);
latObj ={log:log_String,lat:lat_String,alt:alt_String,elec:elec_String}}var pickedObject = viewer.scene.pick(e.position);if(pickedObject == undefined){loadUl(e.position)}else{if(pickedObject.tileset != undefined && pickedObject.tileset.type =="3dtiles"){loadUl(e.position,pickedObject.tileset.contextmenuItems,"3dtiles")}else{
entitiesId = pickedObject.id._id;var entity = viewer.entities.getById(entitiesId);if(entity != undefined){var type =""if(entity.billboard != undefined){
type ="billboard"}if(entity.polygon != undefined){
type ="polygon"}if(entity.polyline != undefined){
type ="polyline"}loadUl(e.position,entity._contextmenuItems,type)}}}}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);}functionloadUl(pos,textArr,type){var con, lis ='';if(textArr != undefined && type != undefined){for(var i=0; i<textArr.length; i++){
lis +=`<li class="li-item" data-index="20">
<a href="javascript:rightliClick( '${textArr[i].type}' )" >${textArr[i].text}</a>
</li>`}}else{var terrainStatus = 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 href="javascript:rightliClick( '${ eText[i].type }' )">${eText[i].text}</a>
</li>`}}
con =`<ul class="contextmenu-ul">${lis}</ul>`var divs = document.querySelectorAll(".contextmenu");if(divs.length !=0){
cesiumContainer.removeChild(divs[0])}
div = document.createElement('div')
div.className ="contextmenu"
div.style.top = pos.y +'px'
div.style.left = pos.x +'px'
div.style.position ='fixed'
div.innerHTML = con;
cesiumContainer.append(div)}functionrightliClick(type){var divs = document.querySelectorAll(".contextmenu")
cesiumContainer.removeChild(divs[0]);switch(type){case'longlat':alert('F12 Console latObj:')
console.log("latObj:",latObj)break;case'opendepth':
viewer.scene.globe.depthTestAgainstTerrain =true;break;case'closedepth':
viewer.scene.globe.depthTestAgainstTerrain =false;break;case'firstperspective':flyToSatrt()break;case'cesiumObj':var entity = viewer.entities.getById(entitiesId);if(entity != undefined){
viewer.entities.remove(entity)}break;case'3dtiles':
tileset.show =false;break;}}</script></body></html>
效果
发布评论