使用OpenLayers发布离线地图（谷歌地图）

最新推荐文章于 2023-02-23 13:27:04 发布

Keson Z

最新推荐文章于 2023-02-23 13:27:04 发布

阅读量2.4k

点赞数 1

分类专栏： # OpenLayers离线地图的实现文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_44009447/article/details/105513914

版权

OpenLayers离线地图的实现专栏收录该内容

4 篇文章 7 订阅

订阅专栏

说明：本文章参照@z793837435的博文：如何使用OpenLayer发布离线地图

一。下载离线地图下载器

1.这里推荐的地图下载器为BIGEMAP地图下载器，点击链接下载
在这里插入图片描述
2.下载完成后，需要进行授权操作，点击软件右上方QQ交谈加入QQ群，并私聊管理员，然后根据管理员的提示点击购买按钮，复制该授权用户号给管理员，管理员会给你免费激活，如下图所示：

3.激活之后，软件左上角显示已激活。现在该软件暂时是免费的，不清楚之后会不会收费，如果对离线的地图瓦片层级有一定的要求，可自行付费购买，激活下载高清离线地图瓦片的功能。在这里插入图片描述
4.根据自己的需求下载对应的离线地图瓦片，这里以广东省为例，地图选择谷歌地图，如下图所示：

5.选择谷歌地图瓦片，png格式，如下图所示：

6.下载完成后文件夹格式如下：

二。下载OpenLayers

1.现在OpenLayers已经发布了到了v5.3.0版本，这里所用的还是v3.20.1版本，下载地址为：OpenLayer 3

2.下载完成后文件夹格式为：
在这里插入图片描述
3.新建一个outlinemap文件夹，把ol.js与ol.css复制到该文件夹中，再新建一个tile文件夹，将下载好的地图瓦片放进去，完成title文件夹格式如下图所示：

4.新建一个index.html文件，完成后outlinemap文件夹格式如下：
在这里插入图片描述
5.index.html文件代码如下所示：

<head>
    <title>广东省离线地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="ol.css">
    <script type="text/javascript" src="ol.js" charset="utf-8"></script>
    　　</head>
<body style="background:#fdfdfd; margin:0 auto">
<div style="width:730px;margin:30px auto;">

    <div id="map" style="position:absolute; margin-top:30px; width:800px; height:600px; top:50; border:1px solid gray; overflow:hidden;"></div>
</div>
</body>

<script type="text/javascript">
    //地图设置中心，设置为广州
    var center=ol.proj.transform([113.271429,23.135336],'EPSG:4326','EPSG:3857');
//创建地图
    var map=new ol.Map({
        view:new ol.View({
            center:center,
            minZoom:7,//设置缩放的最大和最小级别
            maxZoom:13,
            zoom:7//设置默认加载的级别
        }),
        target:'map'//要显示地图的DIV的ID
    });

//添加一个使用离线瓦片地图的层
    var offLineMap=new ol.layer.Tile({
        source:new ol.source.XYZ({
            url:'tile/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下
        })
    });
    map.addLayer(offLineMap);

</script>
</html>

三。运行效果

1.在浏览器中打开该index.html文件，看到离线地图效果，如下图所示：
在这里插入图片描述

Keson Z

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用OpenLayers发布离线地图（谷歌地图）

说明：本文章参照@z793837435的博文：如何使用OpenLayer发布离线地图一。下载离线地图下载器1.这里推荐的地图下载器为BIGEMAP地图下载器，点击链接下载2.下载完成后，需要进行授权操作，点击软件右上方QQ交谈加入QQ群，并私聊管理员，然后根据管理员的提示点击购买按钮，复制该授权用户号给管理员，管理员会给你免费激活，如下图所示：3.激活之后，软件左上角显示已激活。现在该...
复制链接

扫一扫