1500字范文 > openlayers加载本地离线地图瓦片 (五)

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

时间：2020-06-20 10:47:16

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'},})});