cesium
cesium-加载geoserver发布的tms服务
效果
核心代码
let smart = new Cesium.UrlTemplateImageryProvider({url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png",rectangle : Cesium.Rectangle.fromDegrees(120.2987119,31.48071626, 120.6114519, 31.74685626) //切片加载范围});that._viewer.imageryLayers.addImageryProvider(smart);
完整代码
<!-- home -->
<template><div class="home"><el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px;margin: 8px;"><el-breadcrumb-item :to="{ path: '/' }">cesium</el-breadcrumb-item><el-breadcrumb-item>影像服务</el-breadcrumb-item><el-breadcrumb-item>GeoServer-TMS</el-breadcrumb-item></el-breadcrumb><div id="cesiumContainer"></div></div>
</template><script>
export default {name: "demo05_geoserver_tms",data() {return {map: {},_viewer: undefined,imgLayer: null,};},components: {},created() {},mounted() {this.initMap()},computed: {},methods: {initMap() {let that = this;//天地图tokenlet TDT_tk = "token";//Cesium tokenlet cesium_tk = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWRlMmQ1Ni1iNGMxLTRhY2YtYmExYi1jNjYyNTUxNDhjYzgiLCJpZCI6MjMwODAsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyIsInByIl0sImlhdCI6MTU4OTE4NzE1NH0.QrUVmI13wKIqFwmnsGSR6aMr8FEtbO7jsTA0mqnvbdM";let TDT_URL = "https://{s}.tianditu.gov.cn/";//标注let TDT_CIA_C = TDT_URL + "cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;//初始页面加载Cesium.Ion.defaultAccessToken = cesium_tk;that._viewer = new Cesium.Viewer('cesiumContainer');// 添加mapbox自定义地图实例mapbox:let layer=new Cesium.MapboxStyleImageryProvider({url:'',username:'sungang',styleId: 'styleId',accessToken: 'accessToken',scaleFactor:true});that._viewer.imageryLayers.addImageryProvider(layer);let smart = new Cesium.UrlTemplateImageryProvider({url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png",rectangle : Cesium.Rectangle.fromDegrees(120.2987119,31.48071626, 120.6114519, 31.74685626) //切片加载范围});that._viewer.imageryLayers.addImageryProvider(smart);that._viewer.camera.setView({// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州// fromDegrees()方法，将经纬度和高程转换为世界坐标destination: Cesium.Cartesian3.fromDegrees(118.78, 32.07, 10000000.0),orientation: {// 指向heading: Cesium.Math.toRadians(0),// 视角pitch: Cesium.Math.toRadians(-90),roll: 0.0}});}}
};
</script><style scoped>.home {height: 100%;width: 100%;margin: 0;padding: 0;overflow: hidden;
}#cesiumContainer {height: 90%;width: 100%;margin: 0;padding: 0;overflow: hidden;
}</style>
cesium
cesium-加载geoserver发布的tms服务
效果
核心代码
let smart = new Cesium.UrlTemplateImageryProvider({url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png",rectangle : Cesium.Rectangle.fromDegrees(120.2987119,31.48071626, 120.6114519, 31.74685626) //切片加载范围});that._viewer.imageryLayers.addImageryProvider(smart);
完整代码
<!-- home -->
<template><div class="home"><el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px;margin: 8px;"><el-breadcrumb-item :to="{ path: '/' }">cesium</el-breadcrumb-item><el-breadcrumb-item>影像服务</el-breadcrumb-item><el-breadcrumb-item>GeoServer-TMS</el-breadcrumb-item></el-breadcrumb><div id="cesiumContainer"></div></div>
</template><script>
export default {name: "demo05_geoserver_tms",data() {return {map: {},_viewer: undefined,imgLayer: null,};},components: {},created() {},mounted() {this.initMap()},computed: {},methods: {initMap() {let that = this;//天地图tokenlet TDT_tk = "token";//Cesium tokenlet cesium_tk = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWRlMmQ1Ni1iNGMxLTRhY2YtYmExYi1jNjYyNTUxNDhjYzgiLCJpZCI6MjMwODAsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyIsInByIl0sImlhdCI6MTU4OTE4NzE1NH0.QrUVmI13wKIqFwmnsGSR6aMr8FEtbO7jsTA0mqnvbdM";let TDT_URL = "https://{s}.tianditu.gov.cn/";//标注let TDT_CIA_C = TDT_URL + "cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;//初始页面加载Cesium.Ion.defaultAccessToken = cesium_tk;that._viewer = new Cesium.Viewer('cesiumContainer');// 添加mapbox自定义地图实例mapbox:let layer=new Cesium.MapboxStyleImageryProvider({url:'',username:'sungang',styleId: 'styleId',accessToken: 'accessToken',scaleFactor:true});that._viewer.imageryLayers.addImageryProvider(layer);let smart = new Cesium.UrlTemplateImageryProvider({url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png",rectangle : Cesium.Rectangle.fromDegrees(120.2987119,31.48071626, 120.6114519, 31.74685626) //切片加载范围});that._viewer.imageryLayers.addImageryProvider(smart);that._viewer.camera.setView({// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州// fromDegrees()方法，将经纬度和高程转换为世界坐标destination: Cesium.Cartesian3.fromDegrees(118.78, 32.07, 10000000.0),orientation: {// 指向heading: Cesium.Math.toRadians(0),// 视角pitch: Cesium.Math.toRadians(-90),roll: 0.0}});}}
};
</script><style scoped>.home {height: 100%;width: 100%;margin: 0;padding: 0;overflow: hidden;
}#cesiumContainer {height: 90%;width: 100%;margin: 0;padding: 0;overflow: hidden;
}</style>