碼上歡樂
相關內容    簡體    繁體

三維地圖的加載以及基本功能的開發

本文轉載自   查看原文   2020-04-03 17:00   621    Map

 

注意屬性氣泡功能一定要設置圖層可選中：

//優化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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材質 ：無</p>";
            }else{
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材質 ："+data3.MATERIAL+"</p>";
            }
        /*     
            if(data3.REMARK==null){
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;備注 ：無</p>";
            }else{
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;備注 ："+data3.REMARK+"</p>";
            } */
            
            if(data3.S_H==null){
                 bubbleDiv+="<p>起點高程(米)：</p>";
            }else{
                 bubbleDiv+="<p>起點高程(米)："+SH+"</p>";
            }
            if(data3.SSPIPEWIDTH==null){
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;寬(毫米) ：無</p>"; 
            }else{
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;寬(毫米) ："+data3.SSPIPEWIDTH+"</p>";
            }
            if(data3.SSPIPEHEIGHT==null){
                bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高(毫米) ：無</p></div>"; 
            }else{
                bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高(毫米) ："+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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材質 ：無</p>";
            }else{
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材質 ："+data3.MATERIAL+"</p>";
            }
        /*     
            if(data3.REMARK==null){
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;備注 ：無</p>";
            }else{
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;備注 ："+data3.REMARK+"</p>";
            } */
            
            if(data3.S_H==null){
                 bubbleDiv+="<p>起點高程(米)：</p>";
            }else{
                 bubbleDiv+="<p>起點高程(米)："+SH+"</p>";
            }
            if(data3.SSPIPEWIDTH==null){
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;寬(毫米) ：無</p>"; 
            }else{
                 bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;寬(毫米) ："+data3.SSPIPEWIDTH+"</p>";
            }
            if(data3.SSPIPEHEIGHT==null){
                bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高(毫米) ：無</p></div>"; 
            }else{
                bubbleDiv+="<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高(毫米) ："+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);
}


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 WordCount基本功能 Zabbix的基本功能 Keycloak 基本功能 Kubernetes基本功能 SVN基本功能 如何使用JS來開發室內三維地圖的軌跡回放功能 Android 藍牙開發之A2DP基本功能 nginx的基本功能和原理 IPython的基本功能（轉） Pyboard基本功能---UART
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM