使用openlayers加载本地离线地图瓦片的一个最简单地例子

上一篇文章写了 leaflet,本篇说一下openlayers。

第一步,下载:

https://github.com/openlayers/openlayers/releases/download/v6.2.1/v6.2.1-dist.zip

解压后,我们只需要其中两个文件ol.css,ol.js

第二步,下载瓦片,参考上篇文章,https://blog.csdn.net/netying/article/details/105187665

本文不再赘述。

第三步:编写html文件

<html>
<head>
<link rel="stylesheet" href="./ol.css" type="text/css">
<style>
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
.map{height:100%px;width:100%;}
</style>
<script src="./ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var center=ol.proj.transform([110.5,29.5],'EPSG:4326','EPSG:3857');
var map=new ol.Map({view:new ol.View({center:center,zoom:10,minZoom:9,maxZoom:12}),target:'map'});
var offlineMapLayer=new ol.layer.Tile({source:new ol.source.XYZ({url:'./test/{z}/{x}/{y}.jpg'})});
map.addLayer(offlineMapLayer);
</script>
</body>
</html>

同样,我们保存其为index.html,保存在c:\offlinemaps目录下,也就是与test目录在同一级目录下。

ol.css和ol.js两个解压缩后的文件也保存到index.html的同目录下。

第四步:双击index.html,即可看到地图成功加载!

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值