官方：http://openlayers.org/en/latest/examples/lazy-source.html

<!DOCTYPE html>

<html>

  <head>

    <title>Lazy Source</title>

    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">

    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>

    <style>

       button.code {

         font-family: Monaco,Menlo,Consolas,"Courier New",monospace;

         font-size: 12px;

         padding: 5px;

         margin: 0 5px;

       }    </style>

  </head>

  <body>

    <div id="map" class="map"></div>

    <button id="set-source" class="code">layer.setSource(source)</button>

    <button id="unset-source" class="code">layer.setSource(null)</button>

    <script>

      var source = new ol.source.OSM();

      var layer = new ol.layer.Tile();

      var map = new ol.Map({

        layers: [layer],

        target: 'map',

        view: new ol.View({

          center: [0, 0],

          zoom: 2

        })

      });

      document.getElementById('set-source').onclick = function() {

        layer.setSource(source);

      };

      document.getElementById('unset-source').onclick = function() {

        layer.setSource(null);

      };

    </script>

  </body>

</html>

OpenLayers v4.2.0 -----地图延迟加载；的更多相关文章

  1. 地图SDK全新版本v4.3.0上线 - 新增多项功能及优化

    以下内容转载自腾讯位置服务公众号的文章<地图SDK全新版本v4.3.0上线 - 新增多项功能及优化!> 作者:腾讯位置服务 链接:https://mp.weixin.qq.com/s/hb ...

  2. OpenLayers加载QQ地图(转)

    OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...

  3. OpenLayers加载高德地图离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  4. Fiddler录制jmeter脚本--V4.4..0.1版本

      圣诞节到了,圣诞老人送平安,我们送技术,我们知道以前jmeter的脚本来源有三个,手动书写.badboy录制.自带的录制功能(jmeter3.0该功能还比较好),目前我们又多了一个fiddler生 ...

  5. FineUIPro/Mvc/Core/JS v4.2.0 发布了（老牌ASP.NET控件库，WebForms，ASP.NET MVC，Core，JavaScript）！

    还记得 10 年前那个稍微青涩的 ExtAspNet 吗,如今她已脱胎换骨,变成了如下 4 款产品: FineUIPro:基于jQuery的经典款ASP.NET WebForms控件,之前的FineU ...

  6. OpenLayers 3 之 加入地图鼠标右键菜单

    加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...

  7. openlayers加载百度地图

    最近在做openlayers添加百度地图的扩展类,经过轮番的尝试,终于将其接入了,但是发现偏差比较大,有根据百度的坐标进行了比对,将切片原点进行了调整,发现OK了.打开百度地图,可以看出切片的路径如: ...

  8. Openlayers实现第一张地图

    <html><head><title>OpenLayers Hello World</title> <style type="text/ ...

  9. D3.JS V4 绘制中国地图

    参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...

随机推荐

  1. 【LeetCode】036. Valid Sudoku

    题目: Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...

  2. MySQL数据库服务器参数优化mycnf,16G内存8核CPU,

    业务场景: 后台支持手机在线更新系统,db服务器内存16G,8核,dell的pc服务器. qps: 200个左右 tps: 1个左右 一分钟50几个 sort_buffer_size = 32M 大了 ...

  3. 【转】 Pro Android学习笔记（六十）：Preferences（4）：MultiSelect List Preference

    目录(?)[-] XML文件 在设备中保存 读出信息 ListPreference提供单选列表,我们可以通过CheckBoxPreference提供多选列表.此外,Android在3.0后提供Mult ...

  4. css画三角形

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 外置式与增量式PID模板程序(51单片机c语言)

    外置式PID模板 #define MuBiaoCS 0 //目标常数 #define CHang_aCS 0 //比例常数 #define CHang_bCS 0 //积分常数 #define CHa ...

  6. Queue——C#浅谈

    1.Queue定义 System.Collections.Queue类表示对象的先进先出集合,存储在 Queue(队列) 中的对象在一端插入,从另一端移除. 2.优点 1.能对集合进行顺序处理(先进先 ...

  7. java中的equals方法

    这个方法首先比较的是两个对象的地址是否相同,如果相同直接返回true, 否则, (1)如果是string类型的先比较是否是string类型,是的话,再比较是否长度相同,相同的话再比较,每个字符是否相同 ...

  8. mongodb教程国外

    https://docs.mongodb.com/manual/reference/operator/aggregation/lookup/

  9. PCLVisualizer可视化类（5）

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=171 自定义交互 多数情况下,默认的鼠标和键盘交互设置不能满足用户的需求,用 ...

  10. p4171&bzoj1823 满汉全席

    传送门(洛谷) 传送门(bzoj) 题目 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能 ...