官方：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. UDEV管理RAC共享存储

    背景:操作系统 centos 6.7 数据库:11.2.0.1 操作流程: 1. 确认在所有RAC节点上已经安装了必要的UDEV包[root@11gnode1 ~]# rpm -qa|grep ude ...

  2. OIer应该知道的二进制知识

    计算机使用\(2\)进制,这是众所周知的.在学习\(OI\)的过程中,\(2\)进制也显得尤为重要.有时候,细节决定成败,所以我想总结一下容易被遗忘和误解的关于\(2\)进制的知识. 1.运算符 &a ...

  3. CentOS6 下Samba服务器的安装与配置

    原地址:http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html 一.简介 Samba是一个能让Linux系统应用Microsoft网 ...

  4. Git 权限控制

    除了 Git 命令,权限控制也是 Git 中极为重要的组成部分,本文主要介绍 GitLab 系统提供的最常用的权限控制功能. 一.分配成员角色 首先来了解下,Git 中的五种角色: 每一种角色所拥有的 ...

  5. jquery鼠标悬停事件hover()

    在JQuery中提供了.hover()事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数.如下代码所示: $( & ...

  6. 关系运算符 逻辑运算符 if 语句 switch语句

    1. BOOL类型 BOOL isRightOrNo = YES; isRightOrNo = 56;//可以打印出来,在C语言中,非0即真 printf("%d\n" , isR ...

  7. 【转】 Pro Android学习笔记（四七）：Dialog（4）：一些补充和思考

    目录(?)[-] 编程思想封装接口 fragment和activity以其他fragment之间的通信 编程思想:封装接口 在小例子中,fragment会调用activity的onDialogDone ...

  8. net start sql server (instance)

    如何启动 SQL Server 实例(net 命令) 其他版本   可以使用 Microsoft Windows net 命令启动 Microsoft SQL Server 服务. 启动 SQL Se ...

  9. 集合对象与自定义javabean对象接收数据库查询的数据 （基础知识扫盲）

    一.集合对象(List,Map,数组)等对象接收数据库查询的记录,如果没有一条记录,就得到的内容为空的集合,不是null: 例如:List查不到记录得到的就是size=0的list 二.自定义的jav ...

  10. JS判断提交表单不能为空 等的验证

    转自:https://blog.csdn.net/qiu512300471/article/details/23259811 <script type="text/javascript ...