增加模型属性显示,修改，增加选中高亮

test/Build/Static/js/main/Popup.js

@@ -14,7 +14,7 @@ function Popup(viewer) {
     _self.contentTxT = null;
     _self.dataUl=null;
     _self.editBtn=null;
-    _self.propsSubmit=null;
+    _self.propsSubmitBtn=null;
     _self.isPropsEdit=false;
 
 
@@ -72,12 +72,12 @@ function Popup(viewer) {
         propsSubmit.style.display="none";
         propsSubmit.type="button";
         propsSubmit.value="确定";
-        _self.propsSubmit=propsSubmit;
+        _self.propsSubmitBtn=propsSubmit;
         $(propsSubmit).hover(function(){
             $(this).toggleClass("popup-icon-hover");
         });
         propsSubmit.onclick=function(){
-            _self.submitProps();
+            _self.submitProps($(_self.propsSubmitBtn).attr("tag"));
         }
 
         var contentDiv = document.createElement("div");
@@ -89,7 +89,7 @@ function Popup(viewer) {
         dataDiv.appendChild(dataUl);
         contentDiv.appendChild(dataDiv);
         content.appendChild(contentDiv);
-        content.appendChild(_self.propsSubmit);
+        content.appendChild(_self.propsSubmitBtn);
         popup.appendChild(content);
         _self.overlay.appendChild(popup);
         document.body.appendChild(_self.overlay);
@@ -111,8 +111,7 @@ function Popup(viewer) {
      * 设置popou绑定数据
      * @param data popup中的数据
      */
-    Popup.prototype.setData = function (data) {
-        let txt = "";
+    Popup.prototype.setData = function (data,tag) {
         _self.data = data;
         $(_self.dataUl).empty();
         for (let val in data) {
@@ -124,10 +123,16 @@ function Popup(viewer) {
                 case"name":cnStr="名字 :";break;
                 case"x":cnStr="经度 :";break;
                 case"y":cnStr="纬度 :";break;
+                case"area":cnStr="面积 :";break;
+                case"zhouchang":cnStr="周长 :";break;
+                case"zixin_x":cnStr="质心 X:";break;
+                case"zhixin_y":cnStr="质心 Y :";break;
+                case"height":cnStr="高度 :";break;
                 default:cnStr=val;
             }
             let dataLi="<li>"+cnStr+"<input name="+val+" gid="+data['gid']+" value="+data[val]+" disabled='disabled'></li>";
             $(_self.dataUl).append(dataLi);
+            $(_self.propsSubmitBtn).attr("tag",tag);
 
         }
     };
@@ -136,14 +141,14 @@ function Popup(viewer) {
      * @param position 气泡框位置
      * @param data 绑定气泡框中的内容
      */
-    Popup.prototype.show = function (position, data) {
-        _self.setData(data);
+    Popup.prototype.show = function (position, data,tag) {
+        _self.setData(data,tag);
         _self.isShow = true;
         if (position) {
             _self.position = position;
         }
         $(_self.editBtn).removeClass("popup-icon-hover");
-        _self.propsSubmit.style.display="none";
+        _self.propsSubmitBtn.style.display="none";
         _self.isPropsEdit=false;
     };
 
@@ -151,7 +156,7 @@ function Popup(viewer) {
     Popup.prototype.edit=function(){
         _self.isPropsEdit=!_self.isPropsEdit;
         if(_self.isPropsEdit){
-            $(_self.propsSubmit).css("display","block");
+            $(_self.propsSubmitBtn).css("display","block");
             $(_self.editBtn).addClass("popup-icon-hover");
             $(_self.dataUl).find("input").each(function(index){
                 $(this).removeAttr("disabled").css("border","2px solid gray");
@@ -160,16 +165,23 @@ function Popup(viewer) {
                 }
             })
         }else{
-            $(_self.propsSubmit).css("display","none");
+            $(_self.propsSubmitBtn).css("display","none");
             $(_self.editBtn).removeClass("popup-icon-hover");
             $(_self.dataUl).find("input").each(function(){
                 $(this).attr("disabled","disabled").css("border","none");
             })
         }
     }
-    Popup.prototype.submitProps=function(){
+    Popup.prototype.submitProps=function(tag){
+        var nameKey="";
+        var typeName="";
+        switch (tag) {
+            case"buildinfo_query":nameKey="f";typeName="buildinginfo_editor";break;
+            case"house_query":nameKey="b";typeName="house_update";break;
+            default:;
+        }
         _self.isPropsEdit=!_self.isPropsEdit;
-        _self.propsSubmit.style.display="none";
+        _self.propsSubmitBtn.style.display="none";
         $(_self.editBtn).removeClass("popup-icon-hover");
         let props=[];
         let gid;
@@ -180,9 +192,14 @@ function Popup(viewer) {
             let value=$(this).val();
             let item;
             switch (name) {
-                case"name":item={key:"b",val:value};break;
+                case"name":item={key:nameKey,val:value};break;
                 case"x":item={key:"c",val:value};break;
                 case"y":item={key:"d",val:value};break;
+                case"area":item={key:"b",val:value};break;
+                case"zhouchang":item={key:"c",val:value};break;
+                case"zixin_x":item={key:"d",val:value};break;
+                case"zhixin_y":item={key:"e",val:value};break;
+                case"height":item={key:"g",val:value};break;
                 default:item={key:name,val:value};
             }
             props.push(item);
@@ -199,12 +216,11 @@ function Popup(viewer) {
                 'service': 'wfs',
                 'version': '1.0.0',
                 'request': 'GetFeature',
-                'typeName': 'Map3D-V2.0:house_update',
+                'typeName': 'Map3D-V2.0:'+typeName,
                 'maxFeatures': '100000',
                 'outputFormat': 'application/json',
                 'viewparams': params
             },
-            // 'viewparams': 'a:' + "1" + ';b:' + "居民楼" + ';c:' + "113.586849873921" + ';d:' + "24.7823080635045" + ';e:' + "1;"
             async: false,
             success: function (data) {
                 console.log(data);

test/Build/Static/js/main/core.js

 let config = null, viewer = null, vector = null, piontCloud = null, east = null, west = null, model = null,
     ESRIImg = null, TDTVec = null, points = [], polygon = null, polyline = null, handler = null, editorAxis = null;
-let isAnalysisMeasure = false, isAnalysisRoam = false, isLinkageMap = false, isPopupAreaSign = false;
+let isAnalysisMeasure = false, isAnalysisRoam = false, isLinkageMap = false, isPopupMesShow = false;
+//当前选中feature
+let selected={feature:undefined,originalColor:new Cesium.Color()};
+let selectedEntity=new Cesium.Entity();
+//hover物体变色
+let silhoutteOrange,silhoutteGreen;
 /**
  * 读取配置文件
  */
@@ -72,10 +77,29 @@ function initialize() {
         requestWaterMask: false,
         requestVertexNormals: false
     });
+    //添加轮廓支持
+    if(Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)){
+        silhoutteOrange=Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
+        silhoutteOrange.uniforms.color=Cesium.Color.ORANGE;
+        silhoutteOrange.uniforms.length=0.01;
+        silhoutteOrange.selected=[];
+
+        silhoutteGreen=Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
+        silhoutteGreen.uniforms.color=Cesium.Color.LIME;
+        silhoutteGreen.uniforms.length=0.01;
+        silhoutteGreen.selected=[];
+        viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhoutteGreen,silhoutteOrange]))
+    }
+
+    //倾斜摄影
     east = add3Dtile(config.MainModelData.east.url, config.MainModelData.east.matrix);
     west = add3Dtile(config.MainModelData.west.url, config.MainModelData.west.matrix);
+    //建筑
     vector = add3Dtile(config.MainModelData.vector.url, config.MainModelData.vector.matrix);
+    //点云
     // piontCloud = add3Dtile(config.MainModelData.cloud.url, config.MainModelData.cloud.matrix);
+
+    //白模型
     model = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
         url: config.MainModelData.model.url,
         maximumMemoryUsage: 300,
@@ -101,10 +125,9 @@ function initialize() {
     }
 
     //二维面
-    var entities
     let houseAreaSign = Cesium.GeoJsonDataSource.load('Build/Data/houseAreaSign.json',{clampToGround:true});
     houseAreaSign.then(function (dataSource) {
-        entities=dataSource.entities
+        var entities=dataSource.entities
         var areaEntitiesVals=entities.values;
         for (let i = 0; i <areaEntitiesVals.length; i++) {
             var entity=areaEntitiesVals[i];
@@ -174,27 +197,93 @@ function initialize() {
     mapMeasure();
     mapRoam();
     viewer.popup = new Popup(viewer);
+    //事件
     let downHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
     downHandler.setInputAction(function (movement) {
         let cartesian = viewer.scene.pickPosition(movement.position);
         let pickedObject = viewer.scene.pick(movement.position);
+
+        //高亮点击对象
+        if(isPopupMesShow){
+            silhoutteOrange.selected=[];
+            if(!Cesium.defined(pickedObject)){
+                return;
+            }
+            if(silhoutteOrange.selected[0]===pickedObject){//防止重复点击同一个对象
+                return;
+            }
+            let highlightedFeature=silhoutteGreen.selected[0];
+            if(pickedObject===highlightedFeature){
+                silhoutteGreen.selected=[];
+            }
+            silhoutteOrange.selected=[pickedObject];
+            selected.feature=pickedObject;
+        }
+
+        //查询显示信息
         if (Cesium.defined(pickedObject)) {
-            if (Cesium.defined(pickedObject["id"])) {
-               if(isPopupAreaSign){
-                   var url="http://172.16.10.132:8012/geoserver/Map3D-V2.0/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Map3D-V2.0:house_query&maxFeatures=50&outputFormat=application%2Fjson&viewparams=a:"
+            console.log(pickedObject);
+            let param;
+            if(isPopupMesShow){
+                //二维面信息
+                if (Cesium.defined(pickedObject["id"])) {
+                    param={
+                        'service':'WFS',
+                        'version':'1.0.0',
+                        'request':'GetFeature',
+                        'typeName':'Map3D-V2.0:house_query',
+                        'maxFeatures':'50',
+                        'outputFormat':'application/json',
+                        'viewparams':'a:'+pickedObject["id"].GID
+                    };
+                    query("house_query");
+                }
+                //建筑物信息
+                if(Cesium.defined(pickedObject["_batchId"])){
+                    param={
+                        'service':'WFS',
+                        'version':'1.0.0',
+                        'request':'GetFeature',
+                        'typeName':'Map3D-V2.0:buildinfo_query',
+                        'maxFeatures':'50',
+                        'outputFormat':'application/json',
+                        'viewparams':'a:'+pickedObject["_batchId"]
+                    };
+                    query("buildinfo_query");
+                }
+               function query(tag){
                    $.ajax({
                        type:"GET",
-                       url:url+pickedObject["id"].GID,
+                       url:"http://172.16.10.132:8012/geoserver/Map3D-V2.0/ows?",
+                       data:param,
                        async:false,
                        success:function(data){
                            var properties=data.features[0].properties;
-                           viewer.popup.show(cartesian,properties);
+                           viewer.popup.show(cartesian,properties,tag);
                        }
                    });
                }
+
             }
+
         }
     }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+    downHandler.setInputAction(function(movement){
+        if(isPopupMesShow){
+            silhoutteGreen.selected=[];
+            var pickedFeature=viewer.scene.pick(movement.endPosition);
+            if(!Cesium.defined(pickedFeature)){
+                //可以显示hover选中物体名字
+                return;
+            }
+            if(pickedFeature!==selected.feature){
+                silhoutteGreen.selected=[pickedFeature];
+            }
+        }
+
+
+    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 }
 
 function add3Dtile(url, matrix) {
@@ -203,6 +292,7 @@ function add3Dtile(url, matrix) {
         modelMatrix: matrix,
         maximumMemoryUsage: 300,
     }));
+
 }
 
 function setVisiable(node, checked) {

test/Build/Static/js/main/ui.js

@@ -54,9 +54,11 @@ $(document).ready(function () {
                     break;
                 case"bar_popup":
                     if ($(this).hasClass('active')) {
-                        isPopupAreaSign = true;
+                        isPopupMesShow = true;
                     } else {
-                        isPopupAreaSign = false;
+                        isPopupMesShow = false;
+                        silhoutteOrange.selected=[];
+                        viewer.popup.close()
                     }
                     break;
             }