Vue+Cesium加载用户自定义WMS服务

一、代码模块

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

 

2.加载URL图层

 3.重复添加可以看到加载了多个图层