cesium加载geoserver中发布的地图

想要在geoserver中发布地图,首先要先要下载geoserver,下载完成后,可以参考官网的操作文档进行地图的发布,也可以让后端去操作进行发布

然后就是前端引用了。

let imageProvider = new Cesium.WebMapTileServiceImageryProvider({
        url:
          "http://192.168.1.222:8888/geoserver/gwc/service/wmts/rest/world-tiff:world-level0/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
        layer: "world-tiff:world-level0", //图层名称
        style: "",
        format: "image/png",
        tileMatrixSetID: "EPSG:4326",
        tileMatrixLabels: [//这里一共发布了10层图层,有条件的可以多发布
          "EPSG:4326:0",
          "EPSG:4326:1",
          "EPSG:4326:2",
          "EPSG:4326:3",
          "EPSG:4326:4",
          "EPSG:4326:5",
          "EPSG:4326:6",
          "EPSG:4326:7",
          "EPSG:4326:8",
          "EPSG:4326:9",
          "EPSG:4326:10",
        ],
    	//规定好x,y轴所对应的地理位置
        tilingScheme: new Cesium.GeographicTilingScheme({
          numberOfLevelZeroTilesX: 2,
          numberOfLevelZeroTilesY: 1
        })
      });

然后我们需要把cesium自带的地图清除掉

this.viewer.imageryLayers.removeAll();

再将我们发布的地图加入到我们得地球中

this.viewer.imageryLayers.add(
    //将地图添加到cesium中
    new Cesium.ImageryLayer(imageProvider, 0)
);

在此我们就完成了加载geoserver中图层的方法

注:当前端在引用geoserver中的图层时,会有跨域问题的报错,这是geoserver中的问题,需要去修改配置文件,让后就不会有问题了

你可能感兴趣的:(cesium,js,vue)