使用openlayers加载本地离线地图瓦片的一个最简单地例子_openlayer加载离线地图-程序员宅基地

上一篇文章写了 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,即可看到地图成功加载!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/netying/article/details/105211134

智能推荐

计算机主机故障有哪些,电脑硬件常见故障有哪些-程序员宅基地

文章浏览阅读1.7k次。电脑硬件常见故障有哪些计算机硬件是指计算机系统中由电子,机械和光电元件等组成的各种物理装置的总称。下面小编来给大家介绍电脑硬件常见故障,希望对大家有帮助!1、CPU温度是CPU常见的'一个问题,CPU温度过高的时候会出现电脑频繁重启的现象,而且是每次开机还未进入系统就重启了,每次重启的时间也越来越短,这个时候就很有可能是CPU温度过高。2、主板电脑有时候开机屏幕上什么也不显示,并且没有出现报错声时..._电脑主机故障的八种表现和对应的现象是什么

java 之 静态泛型方法_java static 泛型 方法-程序员宅基地

文章浏览阅读585次。java 之 静态泛型方法_java static 泛型 方法

Django计算机毕业设计菜鸟驿站快递分发系统(程序+LW)Python_菜鸟驿站diango-程序员宅基地

文章浏览阅读169次。该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置:Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+Navicat11+Django+nodejs。项目技术:django + python+ Vue 等等组成,B/S模式 +pychram管理等等。环境需要1.运行环境:最好是python3.7.7,我们在这个版本上开发的。其他版本理论上也可以。2.pycharm环境:pycharm都可以。推荐pycharm社区版;3_菜鸟驿站diango

一站式在线协作开源办公软件ONLYOFFICE,协作更安全更便捷_在线office 开源-程序员宅基地

文章浏览阅读3.6w次,点赞151次,收藏134次。一站式在线协作办公软件ONLYOFFICE,协作更便捷_在线office 开源

Qt for Windows:Qt 5.6.0 MinGW 静态编译版本制作_qt5.6.0mingw版-程序员宅基地

文章浏览阅读2.9w次,点赞10次,收藏39次。本文将讲述如何在Windows系统中,Qt源码,编译并且安装,以制作出一个可以一键静态编译Qt版本我使用的环境是:Windows10 64位 专业版Qt使用的是:Qt 5.6.0 for Android (Windows 32-bit, 1.1 GB)Qt 5.6.0 for Windows 32-bit (MinGW 4.9.2, 1.0 GB) 也是可以的大_qt5.6.0mingw版

BUUCTF reverse题解汇总-程序员宅基地

文章浏览阅读7.1k次,点赞7次,收藏33次。BUUCTF平台刷题过程中做的一些逆向题解的总结归类_buuctf reverse题解

随便推点

软件开发工具【十四】 之 常用建模工具_建模工具开发学习-程序员宅基地

文章浏览阅读5.4k次,点赞4次,收藏11次。感谢内容提供者:金牛区吴迪软件开发工作室接上一篇:软件开发工具【十三】 之 Eclipse插件的使用与开发文章目录一、UML建模介绍1.面向对象方法的出现和发展2.面向对象的一些概念3.面向对象方法的基本过程4.组件思想二、RATIONAL ROSE建模工具介绍1.RATIONAL 公司简介2.面向对象的分析设计和Rational Rose3.Rational Rose可视化建模的特点三、使用RATIONAL ROSE 建模1.UML建模的三大部分2.需求分析之用例图与活动图3.系统分析与设计四、E._建模工具开发学习

如何通过gdb查看反汇编代码_pwngdb 显示汇编代码-程序员宅基地

文章浏览阅读2.4w次,点赞15次,收藏77次。0x00 程序源码C代码如下:#include &amp;lt;stdio.h&amp;gt;int addme(int a, int b){ int c ; c = a+ b; return c;}int main(int argc, char const *argv[]){ int ret= 0; ret = addme(10,20); pri..._pwngdb 显示汇编代码

View的简介_view在编程中什么意思-程序员宅基地

文章浏览阅读1.6w次,点赞17次,收藏34次。认识一个新的事物,首先我们从概念上讲,我们需要知道,这个事物 是什么,这个事物有什么用途?对应到View 上,我们要搞明白 View 的定义以及工作原理。 1.View是什么? View是屏幕上的一块矩形区域,它负责用来显示一个区域,并且响应这个区域内的事件。可以说,手机屏幕上的任意一部分看的见得地方都是View,它很常见,比如 TextView 、ImageView 、Button_view在编程中什么意思

ES 内存使用和GC指标_es gc count多少算异常-程序员宅基地

文章浏览阅读3k次。摘录自:http://blog.csdn.net/yangwenbo214/article/details/74000458ES 内存使用和GC指标——主节点每30秒会去检查其他节点的状态,如果任何节点的垃圾回收时间超过30秒(Garbage collection duration),则会导致主节点任务该节点脱离集群。内存使用和GC指标在运行Elasticsearch时,内存是您..._es gc count多少算异常

【UML】——活动图-程序员宅基地

文章浏览阅读5.8w次,点赞25次,收藏96次。一、活动图概述1、流程图:常被用来建立算法模型,使用流程图可以表示一个算法的执行序列、过程、判定点、分支和循环 活动图和流程图十分类似,不同之处在于它支持并行活动 活动图的缺点:很难清楚的描述动作与对象之间的关系,没有交互图直接2、活动图作用描述一个操作的执行过程中所完成的工作或 者动作 描述对象内部的工作 显示如何执行一组相关的动作,以及这些动作如何影响周围对象 描..._活动图

Java并发编程:第七章 并发工具类_java并发编程的类-程序员宅基地

文章浏览阅读1.2k次,点赞32次,收藏11次。在Java并发框架中,Exchanger 是一个同步点,它允许一对线程在一个点上交换对象。Exchanger 非常适合于两个线程需要相互传递数据或信息的场景,例如遗传算法中的配对交叉操作,或者流水线设计中两个工作阶段的交互。让一组线程到达一个屏障时被阻塞,直到最后一个线程到达屏障时,屏障才会开门,所有被屏障拦截的线程才会继续干活,线程进入屏障通过CyclicBrrier的await方法。信号量主要用于两个目的,一个是用于多个共享资源的互斥使用,另外一个用于并发线程的控制。_java并发编程的类