增加阿里矢量字体库支持文件，修改二维面显示样式，增加二维面属性修改

test/Build/Static/css/main.css

@@ -157,4 +157,45 @@ html, body, .mainScene {
     float: right;
     overflow: hidden;
     display: none;
-}
\ No newline at end of file
+}
+
+/*Popui*/
+#popup-data-div li {
+    list-style: none;
+    margin-top: 5px;
+}
+#popup-data-div input{
+    border: none;
+    background: #303a3d;
+    color: white;
+    margin-left: 10px;
+}
+#popup-props-submit{
+    background: #303a3d;
+    border: 2px solid #83898b;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    color: #83898b;
+    outline: none;
+    margin-left: 45%;
+}
+
+#ol-popup:before{
+    top: 100%;border: solid transparent;
+    content: '  ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-top-color: white;
+    margin-left: 30px;
+}
+.popup-icon-hover{
+    border-color:#e7943a!important;
+    color:white!important;
+}
+.popup-icon-normal{
+    border-color:#83898b;
+    color:#83898b;
+}

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

@@ -12,6 +12,12 @@ function Popup(viewer) {
     _self.overlay = null;
     _self.content = null;
     _self.contentTxT = null;
+    _self.dataUl=null;
+    _self.editBtn=null;
+    _self.propsSubmit=null;
+    _self.isPropsEdit=false;
+
+
     create();
     /**
      * 初始化popup框
@@ -22,36 +28,71 @@ function Popup(viewer) {
         _self.overlay.id = "overlay";
         _self.overlay.style.cssText = "position: absolute;display:none";
         var popup = document.createElement("div");
-        popup.style.cssText = "position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px; ";
+        popup.style.cssText = "position: absolute;background-color: #303a3d;color:white;-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px; ";
+
         var content = document.createElement("div");
         content.id = "ol-popup";
+
+        var dataDiv=document.createElement("div");
+        dataDiv.id="popup-data-div";
+        var dataUl=document.createElement("ul");
+        dataUl.id="popup-data-ul";
+        _self.dataUl=dataUl;
+
         var close = document.createElement('a');
-        close.style.cssText = "text-decoration: none;position: absolute;top: 2px;right: 8px;";
+        close.style.cssText = "text-decoration: none;position: absolute;top: 2px;right: 8px;width:25px;text-align:center;border-radius:7px;border:2px solid #83898b;cursor:pointer;color:#83898b;";
         close.id = "popup-closer";
+        $(close).hover(function(){
+            $(this).toggleClass("popup-icon-hover");
+        });
         close.onclick = function () {
             _self.close();
         };
         var closeTxT = document.createTextNode("✖");
+
+        var edit=document.createElement("a");
+        _self.editBtn=edit;
+        edit.style.cssText="text-decoration: none;position: absolute;top: 2px;right: 45px;width:25px;text-align:center;border-radius:7px;border:2px solid #83898b;cursor:pointer;color:#83898b;font-size:19px;";
+        edit.setAttribute("class","iconfont icon-bianji");
+        edit.id="popup-edit";
+        $(edit).mouseenter(function(){
+            if(_self.isPropsEdit) return;
+            $(this).addClass("popup-icon-hover");
+        });
+        $(edit).mouseleave(function(){
+            if(_self.isPropsEdit) return;
+            $(this).removeClass("popup-icon-hover");
+        });
+        edit.onclick=function(){
+            _self.edit();
+        };
+
+        var propsSubmit=document.createElement("input");
+        propsSubmit.id="popup-props-submit";
+        propsSubmit.style.display="none";
+        propsSubmit.type="button";
+        propsSubmit.value="确定";
+        _self.propsSubmit=propsSubmit;
+        $(propsSubmit).hover(function(){
+            $(this).toggleClass("popup-icon-hover");
+        });
+        propsSubmit.onclick=function(){
+            _self.submitProps();
+        }
+
         var contentDiv = document.createElement("div");
         contentDiv.id = "popup-content";
-        _self.content = document.createElement("label");
-        _self.content.id = "position";
+
         close.appendChild(closeTxT);
         contentDiv.appendChild(close);
+        contentDiv.appendChild(edit);
+        dataDiv.appendChild(dataUl);
+        contentDiv.appendChild(dataDiv);
         content.appendChild(contentDiv);
-        content.appendChild(_self.content);
+        content.appendChild(_self.propsSubmit);
         popup.appendChild(content);
         _self.overlay.appendChild(popup);
         document.body.appendChild(_self.overlay);
-        var css = "#ol-popup:before{top: 100%;border: solid transparent;content: '  ';height: 0;width: 0;position: absolute;pointer-events: none;border-top-color: white;margin-left: 30px;}";
-        var style = document.createElement("style");
-        style.type = "text/css";
-        try {
-            style.appendChild(document.createTextNode(css));
-        } catch (ex) {
-            style.styleSheet.cssText = css;
-        }
-        close.appendChild(style);
     }
     /**
      * popup始终面向屏幕
@@ -59,7 +100,6 @@ function Popup(viewer) {
     _self.viewer.scene.preRender.addEventListener(function () {
         if (_self.isShow) {
             if (_self.position) {
-                _self.content.innerText = _self.contentTxT;
                 let position = viewer.scene.cartesianToCanvasCoordinates(_self.position);
                 _self.overlay.style.top = position.y - _self.overlay.offsetHeight + 'px';
                 _self.overlay.style.left = position.x + 'px';
@@ -74,13 +114,22 @@ function Popup(viewer) {
     Popup.prototype.setData = function (data) {
         let txt = "";
         _self.data = data;
+        $(_self.dataUl).empty();
         for (let val in data) {
             if (val.toUpperCase() === "SELECTED" || val.toUpperCase() === "ID"|| val.toUpperCase() === "GID") {
                 continue;
             }
-            txt += val + ":" + data[val] + "\n";
+            let cnStr;
+            switch (val) {
+                case"name":cnStr="名字 :";break;
+                case"x":cnStr="经度 :";break;
+                case"y":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.contentTxT = txt;
     };
     /**
      * 气泡框显示
@@ -92,9 +141,80 @@ function Popup(viewer) {
         _self.isShow = true;
         if (position) {
             _self.position = position;
-
         }
+        $(_self.editBtn).removeClass("popup-icon-hover");
+        _self.propsSubmit.style.display="none";
+        _self.isPropsEdit=false;
     };
+
+
+    Popup.prototype.edit=function(){
+        _self.isPropsEdit=!_self.isPropsEdit;
+        if(_self.isPropsEdit){
+            $(_self.propsSubmit).css("display","block");
+            $(_self.editBtn).addClass("popup-icon-hover");
+            $(_self.dataUl).find("input").each(function(index){
+                $(this).removeAttr("disabled").css("border","2px solid gray");
+                if(index==0){
+                    $(this)[0].focus();
+                }
+            })
+        }else{
+            $(_self.propsSubmit).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(){
+        _self.isPropsEdit=!_self.isPropsEdit;
+        _self.propsSubmit.style.display="none";
+        $(_self.editBtn).removeClass("popup-icon-hover");
+        let props=[];
+        let gid;
+        $(_self.dataUl).find("input").each(function(index){
+            if(index==0)gid=$(this).attr("gid");
+            $(this).attr("disabled","disabled").css("border","none");
+            let name=$(this).prop("name");
+            let value=$(this).val();
+            let item;
+            switch (name) {
+                case"name":item={key:"b",val:value};break;
+                case"x":item={key:"c",val:value};break;
+                case"y":item={key:"d",val:value};break;
+                default:item={key:name,val:value};
+            }
+            props.push(item);
+        });
+        let params="";
+        for (let i = 0; i < props.length; i++) {
+            params+= props[i].key+":"+props[i].val+";";
+        }
+        params+="a:"+gid+";";
+        $.ajax({
+            type:'get',
+            url: "http://172.16.10.132:8012/geoserver/Map3D-V2.0/ows?",
+            data: {
+                'service': 'wfs',
+                'version': '1.0.0',
+                'request': 'GetFeature',
+                'typeName': 'Map3D-V2.0:house_update',
+                '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

@@ -101,15 +101,15 @@ function initialize() {
     }
 
     //二维面
-    var entities;
-    let houseAreaSign = Cesium.GeoJsonDataSource.load('Build/Data/houseAreaSign.json', {clampToGround: true});
+    var entities
+    let houseAreaSign = Cesium.GeoJsonDataSource.load('Build/Data/houseAreaSign.json',{clampToGround:true});
     houseAreaSign.then(function (dataSource) {
-        entities = dataSource.entities;
-        var areaEntitiesVals = entities.values;
-        for (let i = 0; i < areaEntitiesVals.length; i++) {
-            var entity = areaEntitiesVals[i];
-            if (Cesium.defined(entity.polygon)) {
-                entity.GID = Number(i + 1);//加标识
+        entities=dataSource.entities
+        var areaEntitiesVals=entities.values;
+        for (let i = 0; i <areaEntitiesVals.length; i++) {
+            var entity=areaEntitiesVals[i];
+            if(Cesium.defined(entity.polygon)){
+                entity.GID=Number(i+1);//加标识
             }
         }
         viewer.dataSources.add(dataSource);
@@ -180,18 +180,18 @@ function initialize() {
         let pickedObject = viewer.scene.pick(movement.position);
         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:"
-                    $.ajax({
-                        type: "GET",
-                        url: url + pickedObject["id"].GID,
-                        async: false,
-                        success: function (data) {
-                            var properties = data.features[0].properties;
-                            viewer.popup.show(cartesian, properties);
-                        }
-                    });
-                }
+               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:"
+                   $.ajax({
+                       type:"GET",
+                       url:url+pickedObject["id"].GID,
+                       async:false,
+                       success:function(data){
+                           var properties=data.features[0].properties;
+                           viewer.popup.show(cartesian,properties);
+                       }
+                   });
+               }
             }
         }
     }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

test/Build/Utils/iconfont/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1551057798239'); /* IE9 */
+  src: url('iconfont.eot?t=1551057798239#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKwAAsAAAAABmQAAAJlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApwfQE2AiQDCAsGAAQgBYRtBzAbowXILrBt2JMiJGKxuI1U+tREBwPEw3/7/W+fmXmq6as1iOJVJZmU8CoJfmlAKfwSYXW8hHu1ppsiCLdTHWJVIhWUD8ne5fJ8vyVJoBwr0wqZCleZZHKaL0PpzsrsXvc/l9NbAQUyP1AuYwwac9lRL8B4a0BjbYqsRDJvmF6+wIE4TqBtRVLiyv5pC+YUelwg3itpwVzBpSgs2hTqDUuL+KSmmT6kH+Bj9P34Lx9Nklqm82683OvD5i9MXF5UC08ChJuAVteQcQQU4k5j6JpJwaiT2qEpG+BY2cEvqiowiqPqBPvrdGYXLEH+Mwmc8FEzEyiwfRnYm3Q9JbdL93GrK9+vD3p72dN2Zbtvrb18XnzprL82bPv1x5Wro/Z+XqwWV0/VCqvHx/NbrYCDS8az62JDrMMusAlQnWTzm01IIJj3L9aN1TPjuU4B3+2LHNVJgWEW0NylOfg1goFlRYi0Kl2Dj8zJcs4hAbPaqGjb2N9U9ew+YqFpdjfShhBkkDVtoYVyBDUdp6Gu6Ty0HTpY3TGhTYrSwoF7AGHoG5K+b5AN/aKFMoKauX+oG0aGtnsx2bJjJ94sXNZkMfXRvkLVC3xhTbwQZzdInrmWzosiWod0rLyYS2fL0QPySS8xIz6XeWaBQgce7oPTyHUDDHUwpB6nB8xhPZMRTW9K9wIPFlymEQsjfch2BSk9AZ8IqrOFyucbiHTGZdEdpJy9g2gx1TnKScsOQA/k/iDSo7wSOyflMSYgQQt40D4YRFyuAAqbBw2RHpY2mBAI1WVMJTFUnt5e6f3dGmjTmhSmX1Z/qix/qAAAAA==') format('woff2'),
+  url('iconfont.woff?t=1551057798239') format('woff'),
+  url('iconfont.ttf?t=1551057798239') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1551057798239#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-bianji:before {
+  content: "\e659";
+}
+

test/Build/Utils/iconfont/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="bianji" unicode="&#58969;" d="M218.23 324.69L148 102.99l221.5 70.3-151.27 151.4zM855.74 665.35a68.58 68.58 0 0 1 0 97.33l-48.62 48.66a68.43 68.43 0 0 1-97.25 0l-48.62-48.66 145.87-146zM272.107 373.477l340.686 340.33 145.856-146.01-340.686-340.329zM920 16H104a40 40 0 0 1 0-80h816a40 40 0 0 1 0 80z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

test/index.html

@@ -7,6 +7,8 @@
     <link rel="stylesheet" type="text/css" href="http://172.16.10.132:3333/cesium-1.52/Widgets/widgets.css"/>
     <link rel="stylesheet" type="text/css" href="http://172.16.10.132:3333/utils/easyui/themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="http://172.16.10.132:3333/utils/easyui/themes/icon.css">
+    <link rel="stylesheet" href="Build/Utils/iconfont/iconfont.css">
+
 </head>
 <script src="http://172.16.10.132:3333/cesium-1.52/Cesium.js"></script>
 <script src="http://172.16.10.132:3333/utils/jquery/jquery-2.1.0.min.js"></script>