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

本文介绍如何使用Cesium加载WMS图层。首先通过加载Cesium并配置基本参数来初始化地图;接着通过子组件传递WMS图层URL至地图组件;最后解析URL并添加图层至Cesium地图中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、代码模块

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.重复添加可以看到加载了多个图层

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值