作业系统对接指导手册 作业系统对接指导手册
首页
  • 地图对接
  • 服务对接
路径规划
视频分析
知识星球
位置平台
图创官网 (opens new window)
首页
  • 地图对接
  • 服务对接
路径规划
视频分析
知识星球
位置平台
图创官网 (opens new window)
  • 坐标系

    • 坐标系
  • 常用地图服务

    • 常用地图服务
    • 天地图
    • openlayers加载tms切片图层
  • 常用设计资源

    • 设计资源
  • 常用开发组件

    • nvm
    • web服务器
    • win下安装postgresql集群
    • mapbox4490
    • centosToAliyun
  • docker

    • Docker常见安装以及地址存档
    • Docker日志处理
    • Docker目录迁移
    • 在IDEA中推送Docker镜像
    • Docker在线安裝腳本
    • Docker离线安裝腳本
  • 番外

    • 位置分享小程序
  • 知识星球
  • 常用地图服务
北京图创
2024-06-28

openlayers加载tms切片图层

TMS服务主要分为谷歌TMS瓦片和标准TMS瓦片的切片,
根据网上找到的资料ol3舍弃了直接加载TMS服务的方法,但是可以通过类似于加载WMS瓦片的形式来加载TMS瓦片地图。
网上很多资料说加载瓦片地图的方式如下:

谷歌TMS瓦片加载:

new ol.layer.Tile({
    source: new ol.source.XYZ({
        tileUrlFunction: function (tileCoord) {
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = - tileCoord[2];
            return "http://localhost:8080/map/谷歌TMS/" + z + "/" + x + "/" + y + ".png";
        }
    })
})

标准TMS瓦片的加载:

new ol.layer.Tile({
    source: new ol.source.XYZ({
        tileUrlFunction: function (tileCoord) {
            var z = tileCoord[0];
            var x = tileCoord[1];
            y = Math.pow(2, z) + tileCoord[2] - 1;
            return "http://localhost:8080/map/标准TMS/" + z + "/" + x + "/" + y + ".png";
        }
    })
})

也就是需要对y的值进行重新计算,以上两种方式确实可以加载出来,
但是不知道是不是我ol的版本问题, 加载出来的地图始终跟我的底图偏移了(相同坐标系情况下), 可能是我ol版本比较低,另外一种加载方式解决了本人的问题,加载方式如下:

标准TMS瓦片加载:

source: new ol.source.XYZ({
    /**标准TMS服务**/
    url: 'http://192.168.123.1:8080/map/{z}/{x}/{-y}.png'
})

谷歌TMS瓦片加载:

source: new ol.source.XYZ({
    /**谷歌TMS服务**/
    url: 'http://192.168.123.1:8080/map/{z}/{x}/{y}.png'
})

最开始我使用的是第一种加载方式,确实加载出来了,但是位置对不上,一度认为是坐标系不一致的问题,改了大半天,换了种加载方式就好了,希望有帮助。

上次更新: 2024/06/28, 14:11:37
天地图
设计资源

← 天地图 设计资源→

Theme by Vdoing | Copyright © 2023-2026 北京图创时代科技有限公司版权所有
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式