Cesium 日常问题整理

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

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

三、 cql_filter中文字段名问题

一、 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))

Cesium 日常问题整理

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

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

三、 cql_filter中文字段名问题

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

五、 广告牌billboard

（1）新建广告牌

（2）清除模型

（3）billboard贴地形表

（4）设置透明度

猜你喜欢

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

五、广告牌billboard