html要引入的js文件
<!-- webgl中cs的引入--> <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css"> <link rel="stylesheet" href="Build/Cesium/Widgets/pretty.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-table.css"> <link rel="stylesheet" href="javascript/zTree/css/zTreeStyle/zTreeStyle.css"> <link rel="stylesheet" href="font/iconfont.css"> <link rel="stylesheet" href="css/bubble.css"> <!-- index界面自己的cs--> <link rel="stylesheet" href="css/index.css"> <script type="text/javascript" src="javascript/jquery.min.js"></script> <script type="text/javascript" src="javascript/bootstrap.min.js"></script> <script type="text/javascript" src="javascript/bootstrap-table.min.js"></script> <!-- webgl关键js引入,引入的其实就是javascript文件下的main.js,在main.js中的path路径下,又写了其他的js文件的引入,所以真正引入的是main中的js文件。注意引入时要进mian.js里看一下path下的引入路径对否,可能有误--> <script type="text/javascript" src="javascript/require.min.js" data-main="javascript/main"></script> <!-- iserver中sql关键js引入--> <script type="text/javascript" src="js/supermap/SuperMap.Include.js"></script> <!-- 三维出图js--> <script type="text/javascript" src="js/bn_webGl.js"></script> <!-- 主页面自己的点击事件js--> <script type="text/javascript" src="js/index.js"></script> <!-- 气泡引入--> <script type="text/javascript" src="js/CommonBubble.js"></script>
属性查询弹出气泡一定要在三维出图时设置图层可选中:
layers.forEach(function(ele){ // 设置图层为可选中状态 ele.selectEnabled = true; ele.clearMemoryImmediately=false; ele.indexedDBSetting.isGeoTilesRootNodeSave=true; ele.indexedDBSetting.isGeoTilesSave=true; });
js代码:
// 拾取属性 function select(){ handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function (e) { // 获取点击位置笛卡尔坐标 var position = scene.pickPosition(e.position); // var pick = viewer.scene.pick(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; // 获取选中的模型 var selectedLayer = viewer.scene.layers.getSelectedLayer(); var modelSelected,layerName,dataSetName; // 没有选中则返回,选中则查询 if(selectedLayer == undefined||selectedLayer["name"] == undefined){ return; }else{ modelSelected = selectedLayer.getSelection(); // 获取图层名PL_RL@TAIBAI layerName = selectedLayer.name; // 处理成查询的格式,["TAIBAI:PL_RL"],数据源是TAIBAI,数据集是PL_RL //http://127.0.0.1:8090/iserver/services/data-pipidata/rest/data/datasources/TAIBAI/datasets/PL_RL,数据源是TAIBAI,数据集是PL_RL dataSetName = ‘["‘+layerName.substring(layerName.indexOf("@")+1,layerName.length)+‘:‘+layerName.substring(0,layerName.indexOf("@"))+‘"]‘; } // 拼接filter条件,smid=0 var filter=‘smid=‘+modelSelected[0]; // 参数分别是url,过滤条件,dataSetName queryBySql("http://127.0.0.1:8090/iserver/services/data-pipidata/rest/data", filter, dataSetName, function (result) { debugger; var data = result.result.features[0].attributes; var material = data.MATERIAL; // 管径 毫米 var ds = data.D_S; // 终点高程 var eh = data.E_H; // 起点高程 var sh = data.S_H; var divId="popup00"; $("#"+divId).remove(); 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‘>"; bubbleDiv+=" <p>材质: "+material+"</p>"; bubbleDiv+=" <p>起点高程(米)"+sh+"</p>"; bubbleDiv+=" <p>终点高程(米):"+eh+"</p>"; bubbleDiv+=" <p>管径(毫米): "+ds+"</p>"; debugger; bubble.append(bubbleDiv); $(viewer._element).append(bubble); 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); } // iserver的sql查询 function queryBySql(url, attributeFilter, datasetNames, processCompleted, processFailed) { var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams; getFeatureParam = new SuperMap.REST.FilterParameter({ attributeFilter: attributeFilter, }); getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({ queryParameter: getFeatureParam, toIndex: -1, // returnContent: false, datasetNames: datasetNames }); getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url, { eventListeners: { "processCompleted": processCompleted, "processFailed": processFailed } }); getFeatureBySQLService.processAsync(getFeatureBySQLParams); }