cesium动态加载标注csWTFS一例

浅浅的花香味﹌ 2022-10-27 06:19 240阅读 0赞

调用后显示效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzZzc3_size_16_color_FFFFFF_t_70]

调用方法：

//实时加载实体功能
            var sql="select ssmc,st_asewkt(st_transform(geom, 4326)) as geometry,gid,id ";
            sql+=" from xc_dzwz ";
            sql+=" where st_intersects(geom, st_transform(st_geomfromtext('[wkt]'),4525))  limit 200";
            //
            var testWTFS=new csWTFS({
        
              csControl:that.csControl
            }); 
            testWTFS.tableName="xc_dzwz";
            testWTFS.sql=sql;
            testWTFS.callback_row_point=function(row,point)
            {
        
                var t_name=row.ssmc;           
                var text_point_ent = that.csControl.addEnt({
        
                  id: testWTFS.tableName + "." + row.id,
                  name: t_name,
                  position: point,
                  //点样式
                  /* 注意：添加billboard图片就不能添加point点
                  point: {
                    pixelSize: 4,
                    color: Cesium.Color.RED,
                    outlineColor: Cesium.Color.RED,
                    outlineWidth: 1,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  },*/
                  label: {
        
                    text: t_name,
                    font: '20px 微软雅黑',
                    fillColor: Cesium.Color.BLACK,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 5,
                    scale: 0.7,
                    position: point,
                    //垂直位置
                    //verticalOrigin : Cesium.VerticalOrigin.BUTTON,
                    //中心位置
                    pixelOffset: new Cesium.Cartesian2(0, -5), //-10  -50个像素
                    //eyeOffset: new Cesium.Cartesian3(0, 0, -10)    //-10表示在更上层显示
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  },
                  billboard: {
        
                    pixelOffset: new Cesium.Cartesian2(0, 0),
                    color: new Cesium.Color(),
                    image: "images/points/政府.png",
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  }
                });
                return text_point_ent;
            };
            testWTFS.init();      
            //

csWTFS.js源代码如下所示：

import * as api from "@/api/ajax";
    export class csWTFS
    {
        
        constructor(options){
        
            //定义属性
            this.options=options;        
            //类名称
            this.CLASS_NAME="csWTFS"; 
            //
            this.selectedEnt=null;   
            this.pEnt=null; 
            //
            this.srid=4525;
            this.tableName="";
            this.sql="";
            //sql模板=select * from xc_dzwz where st_intersects(geom, st_transform(st_geomfromtext('[wkt]'),4525));        
            //加载实体集合
            this.idArray=[];
            this.entColls=[];
            this.callback_row_point=null;
        }
        dispose(){
        
    
        }
        /*window可视窗口范围*/
        getViewExtend() {
        
            var that=this;
            //
            var csControl=that.options.csControl;
            var viewer=csControl.getViewer();
            //
            let params = {
        };
            let extend = viewer.camera.computeViewRectangle();
            if (typeof extend === "undefined") {
        
            //2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
            let canvas = viewer.scene.canvas;
            let upperLeft = new Cesium.Cartesian2(0, 0);//canvas左上角坐标转2d坐标
            let lowerRight = new Cesium.Cartesian2(
                canvas.clientWidth,
                canvas.clientHeight
            );//canvas右下角坐标转2d坐标
    
            let ellipsoid = viewer.scene.globe.ellipsoid;
            let upperLeft3 = viewer.camera.pickEllipsoid(
                upperLeft,
                ellipsoid
            );//2D转3D世界坐标
    
            let lowerRight3 = viewer.camera.pickEllipsoid(
                lowerRight,
                ellipsoid
            );//2D转3D世界坐标
    
            let upperLeftCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
                upperLeft3
            );//3D世界坐标转弧度
            let lowerRightCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
                lowerRight3
            );//3D世界坐标转弧度
    
            let minx = Cesium.Math.toDegrees(upperLeftCartographic.longitude);//弧度转经纬度
            let maxx = Cesium.Math.toDegrees(lowerRightCartographic.longitude);//弧度转经纬度
    
            let miny = Cesium.Math.toDegrees(lowerRightCartographic.latitude);//弧度转经纬度
            let maxy = Cesium.Math.toDegrees(upperLeftCartographic.latitude);//弧度转经纬度
    
            console.log("经度：" + minx + "----" + maxx);
            console.log("纬度：" + miny + "----" + maxy);
    
            params.minx = minx;
            params.maxx = maxx;
            params.miny = miny;
            params.maxy = maxy;
            } else {
        
            //3D获取方式
            params.maxx = Cesium.Math.toDegrees(extend.east);
            params.maxy = Cesium.Math.toDegrees(extend.north);
    
            params.minx = Cesium.Math.toDegrees(extend.west);
            params.miny = Cesium.Math.toDegrees(extend.south);
            }
            params.height = viewer.camera.positionCartographic.height;
            return params;//返回屏幕所在经纬度范围
        }
        init()
        {
        
            var that=this;
            var csControl=that.options.csControl;
            var viewer=csControl.getViewer();
    
            //debugger;
            /*
            viewer.scene.postRender.addEventListener(function(){
                console.log("相机位置"+viewer.camera.positionCartographic.height);
                debugger;
            }); */
            var height=0;
            var lon=0;
            var lat=0;
            var cameraC=null;
            var point=null;
            viewer.scene.camera.moveEnd.addEventListener(function(){
                
                //清除原加载实体
                /*
                if(that.entColls && that.entColls.length>0)
                {
                    for(var i=0;i<that.entColls.length;i++)
                    {
                       csControl.removeEnt(that.entColls[i]);
                    }
                    that.entColls=[];
                }*/
                //相机位置
                cameraC=viewer.camera.positionCartographic;
                height=cameraC.height;
                lon=cameraC.longitude*180/Math.PI;
                lat=cameraC.latitude*180/Math.PI;
                //console.log("相机位置"+lon+","+lat+","+height);
                
                //获取屏幕中心点
                var rectangle = viewer.camera.computeViewRectangle();
                var west =rectangle.west / Math.PI * 180;
                var north = rectangle.north / Math.PI * 180;
                var east = rectangle.east / Math.PI * 180;
                var south = rectangle.south / Math.PI * 180;
                //
                var width=(east-west)/2;
                var height=(north-south)/2;
                //
                var centerx=(west+east)/2;
                var cnetery=(north+south)/2;           
                //console.log("屏幕中心点"+centerx+","+cnetery);
                //var point = Cesium.Cartesian3.fromDegrees(centerx, cnetery, 1050);
                //屏幕范围
                //if(that.pEnt)
                //{
        
                //    csControl.removeEnt(that.pEnt);
                //}
                /*
                var positions=[];
                positions.push(Cesium.Cartesian3.fromDegrees(centerx-width, cnetery-height, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(centerx-width, cnetery+height, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(centerx+width, cnetery+height, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(centerx+width, cnetery-height, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(centerx-width, cnetery-height, 1050));  
                that.pEnt=csControl.addSelectedPolygon(positions,Cesium.Color.BLUE.withAlpha(0.5));
                */
                //
                //debugger;
                //相机范围
                if(that.selectedEnt)
                {
        
                    csControl.removeEnt(that.selectedEnt);
                }            
                var minX=lon-width;
                var minY=lat-height;
                var maxX=lon+width;
                var maxY=lat+height;
                //
                let vE=that.getViewExtend();
                minX=vE.minx;
                minY=vE.miny;
                maxX=vE.maxx;
                maxY=vE.maxy;
                //
                var positions=[];
                positions.push(Cesium.Cartesian3.fromDegrees(minX, minY, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(minX, maxY, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(maxX, maxY, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(maxX, minY, 1050));
                positions.push(Cesium.Cartesian3.fromDegrees(minX, minY, 1050));
                that.selectedEnt=csControl.addSelectedPolygon(positions);
                
                var xy_str="";
                xy_str=minX+" "+minY;
                xy_str+=","+minX+" "+maxY;
                xy_str+=","+maxX+" "+maxY;
                xy_str+=","+maxX+" "+minY;
                xy_str+=","+minX+" "+minY;
                //
                var t_wkt = "SRID=4326;MULTIPOLYGON(((" + xy_str+")))";
                console.log(t_wkt);
                var t_sql=that.sql.replace('[wkt]',t_wkt);
                console.log(t_sql);
                csControl.create3DPoint_rtime(that.tableName,t_sql,function(row,point){
        
                       if(that.callback_row_point)
                       {
        
                           var t_id=that.tableName+"."+row.id;
                           //debugger;
                           if(api.ArrayContains(that.idArray,t_id)==true)
                           {
        
                               var tt=csControl.findEnt(t_id);  //查询已加载实体的有效性
                               if(tt)
                               {
        
                                   var tmp=Cesium.Ellipsoid.WGS84.cartesianToCartographic(tt.position._value);
                                   var lon=tmp.longitude / Math.PI * 180;
                                   var lat=tmp.latitude / Math.PI * 180;
                                   var tmp_h=tmp.height;
                                   if(tmp_h<=0 || tmp_h>8848)
                                   {
           //修正位置高度                           
                                       let height = csControl.getHeigthByLonLat(lon, lat);
                                       let position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
                                       tt.position=position;
                                   }
                               }                           
                           }
                           else
                           {
        
                                var t_ent=that.callback_row_point(row,point);
                                if(t_ent)
                                {
        
                                    that.entColls.push(t_ent);                           
                                    that.idArray.push(t_ent.id);                           
                                }
                            }
                       }
                      
                });
            });
        }
        getTileUrl(){
        
    
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzZzc3_size_16_color_FFFFFF_t_70]: /images/20221024/a47c21ed98ae47308bef20fdac641189.png