zoukankan      html  css  js  c++  java
  • OpenLayers v4.2.0 -----地图延迟加载;

    官方: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>
  • 相关阅读:
    酷睿i3/i5/i7到底有啥区别,该怎么选
    酷睿i3/i5/i7到底有啥区别,该怎么选
    感谢AMD,是它我们才用得上Intel的超性价比的智能处理器
    如何在ASP.NET2.0中通过Gmail发送邮件
    Asp.Net事务和异常处理:
    080414 雨
    080415 晴
    还有四天
    助けて
    今晚安排
  • 原文地址:https://www.cnblogs.com/lishidefengchen/p/7102326.html
Copyright © 2011-2022 走看看