构造GIS Web（瓦片地图）服务器

最新推荐文章于 2025-03-07 21:56:10 发布

灵湖映北辰

最新推荐文章于 2025-03-07 21:56:10 发布

阅读量1.6k

点赞数 1

分类专栏：我的付费专栏前端文章标签：前端服务器运维

本文链接：https://blog.youkuaiyun.com/qq_33304139/article/details/121294230

版权

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

我的付费专栏

4 篇文章

订阅专栏

本文介绍了如何在内网构建瓦片地图服务器，满足离线查看地图的需求。通过下载Tomcat，获取OpenStreetMap数据，使用Maperitive转换并生成瓦片，然后部署到Tomcat服务器，最后使用前端JS（如openlayer）调用地图服务。

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

需求场景

web页面需要制作离线地图，无法获得公开的瓦片地图地址。此时需要我们在内网中发布瓦片地图服务器

思路

瓦片地图的本质就是图片集合，其实就是搭建一个图片服务器

1.服务器使用tomcat

2.获取瓦片数据，放到tomcat中

3.使用前端代码绑定tomcat服务器瓦片地图地址

1.tomcat下载

Apache Tomcat® - Welcome! 使用官网链接找到对应的下载链接下载即可

2.瓦片数据下载

瓦片数据网上大家说的比较多，这里说一种自己尝试且成功的方式

1.下载OpenStreetMap离线地图数据 Geofabrik Download Server

主要是从这个网站下载osm 数据，选择区域后，下载即可

2.处理osm数据使用Maperitive 这个软件处理osm数据 Maperitive

运行exe程序，左上角 file->open map sources 找到下载的osm文件打开。

此时右下角Map Sources 有两个地图数据源，将原生的取消。剩下的就是下载下来的地图。

3.使用命令行工具生成瓦片地图。

左边部分 Commander ，打开，这个是个命令行工具

在下方的Command prompt 可以输入指令。

输入：（这里将zoom 范围设置的1~3）

generate-tiles minzoom=1 maxzoom=3

运行过后，在Maperitive的安装目录下就会多一个Tiles文件夹。

实际上如果没有硬性要求，直接使用Maperitive原生的地图也可以导出。

3.数据部署

将tiles目录拉取到tomcat的webapp目录下，启动tomcat（默认端口8080）

使用url访问tiles下的资源 localhost:8080/tiles/1/2/3 （1,2,3这个目录才能访问，这里举个例子）

如果浏览器访问以上地址成功，则说明服务器搭建成功，前端可以使用相应的api调用即可

4.使用js进行调用

作者简单使用openlayer进行对瓦片服务的调用，并展示地图（暂时没有修改，应该是修改source部分改为连接地址即可）

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href=".\css\ol.css" type="text/css">   
    <script src=".\lib\ol.js"></script>  
    <title>Accessible Map</title>
  </head>
  <body>

        <div id="map" class="map" style="height:500px;width:700px"></div>  
    <script>          
      var extent=[-180,-90,180,83.62741851011907];//BBOX范围值          
      var map = new ol.Map({  
        layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			}),
			],
        target: 'map',  
        view: new ol.View({  
            center:[116.28, 39.54], //<1>设置固定中心点  
            zoom: 3
        })  
      });  
        
      //map.getView().setCenter(ol.extent.getCenter(extent));    // <2>动态设置中心点  
    </script>  
  </body>
</html>