网站导航
> 文章列表 > Cesium 日常问题整理

Cesium 日常问题整理

网友: 文章列表 2024-03-21 20:12:13

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, // defaultverticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTERheightReference: 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, // defaultverticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTERdistanceDisplayCondition: 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, // defaulteyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // defaulthorizontalOrigin: Cesium.HorizontalOrigin.CENTER, // defaultverticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTERscale: 2.0, // default: 1.0// color: Cesium.Color.LIME, // default: WHITErotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0alignedAxis: Cesium.Cartesian3.ZERO, // defaultwidth: 25, // default: undefinedheight: 25, // default: undefinedpixelOffset: 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))

跨境电商

网络标签：

相关问题