目录
cesium加载wms服务
cesium加载wmts服务
cesium加载tms服务
cesium加载wfs服务
首先引入cesium.js，参考：/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>
cesium加载wmts服务
当前服务地址：http://localhost:8090/geoserver/gwc/demo/keshan:sichuan?gridSet=EPSG:900913&format=image/png
<template><div style="height: 100vh"><div id="cesiumContainer" /></div></template><script>export default {data() {return {};},mounted() {const viewer = new Cesium.Viewer("cesiumContainer");const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({url: "http://localhost:8090/geoserver/gwc/service/wmts/rest/keshan:sichuan/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png", //注意：要有{TileMatrixSet}:{TileMatrix}layer: "keshan:sichuan",style: "", //务必加上style属性，哪怕style属性值为空字符串！！！！format: "image/png",tileMatrixSetID: "EPSG:900913", //不能用4326，否则cesium中不显示});viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);},};</script>
调用EPSG4326坐标系下的地图服务，需要加上
tilingScheme: new Cesium.GeographicTilingScheme()
<template><div style="height: 100vh"><div id="cesiumContainer" /></div></template><script>export default {data() {return {};},mounted() {const viewer = new Cesium.Viewer("cesiumContainer");const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({url: "http://localhost:8090/geoserver/gwc/service/wmts/rest/keshan:sichuan/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png", //注意：要有{TileMatrixSet}:{TileMatrix}layer: "keshan:sichuan",style: "", //务必加上style属性，哪怕style属性值为空字符串！！！！format: "image/png",tileMatrixSetID: "EPSG:4326",tilingScheme: new Cesium.GeographicTilingScheme(), //加载4326需要添加这一行});viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);},};</script>
要注意的几个地方：
1、务必加上style属性，哪怕style属性值为空字符串！！！！即：style: ""
2、wmts列表中的链接有问题，缺少{TileMatrixSet}:{TileMatrix}，访问时url记得要添上。即完整url为：http://localhost:8090/geoserver/gwc/service/wmts/rest/keshan:sichuan/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png
cesium加载tms服务
<template><div style="height: 100vh"><div id="cesiumContainer" /></div></template><script>export default {data() {return {};},mounted() {const viewer = new Cesium.Viewer("cesiumContainer");const urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({url: "http://localhost:8090/geoserver/gwc/service/tms/1.0.0/keshan%3Asichuan@EPSG%3A900913@png/{z}/{x}/{reverseY}.png",});viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);},};</script>
注意：cesium调用地图服务的时候，默认的坐标系是EPSG3857，默认的切片原点是左上角，即-180，90。如果是调用EPSG4326坐标系下的地图服务，需要加上
tilingScheme: new Cesium.GeographicTilingScheme()
<template><div style="height: 100vh"><div id="cesiumContainer" /></div></template><script>export default {data() {return {};},mounted() {const viewer = new Cesium.Viewer("cesiumContainer");const urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({url: "http://localhost:8090/geoserver/gwc/service/tms/1.0.0/keshan%3Asichuan@EPSG%3A4326@png/{z}/{x}/{reverseY}.png",tilingScheme: new Cesium.GeographicTilingScheme(),});viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);},};</script>
cesium加载wfs服务
<template><div style="height: 100vh"><el-button type="primary" @click="addGeoJson()">addGeoJson</el-button><div id="cesiumContainer" /></div></template><script>import axios from "axios";export default {data() {return {viewer: {},};},mounted() {this.viewer = new Cesium.Viewer("cesiumContainer");},methods: {async addGeoJson() {let { data } = await axios.get("http://localhost:8090/geoserver/keshan/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=keshan%3Asichuan&maxFeatures=50000&outputFormat=application%2Fjson");this.viewer.dataSources.add(Cesium.GeoJsonDataSource.load(data));},},};</script>
