目录
一、 vue项目中使用cesium且使用geoserver服务
二、 vue项目中使用cesium且使用geoserver服务,实现条件查询及拿到过滤之后的json数据
三、 cql_filter中文字段名问题
四、 铁路样式以及在小比例尺下样式变形问题
五、 广告牌billboard
(1)新建广告牌
(2)清除模型
(3)billboard贴地形表
(4)设置透明度
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 => {
//拿到数据之后,你要执行的操作
})
对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 => {
//拿到数据之后,你要执行的操作
})
问题: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");
}
完美解决。
铁路样式采用遮盖的方式实现,既底下放一层灰色的较粗线,上面再放一条较细的白线,控制白线的显示隐藏,就能形成铁路的样式
采用分级渲染的方式,
Default Styler
1
simple
Feature
generic:geometry
simple
#7F7F7F
3
#FFFFFF
1.0
13
16
279936
#7F7F7F
3
#FFFFFF
1.0
13
20
150000
279936
#7F7F7F
4
#FFFFFF
2.0
13
20
30000
150000
#7F7F7F
6
#FFFFFF
3.0
13
20
8000
30000
#7F7F7F
6
#FFFFFF
4.0
13
20
8000
billboard也叫广告牌,用图片标注的形式表示地理点位信息。是一种特别简单的模型(D3D里面好像是这么说的),它会自动计算,使图片下面始终面向摄像机,这种技术也叫广告牌技术。
代码中常用到的属性有以下几个:
pixelOffsetScaleByDistance:设置距离方位内,Billboard或Label的偏移量比例。
translucencyByDistance :设置距离方位内,Billboard或Label的半透明度比例。
heightReference:获取或设置高度引用的广告牌
position:经纬度信息。
方法一:在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
),
});
if(billboard2 != undefined) {
viewer.primitives.remove(billboard2)
}
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
更改广告牌billboard的颜色,使其具有一个透明度,
color: Ceisum.ColorGeometryInstanceAttribute,fromColor(Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.6))