Cesium 日常问题整理
Posted 水w
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cesium 日常问题整理相关的知识,希望对你有一定的参考价值。
目录
一、 vue项目中使用cesium且使用geoserver服务
二、 vue项目中使用cesium且使用geoserver服务,实现条件查询及拿到过滤之后的json数据
一、 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 []日常的零散知识整理
以上是关于Cesium 日常问题整理的主要内容,如果未能解决你的问题,请参考以下文章