1. 准备工作

准备好openlayers的js、css文件和上篇文章下载的上海地图瓦片。新建一个html文件，我的目录是这样的：

2. 引用文件

<link rel="stylesheet" href="./static/ol.css">
<script src="./static/ol.js"></script>

3. 添加容器

<div id="map"></div>

4. 创建地图

var map = new ol.Map({view: new ol.View({center: [121.5025,31.237015], // 中心点, 填的是经纬度projection: 'EPSG:4326',  // EPSG:4326格式的经纬度zoom: 14, // 地图默认缩放级别maxZoom: 15,  // 地图最大缩放级别minZoom: 11,  // 地图最小缩放级别}),target: 'map', // 地图容器id
})

5. 创建一个使用离线地图瓦片的层

var offlineMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: './tiles/{z}/{x}/{y}.png',})
});

6. 将层添加进地图

map.addLayer(offlineMapLayer);

7. 地图就展示出来啦~

8. 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo</title><link rel="stylesheet" href="./static/ol.css"><script src="./static/ol.js"></script>
</head>
<body><div id="map"></div><script type="text/javascript">// 创建地图var map = new ol.Map({view: new ol.View({center: [121.5025,31.237015], // 中心点, 填的是经纬度projection: 'EPSG:4326',  // EPSG:4326格式的经纬度zoom: 14, // 地图默认缩放级别maxZoom: 15,  // 地图最大缩放级别minZoom: 11,  // 地图最小缩放级别}),target: 'map', // 地图容器id})// 创建一个使用离线地图瓦片的层var offlineMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: './tiles/{z}/{x}/{y}.png',})});// 将层添加进地图map.addLayer(offlineMapLayer);</script>
</body>
</html>

如果地图瓦片是TMS格式，创建一个使用离线地图瓦片的层里面代码需要改一下，如下

var offlineMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({tileUrlFunction: function(tileCoord) {var z = tileCoord[0];var x = tileCoord[1];var y = Math.pow(2, z) + tileCoord[2];return './tiles/' + z + '/' + x + '/' + y + '.png'},})
});

9. 补充

这里补充一下，demo中new View的时候我使用了projection: ‘EPSG:4326’
在我不断的体验之后，不推荐这样使用，因为后面会面临各种莫名其妙的问题，建议还是使用EPSG:3857。
牢记一句话，经纬度存储计算用EPSG:4326也就是WGS84，数据展示用EPSG:3857。
2个格式的数据怎么互转呢？

可以通过ol/proj/transform这个方法
例: transform([121.501842, 31.239204], ‘EPSG:4326’, ‘EPSG:3857’),

使用gcoord这个库

npm install gcoord --save

import gcoord from 'gcoord'
const xy = gcoord.transform([经度, 纬度],gcoord.EPSG4326,gcoord.EPSG3857)

openlayers加载本地离线地图瓦片 (五)相关推荐

osgearth加载本地离线影像瓦片地图
osgearth加载本地离线影像瓦片地图案例说明本实例演示重新编译bing驱动直接加载本地离线影像瓦片地图. 本实例使用软件版本:osg3.3.1和osgEarth2.5 VC10编译环境(参考o ...
使用OpenLayers加载高德离线地图简单实用
转载请标注:http://blog.csdn.net/qq_25552049/article/details/79453414 概述 OpenLayers是一个用于开发WebGIS客户端的Java ...
离线GoogleMapAPIV3加载本地谷歌地图并添加标注
利用离线GoogleMapAPIV3加载本地谷歌地图并添加标注一.准备工作下载GoogleMapAPIV3.rar. 二.下载地图首先通过水经注下载器把谷歌卫星地图下载下来. 三.地图引擎部署 ...
Qt之加载百度离线地图（WebKit和WebEngine）
最近翻看进年前写了一篇关于百度离线地图的博客:Qt加载百度离线地图,发现存在很多问题,比如不能加载折线等图形覆盖物:只支持QtWebKit,不支持QtWebEngine. 之前做项目需要在百度离线地图 ...
Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)
场景 Openlayers中加载GeoJson文件显示地图: Openlayers中加载GeoJson文件显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面加载显示GeoJso ...
openlayers加载本地arcgis切片（explodes）的两种方式，利用geowebcache进行发布和直接读取本地切片
由于Arcgis的普及,经常会使用ArcgisServer对地图进行切片,且缓存在本地.如果能使用开源工具对该本地缓存进行加载的话,有时候能够节省不少精力和时间,因此本人对openlayers加载ar ...
前端加载高德离线地图的解决方案
核心是需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图. 使用BIGMap工具下载地图离线瓦片到本地下载地址:http://www.bigemap.com/reader/download ...
Qt加载百度离线地图
1.下载百度地图离线API 1.3 下载链接:http://download.csdn.net/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...
如何使用Openlayers 3加载谷歌离线地图
谷歌地图部署说明:使用地图下载工具下载的谷歌离线地图大致如下结构,使用合适的WEB服务器发布地图服务. 使用Openlayers 3调用地图服务说明:这里使用ol.source.XYZ(更多语法请 ...

openlayers加载本地离线地图瓦片 (五)