官方：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. BZOJ5362: [Lydsy1805月赛]quailty 算法

    BZOJ5362: [Lydsy1805月赛]quailty 算法 https://lydsy.com/JudgeOnline/problem.php?id=5362 分析: 题意即求一个最小基环树森 ...

  2. CH5103 [NOIP2008]传纸条[线性DP]

    给定一个 N*M 的矩阵A,每个格子中有一个整数.现在需要找到两条从左上角 (1,1) 到右下角 (N,M) 的路径,路径上的每一步只能向右或向下走.路径经过的格子中的数会被取走.两条路径不能经过同一 ...

  3. HDOJ1166(线段树点修改)

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  4. 【转】 Pro Android学习笔记（四一）：Fragment（6）：数据保留

    目录(?)[-] 通过fragment参数实现数据保留 对TitleFragment进行修改 对DetailActivity进行修改 通过savedInstanceState进行数据保留 保留frag ...

  5. mina中的发送延时

    由于项目需要,用到了 mina 框架进行 tcp 通讯.我是初次接触 mina,于是从 Hello world 开始学习了 mina .期间遇到了一个奇怪的发送数据的延迟问题,解决的过程是曲折的,但找 ...

  6. modbus读输入状态与读线圈状态的区别？

    01 读线圈状态 描述 读从机离散量输出口的 ON/OFF 状态,不支持广播.附录B列出由不同控制器型号支持最大的参数清单. 查询 查询信息规定了要读的起始线圈和线圈量,线圈的起始地址为零,1-16个 ...

  7. DevExpress 柱状图

    通过构造函数,把值传递过来 public XtraInterpreterChartForm(object ds) { InitializeComponent(); datasource = ds; } ...

  8. struts 文件上传示例

    import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io ...

  9. 菜鸟攻城狮1（JAVA程序设计）

    1.JAVA是一个完整的平台,有一个庞大的库,提供了可重复利用的代码功能块,安全性,跨操作系统的可以移植性,自动垃圾回收机制 2.JAVA设计者白皮书:简单性.面向对象.网络技能.健壮性.安全性.体系 ...

  10. 115个Java面试题和答案

    面向对象编程(OOP) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和灵活性. 增加代码 ...