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

DreamBoat_2048

已于 2022-09-29 10:29:28 修改

阅读量772

点赞数

CC 4.0 BY-SA版权

分类专栏： Cesium学习文章标签： vue.js javascript 前端

于 2022-09-28 10:29:52 首次发布

本文链接：https://blog.youkuaiyun.com/DREAM_BOAT_1/article/details/127083732

Cesium学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用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);
}