一、代码模块
1.加载cesiume(使用的默认底图)
showCesium(){//this.viewer是给组件绑定公共viewer
this.viewer = new Cesium.Viewer('cesiumContainer',{//绑定cesiumContainer盒子
animation : false,
baseLayerPicker : false,
fullscreenButton : false,
vrButton : false,
geocoder : false,
homeButton : false,
infoBox : true,
sceneModePicker : false,
selectionIndicator : false,
timeline : false,
navigationHelpButton : false,
});//清除默认样式
},
2.通过输入url文本框子组件传入url给地图组件
//子组件
getUrl(){
let urlValue = decodeURIComponent(this.urlValue)//将url解析一下,防止用户的url为乱码
this.$emit("getUrl",urlValue)
}
//父组件
<div class="home" id="cesiumContainer">
<inputBoxVue @getUrl="getUrl"></inputBoxVue>
</div>
getUrl(urlValue){
this.mapUrl = urlValue
this.addWmsImageryLayers()//存储url后,调用解析url和添加图层
},
3.解析url,并添加图层
addWmsImageryLayers(){
let _this = this
let parameterObj = {};
//解析url
let url = this.mapUrl
//通过字符串截取方法,截取mapurl,运行结果示例:mapUrl =http://localhost:8081/geoserver/Exercise/wms
let mapUrl = url.substring(url.indexOf("http"),url.indexOf("?"))
//获取参数,并存储到列表里
let parameterList = url.substring(url.indexOf("?")+1).split("&")
//解析参数列表,并配置成key:value的键值对对象
parameterList.some(item=>{
let itemList = item.split("=")
parameterObj[itemList[0].toLowerCase()] = itemList[1]
})
//创建将要插入的图层,并把配置参数
let wmsLayers = new Cesium.WebMapServiceImageryProvider({
url:mapUrl,
layers:parameterObj['layers'],
parameters:{
transparent : true,
format : parameterObj['format'],
srs: parameterObj['srs'],
}
})
//追加图层
this.wmsLayers = wmsLayers
let imageryLayers = this.viewer.imageryLayers
imageryLayers.addImageryProvider(wmsLayers);
}
二、演示模块
1.通过Tomcat运行的Geoserver获取图层URL