Cesium 日常问题整理

Posted 水w

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cesium 日常问题整理相关的知识,希望对你有一定的参考价值。

目录

一、 vue项目中使用cesium且使用geoserver服务

二、 vue项目中使用cesium且使用geoserver服务,实现条件查询及拿到过滤之后的json数据

三、 cql_filter中文字段名问题

四、 铁路样式以及在小比例尺下样式变形问题

五、 广告牌billboard

 (1)新建广告牌

(2)清除模型

(3)billboard贴地形表

(4)设置透明度


一、 vue项目中使用cesium且使用geoserver服务

geoserver上有自带查询功能,我们使用cesium之后,搭配geoserver的瓦片服务,

wfs是发布在地图服务器上矢量数据的要素服务类型,可以对wfs进行查询、新增、更新、删除等操作。

axios(
        method:'get',
        url:'http://localhost:8899/geoserver/xxxxxx/wfs?',  // 服务链接,图层发布的地址
        params:
          service: 'WFS',  // 服务类型
          version: '1.0.0',  // 版本号
          request: 'GetFeature',
          typeName: 'xxxxxx:xxx',  // 工作空间:图层名称
          maxFeatures: 50,  // 指定返回的数据数量
          outputFormat: 'application/json',  // 输出格式
        ,
      ).then(res => 
        //拿到数据之后,你要执行的操作
      )

二、 vue项目中使用cesium且使用geoserver服务,实现条件查询及拿到过滤之后的json数据

对WFS服务进行过滤-基于cql_filter,

CQL(通用查询语言)是为OGC目录规范创建的纯文本语言。GeoServer已将其调整为易于使用的过滤机制。GeoServer实际上实现了一个名为ECQL(Extended CQL)的功能更强大的扩展,它允许表达OGC Filter1.1可以编码的所有过滤器

axios(
        method:'get',
        url:'http://localhost:8899/geoserver/xxxxxx/wfs?',  // 服务链接,图层发布的地址
        params:
          service: 'WFS',  // 服务类型
          version: '1.0.0',  // 版本号
          request: 'GetFeature',
          typeName: 'xxxxxx:xxx',  // 工作空间:图层名称
          maxFeatures: 50,  // 指定返回的数据数量
          outputFormat: 'application/json',  // 输出格式
          cql_filter: "name like '%" + [查询条件] + "%'",   // cql模式过滤  模糊查询
        ,
      ).then(res => 
        //拿到数据之后,你要执行的操作
      )

三、 cql_filter中文字段名问题

问题:URL请求将会在浏览器中进行请求,需要对中文字符进行URLEncoder编码,否则无法查询,

对cql_filter参数进行转码操作,将其转为Unicode编码,

使用方式 :str2Unicode("要转换的字符串")

var str2Unicode = function(str)  
    var es=[]; 
    for(var i=0;i < str.length;i++) 
        es[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4); 
    return "\\\\u"+es.join("\\\\u"); 
 

 完美解决。

四、 铁路样式以及在小比例尺下样式变形问题

铁路样式采用遮盖的方式实现,既底下放一层灰色的较粗线,上面再放一条较细的白线,控制白线的显示隐藏,就能形成铁路的样式

采用分级渲染的方式,

<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
    <sld:UserLayer>
        <sld:LayerFeatureConstraints>
            <sld:FeatureTypeConstraint/>
        </sld:LayerFeatureConstraints>
        <sld:UserStyle>
            <sld:Name>Default Styler</sld:Name>
            <sld:IsDefault>1</sld:IsDefault>
            <sld:FeatureTypeStyle>
                <sld:Name>simple</sld:Name>
                <sld:FeatureTypeName>Feature</sld:FeatureTypeName>
                <sld:SemanticTypeIdentifier>generic:geometry</sld:SemanticTypeIdentifier>
                <sld:SemanticTypeIdentifier>simple</sld:SemanticTypeIdentifier>
                <sld:Rule>
            <!-- 配置灰色底,颜色是#7F7F7F,宽度是3 -->
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#7F7F7F</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">3</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
            <!-- 配置白色层的显示和隐藏,同样设置颜色为#FFFFFF(白色),宽度为1,dashoffset和dasharray控制显示和隐藏 -->
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#FFFFFF</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">1.0</sld:CssParameter>
                            <sld:CssParameter name="stroke-dashoffset">13</sld:CssParameter>
                            <sld:CssParameter name="stroke-dasharray">16</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
                    <!-- 分级渲染 -->
                   <sld:MinScaleDenominator>279936</sld:MinScaleDenominator>
                </sld:Rule>
              <sld:Rule>
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#7F7F7F</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">3</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
               
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#FFFFFF</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">1.0</sld:CssParameter>
                            <sld:CssParameter name="stroke-dashoffset">13</sld:CssParameter>
                            <sld:CssParameter name="stroke-dasharray">20</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
                    <!-- 分级渲染 -->
                   <sld:MinScaleDenominator>150000</sld:MinScaleDenominator>
                <sld:MaxScaleDenominator>279936</sld:MaxScaleDenominator>
                </sld:Rule>
               <sld:Rule>
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#7F7F7F</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">4</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
               
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#FFFFFF</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">2.0</sld:CssParameter>
                            <sld:CssParameter name="stroke-dashoffset">13</sld:CssParameter>
                            <sld:CssParameter name="stroke-dasharray">20</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
                   <sld:MinScaleDenominator>30000</sld:MinScaleDenominator>
                <sld:MaxScaleDenominator>150000</sld:MaxScaleDenominator>
                </sld:Rule>
               <sld:Rule>
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#7F7F7F</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">6</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
               
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#FFFFFF</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">3.0</sld:CssParameter>
                            <sld:CssParameter name="stroke-dashoffset">13</sld:CssParameter>
                            <sld:CssParameter name="stroke-dasharray">20</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
                    <!-- 分级渲染 -->
                   <sld:MinScaleDenominator>8000</sld:MinScaleDenominator>
                <sld:MaxScaleDenominator>30000</sld:MaxScaleDenominator>
                </sld:Rule>
               <sld:Rule>
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#7F7F7F</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">6</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
               
                    <sld:LineSymbolizer>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#FFFFFF</sld:CssParameter>
                           <sld:CssParameter name="stroke-width">4.0</sld:CssParameter>
                            <sld:CssParameter name="stroke-dashoffset">13</sld:CssParameter>
                            <sld:CssParameter name="stroke-dasharray">20</sld:CssParameter>
                        </sld:Stroke>
                    </sld:LineSymbolizer>
                <!-- 分级渲染 -->
                <sld:MaxScaleDenominator>8000</sld:MaxScaleDenominator>
                </sld:Rule>
            </sld:FeatureTypeStyle>
        </sld:UserStyle>
    </sld:UserLayer>
</sld:StyledLayerDescriptor>

五、 广告牌billboard

billboard也叫广告牌,用图片标注的形式表示地理点位信息。是一种特别简单的模型(D3D里面好像是这么说的),它会自动计算,使图片下面始终面向摄像机,这种技术也叫广告牌技术。

代码中常用到的属性有以下几个:

  • pixelOffset,设置图片的偏移,按屏幕坐标来偏移。
  • pixelOffsetScaleByDistance:设置距离方位内,Billboard或Label的偏移量比例。

  • translucencyByDistance :设置距离方位内,Billboard或Label的半透明度比例。

  • horizontalOrigin(水平对齐)和 verticalOrigin(垂直对齐),代码中设置为左下角,也就是图片的左下角对齐中心点。
  • scaleByDistance:new Cesium.NearFarScalar(1.5e2, 1, 1.5e7, 0.3):按距离缩放,根据摄像机的距离改变实体的scale(缩放比)。
    •  距离大于10000米时,图标不显示,
    •  N earFarScalar:可以用于translucencyByDistance,即按距离设置图标透明度,可以实现渐入渐出效果。
      •  near:摄像机范围的下限,
      • nearValue:摄像机范围下限的值,
      • far:摄像机范围的上限,
      • farValue:摄像机范围上限的值
  • distanceDisplayCondition:获取或设置条件指定在什么距离相机这个广告牌将显示出来。
  • heightReference:获取或设置高度引用的广告牌

  • position:经纬度信息。

 (1)新建广告牌

方法一:在Cesium JS中创建billboardCollection,将创建的两个广告牌添加到billboardColletion中,然后将billboardCollection放在entity中,

let billboards = new Cesium.BillboardCollection(scene:viewer.scene);
let billboard1 = billboards.add(
    image: "img/white.png",
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,  //广告牌贴地
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
    position: new Cesium.Cartesian3.fromDegrees(125.1641667, 39.9522222),
);
let billboard2 = billboards.add(
    image: "img/white.png",
    // pixelOffset: new Cesium.Cartesian2(0, 0),
    position: new Cesium.Cartesian3.fromDegrees(121.1643367, 39.97),
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,  //广告牌贴地
);

viewer.scene.primitives.add(billboards);

方法二:以entity方式加载billboard,

// 创建一个billboard广告牌
viewer.entities.add(
    name:"自定义billboard",
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard:
        image: "image.jpg",
        show: true, // default
        eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
        scale: 2.0, // default: 1.0
        // color: Cesium.Color.LIME, // default: WHITE
        rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
        alignedAxis: Cesium.Cartesian3.ZERO, // default
        width: 25, // default: undefined
        height: 25, // default: undefined
        pixelOffset: new Cesium.Cartesian2(0, -72),
    ,
    label:  //文字标签
        text: "这是一个label文字标签",
        font: "20px sans-serif",
        showBackground: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        pixelOffset: new Cesium.Cartesian2(0.0, -39.9522222),
        pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
            1.5e2,
            3.0,
            1.5e7,
            0.5
        ),
    );

(2)清除模型

if(billboard2 != undefined) 
  viewer.primitives.remove(billboard2)  

(3)billboard贴地形表

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

(4)设置透明度

更改广告牌billboard的颜色,使其具有一个透明度,

color: Ceisum.ColorGeometryInstanceAttribute,fromColor(Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.6))

javascript []日常的零散知识整理

var ids = data.data.data.map(x=>x[2].split(';')).reduce((a, b) => a.concat(b), []).filter(function(item, index, array){return array.indexOf(item) === index;})

以上是关于Cesium 日常问题整理的主要内容,如果未能解决你的问题,请参考以下文章

基于OpenGL的数字地球(Cesium)引擎-云渲染路线

GIS-009-Cesium 使用

GIS-013-Cesium Terrain 数据生成

Cesium + Blender 实现简单GIS

Cesium + Blender 实现简单GIS

Cesium + Blender 实现简单GIS