tomcat发布高德1-16级瓦片地图TMS服务,openlayers引擎渲染2d地图

vlambda
2022-03-21

tomcat发布高德1-16级瓦片地图TMS服务,openlayers引擎渲染2d地图

中国

太平洋

tomcat发布高德1-16级瓦片地图TMS服务,openlayers引擎渲染2d地图

美洲

tomcat发布高德1-16级瓦片地图TMS服务,openlayers引擎渲染2d地图

欧洲非洲

tomcat发布高德1-16级瓦片地图TMS服务,openlayers引擎渲染2d地图

大洋洲

tomcat发布高德1-16级瓦片地图TMS服务,openlayers引擎渲染2d地图

下载资源包

1、下载器下载地图服务商的瓦片地图包(1-...级别),一般多一级比资源包之前大4倍多,这里我用到了16级瓦片地图,资源包已达到300多gb.

tomcat发布高德1-16级瓦片地图TMS服务,openlayers引擎渲染2d地图

2、按照谷歌编码规则,将这些资源包依次码好保存下来

发布TMS服务

1、下载tomcat容器,在webapps目录下新建目录xxxx,将之前整理好的瓦片资源包拷贝到该目录下

http://localhost:8080/map/gaode/{z}/{x}/{y}.png

渲染离线地图

 <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>         <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.2.0/ol.css" type="text/css">  
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>         <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.2.0/ol.js"></script>   </head>  <body>  <div id="googleMap" style="width: 100%"></div><script>    // 高德地图服务    var mapLayer = new ol.layer.Tile({        source: new ol.source.XYZ({
             url:'http://localhost:8080/map/gaode/{z}/{x}/{y}.png' }) });
 // 创建地图 var map = new ol.Map({ layers: [            mapLayer ], view: new ol.View({ center: [108.4250, 34.0890], projection: 'EPSG:4326', zoom: 4 }),        target: 'aMap' });</script>  </body>  </html>