用openlayers在加载离线瓦片（里面附带下载瓦片的软件，请往下看）

最新推荐文章于 2024-08-29 15:16:03 发布

浩星

最新推荐文章于 2024-08-29 15:16:03 发布

阅读量2.8k

点赞数 1

分类专栏： map 文章标签： openlayers加载离线瓦片

本文链接：https://blog.csdn.net/qq_41619796/article/details/90240990

版权

map 专栏收录该内容

25 篇文章 23 订阅

订阅专栏

首先先来看看效果：这个是谷歌卫星图

然后我们说说怎么实现的吧：

<!DOCTYPE html>
<html>
<head>
	<title>离线瓦片</title>
	<link rel="stylesheet" href="css/ol.css">
</head>
<body>
	
	<div id="map" style="width: 100%;height: 800px;"></div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/ol.js"></script>
<script type="text/javascript">
    var center = ol.proj.transform([112.233778,22.688963], 'EPSG:4326', 'EPSG:3857');//设置中心位置

    //1、创建地图
    var map = new ol.Map({
        view: new ol.View({ 
            center: center,
            zoom: 1, //瓦片的层级-请根据自身需要
        }),
        target: 'map'
    });

    //2、添加一个使用离线瓦片地图的层
    var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'china(weixing)/googlemaps/satellite/{z}/{x}/{y}.jpg'//特别注意，这里的z-x-y的顺序，我因为这里找了好久的问题
        })
    });

    //3、将瓦片层级添加到地图里面
    map.addLayer(offlineMapLayer);
</script>

这里的话因为离线瓦片太大，我就只传4层的瓦片，下面有需要的朋友可以把源码当下来看看

百度网盘地址：https://pan.baidu.com/s/166HX7AWVwRsESB7FwY_quQ 提取码：r8qm

下面来介绍下我使用的获得离线瓦片的工具 全能地图下载（破解版）

https://blog.csdn.net/qq_41619796/article/details/90241491