cesium加载wms、wmts、tms、wfs服务

目录

cesium加载wms服务 

 cesium加载wmts服务  

 cesium加载tms服务

 cesium加载wfs服务

---

首先引入cesium.js，参考：https://blog.csdn.net/qq_40323256/article/details/108475669

cesium加载wms服务 

  该示例中geoserver发布的地图服务地址如下：http://localhost:8090/geoserver/keshan/wms?service=WMS&version=1.1.0&request=GetMap&layers=keshan%3Asichuan&bbox=97.350096%2C26.045865%2C108.546488%2C34.312446&width=768&height=567&srs=EPSG%3A4326&format=application/openlayers

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer");
    const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
      url: "http://localhost:8090/geoserver/keshan/wms",
      layers: "keshan:sichuan",
      parameters: {
        transparent: true, //务必设为true。否则不显示底图
        format: "image/png",
        srs: "EPSG:4326",
      },
    });
    viewer.imageryLayers.addImageryProvider(wmsImageryProvider);
  },
};
</script>