<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
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用户下载后在一定时间内未进行评价，系统默认好评。- jijike0012025-01-04这个资源对我启发很大，受益匪浅，学到了很多，谢谢分享~
GIS之家家长
- 粉丝: 718
最新资源
- Aestate-Python资源
- 网络营销和策划.pptx
- YKSwiftNetworking-Swift资源
- 三星中小企业网络安全解决方案.doc
- 通信原理教学.pptx
- 网络程序员工作计划样本.doc
- 我爱我家(主题网络)(20220208022735).pdf
- 公司通信调度系统技术规范及技术方案书.docx
- 网络营销与策划实践环节考核.doc
- 物联网简介幻灯片.ppt
- 华为网络认证工程师.docx
- 基于ARM的Buck-Boost双向DC-DC电源变换器：同步BUCK与BOOST电路级联的数字稳压技术
- 计算机科学与技术专业的知识体系与课程体系.pptx
- 网络推广协议范本最新.doc
- 2023年电子商务基础测试题库.doc
- 酒店住宿及消费管理系统数据库.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
