环境:Cesium 1.79.1,Geoserver 2.13.1
发布WMS地图服务
Cesium调用WMS地图服务,并获取点击的要素信息
<template>
<div>
<div id="cesiumContainer"></div>
</div>
</template>
<script>
// 鼠标点击WMS地图服务的要素时的回调函数
let cb = function(result){
// 获取要素信息
console.log(result);
}
export default {
name: "Ogc",
data() {
return {
};
},
mounted() {
let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
window.viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
shouldAnimate: true,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
infoBox: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url:
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
}),
});
this.addWmsMap();
},
methods: {
addWmsMap(){
let gfif = new Cesium.GetFeatureInfoFormat('json', 'application/json', cb);
let provider = new Cesium.WebMapServiceImageryProvider({
url : 'http://localhost:8085/geoserver/test/wms',
layers : 'test:bianjie',
getFeatureInfoFormats: [gfif],
});
viewer.imageryLayers.addImageryProvider(provider);
},
},
};
</script>
<style scoped>
#cesiumContainer {
position: absolute;
width: 100%;
height: 100%;
}
.tool{
position: absolute;
left: 10px;
top: 10px;
z-index: 101;
}
</style>