使用OpenLayers加载离线地图瓦片（天地图标准TMS格式）

鬼马行天

于 2018-12-07 17:15:04 发布

阅读量9.4k

点赞数 3

分类专栏： OpenLayers GIS OpenLayers5小白之路文章标签： OpenLayers WebGIS

本文链接：https://blog.csdn.net/guimaxingtian/article/details/84880720

版权

本文介绍了如何使用OpenLayers加载离线的天地图标准TMS格式瓦片。首先，通过太乐地图下载器获取上海市地图数据，并导出为TMS瓦片。接着，详细说明了OpenLayers的获取和测试环境，强调了不同地图提供商的瓦片规则差异，以及设置正确的坐标系（如EPSG4326和EPSG3857）的重要性。最后，更新内容中指出source的projection参数应设置为资源的投影坐标系，而非目标投影方式，展示了一段修正后的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地图资源的获取

关于地图资源的获取，这个可以用一些常见的地图下载器进行下载，然后将地图数据导出为需要格式的瓦片，我这里使用的是太乐地图下载器，下载的是上海市地图（2-18级），导出为标准的TMS瓦片，文导出的文件是这样的，数字代表层级，每个文件夹下都是X方向的瓦片文件夹，每个X方向的瓦片文件夹下是Y方向的瓦片。
在这里插入图片描述

OpenLayers的获取和测试环境

可以在OpenLayers官网上下载需要的开发包，使用的是build和css文件夹，下面上代码

<!DOCTYPE html>
<html lang="zh-CN">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="./css/ol.css" type="text/css" /> 
  <title>二维地图测试</title> 
  <style>
      .myposition
      {
   
        float:left;
        position:relative;
        bottom: 10px;
        width: 100px;
        height: 10px;
        z-index: 2000;
      }
      .map 
      {
   
        height: 100%;
        width: 95%;
      }
      .mousePosition
      {
   
        color:blue;
        font-size: 15px;
        font-family:'微软雅黑';
      }
    </style> 
  <script src=