官方：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. oracle隐含参数的查看与修改

    v$parameter视图中查询参数的时候其实都是通过x$ksppi和x$ksppcv这两个内部视图中得到的. 1.   可以通过如下方式查询当前实例的所有隐含参数: col name for a30 ...

  2. C# 中常用LInq操作

    static void Main(string[] args) { , , , , , , }; , , , , , , }; , , , , , , , , , , , }; // 交集 var f ...

  3. 彻底删除kafka下面的topic

    如果只是用kafka-topics.sh的delete命令删除topic,会有两种情况: 如果当前topic没有使用过即没有传输过信息:可以彻底删除 如果当前topic有使用过即有过传输过信息:并没有 ...

  4. 【转】 Pro Android学习笔记（四三）：Fragment（8）：再谈Transaction和管理器

    目录(?)[-] Transaction的一些操作 再谈FragmentManager 调用其他fragment的方法 唤起activity 唤起fragment和相互通信 一些其它 Transact ...

  5. java类加载器-----用户自定义类加载器实现

    java类加载器主要分为如下几种: jvm提供的类加载器 根类加载器:底层实现,主要加载java核心类库(如:java.lang.*) 扩展类加载器:使用java代码实现,主要加载如:jre/lib/ ...

  6. Hibernate---Hql查询2---

    hibernate.cfg.xml配置: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configurati ...

  7. [jQuery] 按回车键实现登录

    Jquery按回车键提交实现登录的方式分为两种: 1.按钮提交 2.表单提交 1.按钮提交 $("#LoginIn").off('click').on('click', funct ...

  8. sql 查看表结构

    sqlserver 查看表结构 exec sp_help @TableName --得到表信息.字段,索引.constraint. exec sp_pkeys @TableName --得到主键. e ...

  9. linux命令-rpm安装和卸载

    软件包 先查看一下rpm包 [root@wangshaojun Packages]# mount /dev/cdrom /mnt/////挂载[root@wangshaojun Packages]# ...

  10. Ruby环境搭建与“Hello World”

    Ruby的环境搭建比较简单,在http://rubyinstaller.org/downloads/可以得到Ruby的安装包, 安装过程没什么问题.安装完成之后需要配置一下环境变量: 在PATH中填入 ...