Cesium 日常问题整理

最新推荐文章于 2023-08-02 23:45:00 发布
最新推荐文章于 2023-08-02 23:45:00 发布
阅读量866 收藏 2
点赞数
分类专栏： # gis 文章标签： gis 前端 vue.js cesium billboard
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45956730/article/details/130017860
版权

目录

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

水w
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cesium 加载WMS服务，空间范围查询、过滤
晚秋的专栏
05-07 210
cesium加载OGC标准WMS服务，需要空间范围查询过滤，可以使用CQL过滤器进行多边形范围查询。
cesium多边形描边_cesium--绘制多边形polygon
weixin_39889642的博客
12-20 619
查询结果截图:区别:名称 作用CoplanarPolygonGeometryCoplanarPolygonOutlineGeometryPolygonGeometry这个好像是给底层用的PolygonGeometryUpdater一般客户端不用PolygonHierarchy定义多边形及其孔的线性环的层次。这些孔本身也可能有嵌套内部多边形的孔。PolygonOutlineGeometry椭球上多边...
cesium常见问题
OldStreet61的博客
09-07 613
cesium 常见问题
Cesium 常见问题
qq_34799366的博客
05-08 400
cesium学习笔记（问题记录）——（一）
CheryW的博客
11-17 3212
cesium学习笔记
cesium知识整理——初入门问题集
小白笔记本
02-08 868
浏览器输出CORS policy错误，所加载的对象没显示 • 问题解决： 跨域问题的终极解决方法在服务端 若服务端代码可改：添加跨域头 若服务端不可控：添加代理服务器 随着视角旋转，模型并不能在中心位置，模型和地形的相对高度不一致 问题解决：viewer.scene.globe.depthTestAgainstTerrain=true; 调节对象高度； viewer.scene. globe. depthTestAgainstTerrain=false; 换了底图之后，影像和实体有较大偏差 国内公开访问的底
Cesium加载Geoserver跨域问题
10-15
当我们在Cesium中尝试加载由Geoserver提供的地图服务时，可能会遇到跨域问题。这个问题主要是由于浏览器的安全策略限制了不同源之间的通信。以下是对这个问题的详细解释和解决方法。 首先，理解“跨域”是什么至关...
Cesium相机进入地下问题，修改ScreenSpaceCameraController源码
08-23
替换scene下的ScreenSpaceCameraController代码，用cesium.js自己打开文件，找到这部分替换，另外上传不能修改，其中pickGlobe函数用下面替换 function pickGlobe(controller, mousePosition, result) { var scene...
cesium跨域加载问题
02-20
然而，当使用Cesium进行3D地球渲染时，我们可能需要加载来自不同源的数据，如瓦片、模型、纹理等，这就涉及到跨域问题。本篇文章将详细介绍如何解决Cesium在使用Tomcat服务器时的跨域问题。 首先，我们需要理解...
cesiumlab3.1.8
最新发布
11-06
cesiumlab3.1.8，cesiumlab工具
Cesium飞行漫游 Cesium飞行漫游
06-16
Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游...
vue项目中使用cesium且使用geoserver服务，实现条件查询及拿到过滤之后的json数据
qq_33138785的博客
06-21 2035
cesium中使用geoserver服务，实现条件查询
WFS查询cql_filter与bbox互斥问题解决方案
lz5211314121的博客
08-15 1773
在使用Openlayers进行geoserver发布的WFS服务进行查询的时候我们会遇到这样一个需求，就是我们需要属性查询结合空间查询，双重查询条件进行结果过滤。 意思是cql_filter和bbox都指定了但是互斥，说白了就是不让你同时用这两个条件进行查询。 没关系我们还有方法，上面只是给大家介绍了几个可能会走的弯路，接下来我们说正确的解决方案 ......
Vue.js2+Cesium1.103.0 五、WMS 服务加载，控制自图层显隐
qq_37236395的博客
08-02 683
【代码】Vue.js2+Cesium 五、WMS 服务加载，控制自图层显隐。
Cesium 点击鼠标绘制锚点时，位置发生偏移
玩火的稻草人的博客
03-14 1951
导致的原因是开启了地形模式 开启地形时，使用如下的方法获取： var ray=viewer.camera.getPickRay(event.position); var cartesian = viewer.scene.globe.pick(ray, viewer.scene); 不开启地形时，使用如下的方法获取： var cartesian = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid); ...
geoserver配置SQL图层 cql_filter模糊查询
对雪书空武
08-13 5545
&#13; 1.新建图层，选择对应的 数据源 2创建SQL源图层 3、写好SQL,刷新，需要注意设置主键为标识符，设置空间数据为Geometory 4326 4、数据过滤访问地址，支持cql_filter 模糊查询 http://hhzc.hubeiwater.gov.cn/geoserver//ows?service=WFS&amp;version=1.0.0&amp;re...
解决GeoServices发布带有中文属性字段的shp文件出现无法使用sld文件的问题
尼乐
01-09 3071
在GeoService开源地图服务器中，发布shp文件及风格文件sld是相互独立的。由于GeoService发布配置还不够灵活，所以直接发布带有中文属性字段的shp时，会发生许多问题。 例如如果shp文件中有一个属性字段为“名称”，当用Udig工具设置其它风格时如果使用了名称作为依据，就会在输出的配置文件中出现中文。如： <sld:StyledLayerDescriptor xmlns="
cesium计算两次视角范围之差
A873054267的博客
03-13 763
计划是用来根据新增的范围来请求数据，但是发现，如果是N次视角变化之后，此前请求过的数据又会识别为未请求，因此暂时放弃这种方式来计算，虽然目前没什么用，也记录一下吧；其中黄色部分为新增视角范围；红色为当前视角范围，蓝色为上次视角范围 var initCesium = new InitCesium(); var viewer = initCesium.initViewer(...
cesium覆盖问题
07-27
回答: 根据引用\[2\]的解决思路，可能是因为在从PrimeNG转换到Cesium时，遗漏了某些问题。在使用PrimeNG时为了显示界面，将界面的z-index设置为了正值，在改为Cesium后，界面的z-index还是正值。为了解决这个问题，可以尝试将界面的z-index设置为负值，以确保Cesium的元素能够正确覆盖在界面上。另外，根据引用\[3\]的改进之后的代码，可以使用Cesium的实体对象来设置旋转角度，通过调用Cesium.Transforms.headingPitchRollQuaternion方法来计算旋转的四元数，并将其赋值给实体的orientation属性。这样可以实现对实体的旋转操作。 #### 引用[.reference_title] - *1* *3* [Cesium 日常问题整理](https://blog.csdn.net/GhostPaints/article/details/120307777)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Cesium与PrimeNG结合导致界面元素被Cesium覆盖的问题](https://blog.csdn.net/baidu_38271024/article/details/81200548)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值