对接部自定义的wmts-yzt服务接口构建以及加载示例

📅 2026/7/1 5:33:08
对接部自定义的wmts-yzt服务接口构建以及加载示例
背景在使用iserver地图服务时除了发布常用的rest服务外还需要发布公共的ogc标准服务比如wmts服务和wfs服务但是wmts服务的tileMatrixSet、tileMatrix不一致orgin 原点也各不相同金字塔层级也不相同为了构建标准的共享机制以某项目的ogc服务为标准将iserver的地图服务、数据服务公共共享。参考文档SuperMap iServer wmts服务 修改为全球范围 SuperMap iServer wmts服务 修改为全球范围_wmts服务怎么改topleftcorner不影响原始boundingbox-CSDN博客实现目标任意地图服务勾上wmts-yzt接口后任意厂商都可对接使用iserver发布的wmts服务iserver新建wmts-yzt服务接口在iserver新建基于wmts的接口wmts-yzt在服务管理界面点击旧版UI点击服务接口点击号新建wmts-yzt服务然后自定义Custom比例尺度将以下比例尺复制dpi默认96点击保存591658710.9,295829355.45,147914677.73,73957338.86,36978669.43,18489334.72,9244667.36,4622333.68,2311166.84,1155583.42,577791.71,288895.85,144447.93,72223.96,36111.98,18055.99,9028,4514,2257,1128.5,564.25修改服务接口的全幅范围参数是customEntireBounds# 3857 customEntireBounds-20037508.339999999850988,-20037507,20037507.339999999850988,20037508/customEntireBounds #4326 / 4490 customEntireBounds-180,-90,180,90/customEntireBounds在\supermap-iserver-12.0.1.0-260413-8789-129378-windows-x64-deploy\webapps\iserver\WEB-INF\iserver-services-interfaces.xml将此接口修改为全球范围interface classcom.supermap.services.wmts.WMTSServlet namewmts-yzt config classcom.supermap.services.wmts.WMTSConfig customEntireBounds-180,-90,180,90/customEntireBounds identification keywords/ /identification provider serviceContact/ /provider hideFeatureInfofalse/hideFeatureInfo tileMatrixSets com.supermap.services.wmts.TileMatrixSet wellKnownScaleSetCustom/wellKnownScaleSet scales591658710.9,295829355.45,147914677.73,73957338.86,36978669.43,18489334.72,9244667.36,4622333.68,2311166.84,1155583.42,577791.71,288895.85,144447.93,72223.96,36111.98,18055.99,9028,4514,2257,1128.5,564.25/scales dpi96.0/dpi tileWidth256/tileWidth tileHeight256/tileHeight /com.supermap.services.wmts.TileMatrixSet /tileMatrixSets verifyModeDEFAULT/verifyMode disableExpandScalesfalse/disableExpandScales /config /interface重新启动iserver可以看到wmts-yzt的topleftcorner修改成了90-180旧的修改成功各框架加载wmts-yzt服务的示例lealfetleaflet加载代码如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleLeaflet 加载 WMTS - 武汉气象/title link relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css / style * { margin: 0; padding: 0; } html, body, #map { width: 100%; height: 100%; } /style /head body div idmap/div script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/script script /** * 自定义 WMTS 瓦片图层 * 将 Leaflet 的 EPSG:4326 瓦片坐标映射到 SuperMap iServer WMTS RESTful 接口 * * 映射关系 * WMTS TileMatrix Leaflet zoom 1 * WMTS TileCol Leaflet tile x * WMTS TileRow Leaflet tile y */ var WMTSLayer L.TileLayer.extend({ initialize: function (options) { options L.extend({ tileSize: 256, minZoom: 0, maxZoom: 19, noWrap: true, attribution: 武汉气象 | SuperMap iServer WMTS }, options); L.TileLayer.prototype.initialize.call(this, , options); }, getTileUrl: function (coords) { var z coords.z; var x coords.x; var y coords.y; // WMTS TileMatrix Leaflet zoom 1 var tileMatrix z 1; // EPSG:4326 各级别瓦片数量2^(z1) 列 × 2^z 行 var numCols Math.pow(2, z 1); var numRows Math.pow(2, z); // 超出范围返回空图片 if (x 0 || x numCols || y 0 || y numRows) { return L.Util.emptyImageUrl; } // 构造 RESTful WMTS URL // 模板{baseUrl}/{layer}/{style}/{tileMatrixSet}/{tileMatrix}/{tileRow}/{tileCol}.png var baseUrl http://localhost:8090/iserver/services/map-CeShi/wmts-yzt; var layer encodeURIComponent(武汉气象); var style default; var tileMatrixSet encodeURIComponent(Custom_武汉气象); return baseUrl / layer / style / tileMatrixSet / tileMatrix / y / x .png; } }); // 创建地图实例使用 EPSG:4326 坐标系 var map L.map(map, { crs: L.CRS.EPSG4326, // 必须使用 EPSG:4326与 WMTS 服务一致 center: [30.6, 114.3], // 武汉中心坐标 zoom: 8, zoomControl: true }); // 添加 WMTS 图层 var wmtsLayer new WMTSLayer(); wmtsLayer.addTo(map); /script /body /htmlcesiumcesium原生加载如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCesium 加载 WMTS - 武汉气象/title script srchttps://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js/script link hrefhttps://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css relstylesheet style * { margin: 0; padding: 0; } html, body, #cesiumContainer { width: 100%; height: 100%; } /style /head body div idcesiumContainer/div script // 设置 Cesium 静态资源路径 window.CESIUM_BASE_URL https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/; // 初始化 Cesium Viewer不加载默认底图 var viewer new Cesium.Viewer(cesiumContainer, { baseLayerPicker: false, imageryProvider: false, homeButton: false, animation: false, timeline: false, fullscreenButton: false, geocoder: false, sceneModePicker: false, navigationHelpButton: false, infoBox: false }); // 清除默认图层 viewer.imageryLayers.removeAll(); /** * 使用 UrlTemplateImageryProvider 加载 SuperMap iServer WMTS 服务 * * 瓦片映射关系 * Cesium level 0 → WMTS TileMatrix 1 (2列 × 1行) * Cesium level 1 → WMTS TileMatrix 2 (4列 × 2行) * Cesium level N → WMTS TileMatrix N1 * * 两者均使用 EPSG:4326 GeographicTilingScheme * 原点 TopLeftCorner 均为 90.0 -180.0行列完全对应。 */ var provider new Cesium.UrlTemplateImageryProvider({ // RESTful 模板{layer}/{style}/{tileMatrixSet}/{tileMatrix}/{y}/{x}.png url: http://localhost:8090/iserver/services/map-CeShi/wmts-yzt/{layer}/{style}/{tileMatrixSet}/{tileMatrix}/{y}/{x}.png, customTags: { layer: function () { return 武汉气象; }, style: function () { return default; }, tileMatrixSet: function () { return Custom_武汉气象; }, tileMatrix: function (imageryProvider, x, y, level) { // WMTS TileMatrix Cesium level 1 return level 1; } }, tilingScheme: new Cesium.GeographicTilingScheme({ numberOfLevelZeroTilesX: 2, numberOfLevelZeroTilesY: 1 }), tileWidth: 256, tileHeight: 256, minimumLevel: 0, maximumLevel: 19, credit: 武汉气象 | SuperMap iServer WMTS }); viewer.imageryLayers.addImageryProvider(provider); // 定位到武汉上空 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(114.3, 30.6, 500000) }); /script /body /html