三维地图的加载以及基本功能的开发
注意属性气泡功能一定要设置图层可选中：
//优化S3M模型加载 layers.forEach(function(ele){ // 设置图层为可选中状态 ele.selectEnabled = true; ele.clearMemoryImmediately=false; ele.indexedDBSetting.isGeoTilesRootNodeSave=true; ele.indexedDBSetting.isGeoTilesSave=true; });
地图加载，以及基本功能开发：
var viewer; var widget; var scene; var clampMode; var handler;// 空间模式 var handlerDis, handlerArea, handlerHeight,handlerPolygon; function onload(Cesium) { viewer = new Cesium.Viewer('cesiumContainer', { showRenderLoopErrors : false, shouldAnimate : true, selectionIndicator : false, animation : false, baseLayerPicker : true, geocoder : false, timeline : false, sceneModePicker : true, navigationHelpButton : false, infoBox : false, fullscreenButton : true }); clampMode = 0; // 空间模式 scene = viewer.scene; widget = viewer.cesiumWidget; /* viewer.pickEvent.addEventListener(pick);*/ var globe = viewer.scene.globe; viewer.scene.undergroundMode = true; //设置开启地下场景 viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000;//设置相机最小缩放距离,距离地表-1000米 viewer.scene.terrainProvider.isCreateSkirt = false; // 关闭裙边 // 添加地下管理模型 var promise = scene.open(URL_CONFIG.SCENE_GX); Cesium.when(promise, function(layers) { debugger; if (!scene.pickPositionSupported) { alert('不支持深度拾取,属性查询功能无法使用！'); } var overGroundLayer1 = scene.layers.find('ZHELW@ZHDHB'); var overGroundLayer2 = scene.layers.find('ZHDVEG@ZHDHB'); var overGroundLayer3 = scene.layers.find('ZHDTRA@ZHDHB'); var overGroundLayer4 = scene.layers.find('ZHDTER@ZHDHB'); var overGroundLayer5 = scene.layers.find('ZHDOTH@ZHDHB'); var overGroundLayer6 = scene.layers.find('ZHDBUI@ZHDHB'); //优化S3M模型加载 layers.forEach(function(ele){ // 设置图层为可选中状态 ele.selectEnabled = true; ele.clearMemoryImmediately=false; ele.indexedDBSetting.isGeoTilesRootNodeSave=true; ele.indexedDBSetting.isGeoTilesSave=true; }); //设置相机视角 viewer.scene.camera.setView({ destination : new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083), orientation : { heading : Cesium.Math.toRadians(321.4777704143403), pitch : Cesium.Math.toRadians(-40.06076410592053), roll : Cesium.Math.toRadians(0.0018310677742497117) } }); var viewModel = { //监听滑动条变化，改变alpha的值，设置地表透明度 overGroundAlpha : 1 }; debugger; Cesium.knockout.track(viewModel); var toolbar = document.getElementById('toolbar'); Cesium.knockout.applyBindings(viewModel, toolbar); Cesium.knockout.getObservable(viewModel,'overGroundAlpha').subscribe(// 设置地表图层透明度 function(newValue) { overGroundLayer1.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer2.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer3.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer4.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer5.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer6.style3D.fillForeColor.alpha = parseFloat(newValue); } ); }, function(e) { if (widget._showRenderLoopErrors) { var title = '渲染时发生错误，已停止渲染。'; widget.showErrorPanel(title, undefined, e); } }); $(".cesium-viewer-toolbar").hide(); //初始化测量距离 handlerDis = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Distance, clampMode); //注册测距功能事件 handlerDis.measureEvt.addEventListener(function(result) { var dis = Number(result.distance); var distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis .toFixed(2) + 'm'; handlerDis.disLabel.text = '距离:' + distance; }); handlerDis.activeEvt.addEventListener(function(isActive) { if (isActive == true) { viewer.enableCursorStyle = false; viewer._element.style.cursor = ''; $('body').removeClass('measureCur').addClass('measureCur'); } else { viewer.enableCursorStyle = true; $('body').removeClass('measureCur'); } }); //初始化测量面积 handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode); handlerArea.measureEvt.addEventListener(function(result) { var mj = Number(result.area); var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj .toFixed(2) + '㎡' handlerArea.areaLabel.text = '面积:' + area; }); handlerArea.activeEvt.addEventListener(function(isActive) { if (isActive == true) { viewer.enableCursorStyle = false; viewer._element.style.cursor = ''; $('body').removeClass('measureCur').addClass('measureCur'); } else { viewer.enableCursorStyle = true; $('body').removeClass('measureCur'); } }); //初始化测量高度 handlerHeight = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.DVH); handlerHeight.measureEvt .addEventListener(function(result) { var distance = result.distance > 1000 ? (result.distance / 1000) .toFixed(2) + 'km' : result.distance + 'm'; var vHeight = result.verticalHeight > 1000 ? (result.verticalHeight / 1000) .toFixed(2) + 'km' : result.verticalHeight + 'm'; var hDistance = result.horizontalDistance > 1000 ? (result.horizontalDistance / 1000) .toFixed(2) + 'km' : result.horizontalDistance + 'm'; handlerHeight.disLabel.text = '空间距离:' + distance; handlerHeight.vLabel.text = '垂直高度:' + vHeight; handlerHeight.hLabel.text = '水平距离:' + hDistance; }); handlerHeight.activeEvt.addEventListener(function(isActive) { if (isActive == true) { viewer.enableCursorStyle = false; viewer._element.style.cursor = ''; $('body').removeClass('measureCur').addClass('measureCur'); } else { viewer.enableCursorStyle = true; $('body').removeClass('measureCur'); } }); //测距 function measureDistance() { debugger; deactiveAll(); handlerDis && handlerDis.activate(); } //测面 function measureArea() { deactiveAll(); handlerArea && handlerArea.activate(); } //测高 function measureHeight() { deactiveAll(); handlerHeight && handlerHeight.activate(); } //清除功能 function clear3dFeatures() { viewer.entities.removeAll(); handlerDis && handlerDis.clear(); handlerArea && handlerArea.clear(); handlerHeight && handlerHeight.clear(); handlerPolygon && handlerPolygon.clear(); handlerPoint && handlerPoint.clear(); handler && handler.destroy(); $("#popup00").hide(); } function deactiveAll() { handlerDis && handlerDis.deactivate(); handlerArea && handlerArea.deactivate(); handlerHeight && handlerHeight.deactivate(); handlerPolygon && handlerPolygon.deactivate(); } //三维定位 function fly3D(x,y,z){ /*new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083)*/ viewer.camera.flyTo({ destination : new Cesium.Cartesian3.fromDegrees(x,y,100), /* orientation : { heading : Cesium.Math.toRadians(321.4777704143403), pitch : Cesium.Math.toRadians(100.06076410592053), roll : Cesium.Math.toRadians(0.0018310677742497117) }*/ }); }; // 全幅 function fullMap3D(){ /*new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083)*/ viewer.camera.flyTo({ destination : new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083), orientation : { heading : Cesium.Math.toRadians(321.4777704143403), pitch : Cesium.Math.toRadians(-40.06076410592053), roll : Cesium.Math.toRadians(0.0018310677742497117) } }); }; // 关闭气泡 function closeThisBubble(){ $("#popup00").hide(); }; //点击事件 function clickMap(){ handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function (e) { debugger; // 获取点击位置笛卡尔坐标 var position = scene.pickPosition(e.position); //将笛卡尔坐标转化为经纬度坐标 var cartographic = Cesium.Cartographic.fromCartesian(position); var longitude = Cesium.Math.toDegrees(cartographic.longitude); var latitude = Cesium.Math.toDegrees(cartographic.latitude); var height = cartographic.height; if(height < 0) { height = 0; } var selectedLayer= viewer.scene.layers.getSelectedLayer(); var names="name"; if(selectedLayer==undefined||selectedLayer[names]==undefined){ return; } var name=selectedLayer.name;//name = "PL_DX@PipeLine" var smid=selectedLayer.getSelection();//smid = ["105"] /* var smx=selectedLayer.lon; var smy=selectedLayer.lat;*/ var smId=parseInt(smid[0]); var url1=ftpIp+"/pms-servicesite/pipeservices/pipedatas/"; var data1; var data2; $.ajax({ url : url1, type:"get", async: false, dataType : 'json', data:{}, success : function(data) { data1=data; }, error : function(msg) { } }); var gxType=null; for(var i=0;i<data1.length;i++){ if(name==data1[i].pipeDataset){ gxType=data1[i].pkid; } } if(gxType==null){ /*alert("");*/ return; } var url2=ftpIp+"/pms-servicesite/pipeservices/pipedatas/"+gxType+"/line/features?filter=SMID="+smId; $.ajax({ url : url2, type:"get", async: false, dataType : 'json', data:{}, success : function(data) { debugger; data2=data; }, error : function(msg) { } }); var data3; debugger; if(data2.rows!=null){ data3=data2.rows[0]; } else { alert("无数据"); } var divId="popup00"; $("#"+divId).remove(); debugger; var EH = data3.E_H+""; var SH = data3.S_H+""; if(EH.length>5){ EH = EH.substring(0,5); } if(SH.length>5){ SH = SH.substring(0,5) } var bubble = $("<div id='"+divId+"' class='bubble'><div class='iconClose'><i class='iconfont icon-guanbi' onclick='closeThisBubble(this)'></i></div></div>"); var bubbleDiv ="<div class='popup-main'>"; if(data3.E_H==null){ bubbleDiv+="<p>终点高程(米)：无</p>"; }else{ bubbleDiv+="<p>终点高程(米)："+EH+"</p>"; } if(data3.MATERIAL==null){ bubbleDiv+="<p> 材质 ：无</p>"; }else{ bubbleDiv+="<p> 材质 ："+data3.MATERIAL+"</p>"; } /* if(data3.REMARK==null){ bubbleDiv+="<p> 备注 ：无</p>"; }else{ bubbleDiv+="<p> 备注 ："+data3.REMARK+"</p>"; } */ if(data3.S_H==null){ bubbleDiv+="<p>起点高程(米)：</p>"; }else{ bubbleDiv+="<p>起点高程(米)："+SH+"</p>"; } if(data3.SSPIPEWIDTH==null){ bubbleDiv+="<p> 宽(毫米) ：无</p>"; }else{ bubbleDiv+="<p> 宽(毫米) ："+data3.SSPIPEWIDTH+"</p>"; } if(data3.SSPIPEHEIGHT==null){ bubbleDiv+="<p> 高(毫米) ：无</p></div>"; }else{ bubbleDiv+="<p> 高(毫米) ："+data3.SSPIPEHEIGHT+"</p></div>"; } bubble.append(bubbleDiv); $(viewer._element).append(bubble); /*bubble.width = "20px"; bubble.height = "20px";*/ var position = Cesium.Cartesian3.fromDegrees(parseFloat(longitude), parseFloat(latitude),parseFloat(height)); //气泡样式 var commonBubble = new CommonBubble(viewer.scene,divId); //气泡位置 commonBubble.showAt(position); //气泡显示 commonBubble.visibility(true); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }
var viewer; var widget; var scene; var clampMode; var handler;// 空间模式 var handlerDis, handlerArea, handlerHeight,handlerPolygon; function onload(Cesium) { viewer = new Cesium.Viewer('cesiumContainer', { showRenderLoopErrors : false, shouldAnimate : true, selectionIndicator : false, animation : false, baseLayerPicker : true, geocoder : false, timeline : false, sceneModePicker : true, navigationHelpButton : false, infoBox : false, fullscreenButton : true }); clampMode = 0; // 空间模式 scene = viewer.scene; widget = viewer.cesiumWidget; /* viewer.pickEvent.addEventListener(pick);*/ var globe = viewer.scene.globe; viewer.scene.undergroundMode = true; //设置开启地下场景 viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000;//设置相机最小缩放距离,距离地表-1000米 viewer.scene.terrainProvider.isCreateSkirt = false; // 关闭裙边 // 添加地下管理模型 var promise = scene.open(URL_CONFIG.SCENE_GX); Cesium.when(promise, function(layers) { debugger; if (!scene.pickPositionSupported) { alert('不支持深度拾取,属性查询功能无法使用！'); } var overGroundLayer1 = scene.layers.find('ZHELW@ZHDHB'); var overGroundLayer2 = scene.layers.find('ZHDVEG@ZHDHB'); var overGroundLayer3 = scene.layers.find('ZHDTRA@ZHDHB'); var overGroundLayer4 = scene.layers.find('ZHDTER@ZHDHB'); var overGroundLayer5 = scene.layers.find('ZHDOTH@ZHDHB'); var overGroundLayer6 = scene.layers.find('ZHDBUI@ZHDHB'); //设置相机视角 viewer.scene.camera.setView({ destination : new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083), orientation : { heading : Cesium.Math.toRadians(321.4777704143403), pitch : Cesium.Math.toRadians(-40.06076410592053), roll : Cesium.Math.toRadians(0.0018310677742497117) } }); var viewModel = { //监听滑动条变化，改变alpha的值，设置地表透明度 overGroundAlpha : 1 }; debugger; Cesium.knockout.track(viewModel); var toolbar = document.getElementById('toolbar'); Cesium.knockout.applyBindings(viewModel, toolbar); Cesium.knockout.getObservable(viewModel,'overGroundAlpha').subscribe(// 设置地表图层透明度 function(newValue) { overGroundLayer1.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer2.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer3.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer4.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer5.style3D.fillForeColor.alpha = parseFloat(newValue); overGroundLayer6.style3D.fillForeColor.alpha = parseFloat(newValue); } ); }, function(e) { if (widget._showRenderLoopErrors) { var title = '渲染时发生错误，已停止渲染。'; widget.showErrorPanel(title, undefined, e); } }); $(".cesium-viewer-toolbar").hide(); //初始化测量距离 handlerDis = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Distance, clampMode); //注册测距功能事件 handlerDis.measureEvt.addEventListener(function(result) { var dis = Number(result.distance); var distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis .toFixed(2) + 'm'; handlerDis.disLabel.text = '距离:' + distance; }); handlerDis.activeEvt.addEventListener(function(isActive) { if (isActive == true) { viewer.enableCursorStyle = false; viewer._element.style.cursor = ''; $('body').removeClass('measureCur').addClass('measureCur'); } else { viewer.enableCursorStyle = true; $('body').removeClass('measureCur'); } }); //初始化测量面积 handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode); handlerArea.measureEvt.addEventListener(function(result) { var mj = Number(result.area); var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj .toFixed(2) + '㎡' handlerArea.areaLabel.text = '面积:' + area; }); handlerArea.activeEvt.addEventListener(function(isActive) { if (isActive == true) { viewer.enableCursorStyle = false; viewer._element.style.cursor = ''; $('body').removeClass('measureCur').addClass('measureCur'); } else { viewer.enableCursorStyle = true; $('body').removeClass('measureCur'); } }); //初始化测量高度 handlerHeight = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.DVH); handlerHeight.measureEvt .addEventListener(function(result) { var distance = result.distance > 1000 ? (result.distance / 1000) .toFixed(2) + 'km' : result.distance + 'm'; var vHeight = result.verticalHeight > 1000 ? (result.verticalHeight / 1000) .toFixed(2) + 'km' : result.verticalHeight + 'm'; var hDistance = result.horizontalDistance > 1000 ? (result.horizontalDistance / 1000) .toFixed(2) + 'km' : result.horizontalDistance + 'm'; handlerHeight.disLabel.text = '空间距离:' + distance; handlerHeight.vLabel.text = '垂直高度:' + vHeight; handlerHeight.hLabel.text = '水平距离:' + hDistance; }); handlerHeight.activeEvt.addEventListener(function(isActive) { if (isActive == true) { viewer.enableCursorStyle = false; viewer._element.style.cursor = ''; $('body').removeClass('measureCur').addClass('measureCur'); } else { viewer.enableCursorStyle = true; $('body').removeClass('measureCur'); } }); //测距 function measureDistance() { debugger; deactiveAll(); handlerDis && handlerDis.activate(); } //测面 function measureArea() { deactiveAll(); handlerArea && handlerArea.activate(); } //测高 function measureHeight() { deactiveAll(); handlerHeight && handlerHeight.activate(); } //清除功能 function clear3dFeatures() { viewer.entities.removeAll(); handlerDis && handlerDis.clear(); handlerArea && handlerArea.clear(); handlerHeight && handlerHeight.clear(); handlerPolygon && handlerPolygon.clear(); handlerPoint && handlerPoint.clear(); handler && handler.destroy(); $("#popup00").hide(); } function deactiveAll() { handlerDis && handlerDis.deactivate(); handlerArea && handlerArea.deactivate(); handlerHeight && handlerHeight.deactivate(); handlerPolygon && handlerPolygon.deactivate(); } //三维定位 function fly3D(x,y,z){ /*new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083)*/ viewer.camera.flyTo({ destination : new Cesium.Cartesian3.fromDegrees(x,y,100), /* orientation : { heading : Cesium.Math.toRadians(321.4777704143403), pitch : Cesium.Math.toRadians(100.06076410592053), roll : Cesium.Math.toRadians(0.0018310677742497117) }*/ }); }; // 全幅 function fullMap3D(){ /*new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083)*/ viewer.camera.flyTo({ destination : new Cesium.Cartesian3.fromDegrees(113.80856494043454,34.78488948680121,1083), orientation : { heading : Cesium.Math.toRadians(321.4777704143403), pitch : Cesium.Math.toRadians(-40.06076410592053), roll : Cesium.Math.toRadians(0.0018310677742497117) } }); }; // 关闭气泡 function closeThisBubble(){ $("#popup00").hide(); }; //点击事件 function clickMap(){ handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function (e) { debugger; // 获取点击位置笛卡尔坐标 var position = scene.pickPosition(e.position); //将笛卡尔坐标转化为经纬度坐标 var cartographic = Cesium.Cartographic.fromCartesian(position); var longitude = Cesium.Math.toDegrees(cartographic.longitude); var latitude = Cesium.Math.toDegrees(cartographic.latitude); var height = cartographic.height; if(height < 0) { height = 0; } var selectedLayer= viewer.scene.layers.getSelectedLayer(); var names="name"; if(selectedLayer==undefined||selectedLayer[names]==undefined){ return; } var name=selectedLayer.name;//name = "PL_DX@PipeLine" var smid=selectedLayer.getSelection();//smid = ["105"] /* var smx=selectedLayer.lon; var smy=selectedLayer.lat;*/ var smId=parseInt(smid[0]); var url1=ftpIp+"/pms-servicesite/pipeservices/pipedatas/"; var data1; var data2; $.ajax({ url : url1, type:"get", async: false, dataType : 'json', data:{}, success : function(data) { data1=data; }, error : function(msg) { } }); var gxType=null; for(var i=0;i<data1.length;i++){ if(name==data1[i].pipeDataset){ gxType=data1[i].pkid; } } if(gxType==null){ /*alert("");*/ return; } var url2=ftpIp+"/pms-servicesite/pipeservices/pipedatas/"+gxType+"/line/features?filter=SMID="+smId; $.ajax({ url : url2, type:"get", async: false, dataType : 'json', data:{}, success : function(data) { debugger; data2=data; }, error : function(msg) { } }); var data3; debugger; if(data2.rows!=null){ data3=data2.rows[0]; } else { alert("无数据"); } var divId="popup00"; $("#"+divId).remove(); debugger; var EH = data3.E_H+""; var SH = data3.S_H+""; if(EH.length>5){ EH = EH.substring(0,5); } if(SH.length>5){ SH = SH.substring(0,5) } var bubble = $("<div id='"+divId+"' class='bubble'><div class='iconClose'><i class='iconfont icon-guanbi' onclick='closeThisBubble(this)'></i></div></div>"); var bubbleDiv ="<div class='popup-main'>"; if(data3.E_H==null){ bubbleDiv+="<p>终点高程(米)：无</p>"; }else{ bubbleDiv+="<p>终点高程(米)："+EH+"</p>"; } if(data3.MATERIAL==null){ bubbleDiv+="<p> 材质 ：无</p>"; }else{ bubbleDiv+="<p> 材质 ："+data3.MATERIAL+"</p>"; } /* if(data3.REMARK==null){ bubbleDiv+="<p> 备注 ：无</p>"; }else{ bubbleDiv+="<p> 备注 ："+data3.REMARK+"</p>"; } */ if(data3.S_H==null){ bubbleDiv+="<p>起点高程(米)：</p>"; }else{ bubbleDiv+="<p>起点高程(米)："+SH+"</p>"; } if(data3.SSPIPEWIDTH==null){ bubbleDiv+="<p> 宽(毫米) ：无</p>"; }else{ bubbleDiv+="<p> 宽(毫米) ："+data3.SSPIPEWIDTH+"</p>"; } if(data3.SSPIPEHEIGHT==null){ bubbleDiv+="<p> 高(毫米) ：无</p></div>"; }else{ bubbleDiv+="<p> 高(毫米) ："+data3.SSPIPEHEIGHT+"</p></div>"; } bubble.append(bubbleDiv); $(viewer._element).append(bubble); /*bubble.width = "20px"; bubble.height = "20px";*/ var position = Cesium.Cartesian3.fromDegrees(parseFloat(longitude), parseFloat(latitude),parseFloat(height)); //气泡样式 var commonBubble = new CommonBubble(viewer.scene,divId); //气泡位置 commonBubble.showAt(position); //气泡显示 commonBubble.visibility(true); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }
