官方：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. Link-cut-tree 学习记录 & hdu4010

    网上的lct一抓一大把,所以我也不再写什么讲解了,只写一写自己的看法. Link-cut-tree 是用于维护动态树的一种数据结构 所谓动态树就是一片存在边的添加与删除的森林中的一棵树 所以我们要快速 ...

  2. 2017.10.1北京清北综合强化班DAY1

    a[问题描述]你是能看到第一题的 friends 呢.——hja何大爷对字符串十分有研究,于是天天出字符串题虐杀 zhx. 何大爷今天为字符串定义了新的权值计算方法.一个字符串 由小写字母组成,字符串 ...

  3. P1731 生日蛋糕

    题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...

  4. bzoj 2716 天使玩偶 —— K-D树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2716 果然和 bzoj 2648 是一样的吧: 只是数组要迷之开大,3e5+5 会RE? 代 ...

  5. 拓扑排序 POJ 1094 Sorting It All Out

    题意:给定N个字和M行他们之间的关系,要求输出他们的拓扑排序.此题采用边输入边检测的方式,如果发现环,就结束并输出当前行号:如果读取到当前行时,可以确定拓扑序列就输出,不管后面的输入(可能包含环路): ...

  6. HDU1042(N!:设4为基数)

    N! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Submi ...

  7. SQL SERVER 中的*=和=*

    一.* =和= * 是在sql server2000中左连接,右连接的用法相当于left join 和right join,现在sql2005和2008默认是不支持的,可以设置兼容2000或2008 ...

  8. 办公软件-Excel：Excel百科

    ylbtech-办公软件-Excel:Excel百科 Microsoft Excel是Microsoft为使用Windows和Apple Macintosh操作系统的电脑编写的一款电子表格软件.直观的 ...

  9. [解决问题]ubuntu无法virtualenv创建python虚拟环境的解决

    刚有人问我Ubuntu python虚拟环境无法创建问题,报错same file error,防止今后遇到忘记,记录下可能的问题. 1.先在windows上试了下: pip install virtu ...

  10. Linux部署walle

    背景:Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用!支持git.svn版本管理,支持各种web代码发布,PHP,Python,JAVA等代码的发布.回滚,可以通过web来 ...