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:'https://api.mapbox.com/styles/v1',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-加载geoserver发布的tms服务相关推荐

cesium加载geoserver发布的mvt服务
cesium 本身并不支持矢量切片的加载,所以需要借助其他工具进行解析.在Canvas中把矢量瓦片绘制好了,以图片形式像WMTS一样向Cesium提供图片服务就行了,当然也可以采用中间件的形式在后台把 ...
ArcGIS JS API加载GeoServer发布的WFS服务
文章目录前言主要代码总结参考链接前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
Cesium加载geoserver发布的wms地图服务-设置BBOX参数无效
一.问题描述: 地图服务是geoserver发布的wms地图服务,使用cesium加载渲染,加载代码如下. // Cesium加载wms var wms = new Cesium.WebMapServ ...
leaflet 加载 geoserver 发布的 wms 服务
1. 安装 geoserver 服务:略 2. 启动 geoserver: 3. 登录 geoserver 控制台:( 默认账号.密码为 admin.geoserver ) 4. 新建工作区: 5. ...
Leaflet中加载Geoserver发布的WMS服务显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
Cesium加载GeoServer WMS、WMTS服务
版本信息 Cesium 1.56.1 GeoServer 2.16.0 关于GeoServer如何发布WMS.WMTS服务请参考上一篇文章GeoServer数据服务发布及切片.如果您对什么是WMS.W ...
Vue+OpenLayers学习系列（十一）使用axios加载GeoServer发布的WFS服务
一.问题 1.之前用下面官网的方法 source.addFeatures() 将查询的图层信息加载到 source 里面,但是不知道为啥,死活出不来,也不报错,就很奇怪. var source = n ...
World Wind Java开发之十三——加载Geoserver发布的WMS服务（转）
这篇是转载的平常心博客,原地址见:http://www.v5cn.cn/?p=171 1.WMSTiledImageLayer类说明一个WMSTiledImageLayer类对象只能对应一个WMS发 ...
高德地图 sdk 加载 geoserver 发布的瓦片地图服务
前言最近,碰到了需求,想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图. 还好经过一番研究,在其官方文档中发现,从新版本(v1.4.3开始)的高德 sdk 开始,已经支持加载第三 ...

cesium-加载geoserver发布的tms服务

cesium-加载geoserver发布的tms服务

效果

核心代码

完整代码

cesium-加载geoserver发布的tms服务相关推荐

最新文章

热门文章