<html lang="en">
<head>
<meta charset="UTF-8"/>
<script src="Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
<script src="initMap.js"></script>
<style>
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>
<script>
var viewer=null;
var eText = [
{
text: "显示此处经纬度",
type: 'longlat'
},
{
text: "开启深度监测",
type: 'opendepth',
},
{
text: "关闭深度监测",
type: 'closedepth',
},
{
text: "初始视角",
type: "firstperspective",
},
{
text: "关闭",
type: "close",
}];
var cesiumContainer = null;
function load() {
cesiumContainer = document.getElementById("map");
console.log("cesiumContainer:",cesiumContainer)
//初始化地图
initMap();
//定位
var obj = {lng:118.0850887298584, lat: 24.439001083374023,eyeHeight:5000,pitch:-30,heading:0.0,time:1};
viewerFlyToLonLat(obj);
doProhibit();
loadRightClick();
}
// 禁用浏览器右键菜单
function doProhibit(){
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; //
}
//附加右击事件
function loadRightClick(){
var ellipsoid = viewer.scene.globe.ellipsoid;
var Handler = new Cesium.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);
// 地图坐标(弧度) 转 十进制度数 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);//海拔
latObj = {log:log_String,lat:lat_String,alt:alt_String,elec:elec_String}
}
// 判断点击位置是否有实体
loadUl(e.position);
/**
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);
}
/**
* 右键点击html
* @params {object} pos 屏幕坐标对象{x:122,y:444}
* @params {object} textArr 渲染文本数组对象
* @params {string} type 实体类型 undefined:空白区域
*/
function loadUl(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)
}
function rightliClick(type){
var divs = document.querySelectorAll(".contextmenu")
cesiumContainer.removeChild(divs[0]);
switch(type){
case 'longlat':
alert('经纬度:'+latObj.log+","+latObj.lat)
console.log("latObj:",latObj)
break;
case 'opendepth':
viewer.scene.globe.depthTestAgainstTerrain = true;
break;
case 'closedepth':
viewer.scene.globe.depthTestAgainstTerrain = false
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
该资源包的执行效果查看地址:https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“72.(cesium篇)cesium地图右击菜单”。如下载有问题,可联系博主。
资源推荐
资源详情
资源评论
收起资源包目录
72.(cesium篇)cesium地图右击菜单.zip (367个子文件)
widgets.css 22KB
lighter.css 5KB
InfoBoxDescription.css 3KB
Animation.css 2KB
CesiumInspector.css 2KB
BaseLayerPicker.css 2KB
Cesium3DTilesInspector.css 2KB
CesiumWidget.css 2KB
NavigationHelpButton.css 2KB
lighter.css 2KB
shared.css 2KB
SceneModePicker.css 2KB
InfoBox.css 1KB
Geocoder.css 1KB
Viewer.css 1KB
Timeline.css 1KB
ProjectionPicker.css 1KB
lighterShared.css 878B
lighter.css 863B
lighter.css 598B
lighter.css 391B
SelectionIndicator.css 332B
lighter.css 325B
lighter.css 263B
PerformanceWatchdog.css 250B
FullscreenButton.css 101B
VRButton.css 93B
info-loading.gif 723B
72.(cesium篇)cesium地图右击菜单.html 8KB
waterNormals.jpg 287KB
StarBurst.jpg 191KB
tycho2t3_80_mz.jpg 164KB
tycho2t3_80_py.jpg 149KB
tycho2t3_80_pz.jpg 149KB
tycho2t3_80_my.jpg 149KB
tycho2t3_80_px.jpg 120KB
tycho2t3_80_mx.jpg 116KB
DirtMask.jpg 111KB
waterNormalsSmall.jpg 33KB
moonSmall.jpg 18KB
2.jpg 16KB
2.jpg 16KB
2.jpg 16KB
3.jpg 15KB
1.jpg 15KB
3.jpg 15KB
0.jpg 14KB
1.jpg 13KB
1.jpg 13KB
1.jpg 13KB
3.jpg 12KB
1.jpg 12KB
1.jpg 12KB
2.jpg 12KB
0.jpg 12KB
3.jpg 12KB
3.jpg 12KB
3.jpg 12KB
2.jpg 11KB
2.jpg 11KB
1.jpg 11KB
1.jpg 11KB
2.jpg 11KB
3.jpg 11KB
0.jpg 10KB
0.jpg 10KB
0.jpg 10KB
3.jpg 10KB
1.jpg 10KB
1.jpg 10KB
0.jpg 9KB
0.jpg 9KB
1.jpg 9KB
0.jpg 9KB
0.jpg 8KB
0.jpg 8KB
2.jpg 8KB
0.jpg 8KB
0.jpg 7KB
0.jpg 7KB
1.jpg 7KB
0.jpg 6KB
Cesium.js 3.34MB
draco_decoder.js 771KB
google-earth-dbroot-parser.js 202KB
transcodeCRNToDXT.js 143KB
Transforms-a73b3b3b.js 105KB
draco_wasm_wrapper.js 64KB
GeometryPipeline-5e672526.js 29KB
createVerticesFromHeightmap.js 26KB
decodeGoogleEarthEnterprisePacket.js 25KB
Cartesian2-8417ca3d.js 22KB
inflate.js 22KB
FrustumGeometry-00e2e34e.js 19KB
createGroundPolylineGeometry.js 18KB
cesiumWorkerBootstrapper.js 17KB
createCorridorGeometry.js 16KB
deflate.js 16KB
createRectangleGeometry.js 15KB
EllipseGeometry-42ee4ae7.js 15KB
共 367 条
- 1
- 2
- 3
- 4
资源评论
- zhaoziqing2022-09-11这个资源总结的也太全面了吧,内容详实,对我帮助很大。
- 岭少2022-08-25资源值得借鉴的内容很多,那就浅学一下吧,值得下载!
- 只有Ctrl+C+V2022-10-20资源和描述一致,质量不错,解决了我的问题,感谢资源主。
- 追夢人生2022-06-10用户下载后在一定时间内未进行评价,系统默认好评。
GIS之家家长
- 粉丝: 621
- 资源: 139
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功