openlayers4官方例子学习DAY1

当地图由于调整大小而变得太小时，归属将被折叠。这是因为collapsible如果地图的宽度小于600像素，则该选项设置为true。

http://openlayers.org/en/latest/examples/attributions.html

 var attribution = new ol.control.Attribution({
        collapsible: false
      });
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        controls: ol.control.defaults({attribution: false}).extend([attribution]),      //control的default方法的attribution参数默认是true,即默认是有归属控件的
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      function checkSize() {
        var small = map.getSize()[0] < 600;//getSize（）获取地图的大小，单位为像素，索引为0即获取宽度
        attribution.setCollapsible(small);//设置是否可折叠
        attribution.setCollapsed(small);//设置是否已折叠
      }

      window.addEventListener('resize', checkSize);
      checkSize();

使用view.animate()方法来运行一个或多个动画。 

名称类型描述
center ol.Coordinate | 未定义

动画结束时视图的中心
zoom 数字 | 未定义

动画结束时视图的缩放级别。这优先resolution。
resolution 数字 | 未定义

动画结束时视图的分辨率。如果zoom还提供，则此选项将被忽略。
rotation 数字 | 未定义

在动画结束时旋转视图。
anchor ol.Coordinate | 未定义

可选的锚点，在旋转或分辨率动画期间保持固定。
duration 数字 | 未定义

动画的持续时间（以毫秒为单位）（默认为1000）。
easing 未定义 | 功能

动画中使用的缓动功能（默认为ol.easing.inAndOut）。将为每个帧调用该函数，其中数字表示动画持续时间的一小部分。该函数应返回0到1之间的数字，表示向目标状态的进度。

                  http://openlayers.org/en/latest/examples/animation.html

  <body>
    <div id="map" class="map"></div>
    <button id="rotate-left" title="Rotate clockwise">↻</button>
    <button id="rotate-right" title="Rotate counterclockwise">↺</button>
    <button id="pan-to-london">Pan to London</button>
    <button id="elastic-to-moscow">Elastic to Moscow</button>
    <button id="bounce-to-istanbul">Bounce to Istanbul</button>
    <button id="spin-to-rome">Spin to Rome</button>
    <button id="fly-to-bern">Fly to Bern</button>
    <button id="rotate-around-rome">Rotate around Rome</button>
    <button id="tour">Take a tour</button>
    <script>
      var london = ol.proj.fromLonLat([-0.12755, 51.507222]);//ol.proj.fromLonLat （coordinate，opt_projection）将坐标转换为投影坐标系，默认值为Web Mercator，即“EPSG：3857”
var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
      var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
      var rome = ol.proj.fromLonLat([12.5, 41.9]);
      var bern = ol.proj.fromLonLat([7.4458, 46.95]);

      var view = new ol.View({
        center: istanbul,
        zoom: 6
      });

      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            preload: 4, //预先加载瓦片的级别。 
            source: new ol.source.OSM()
          })
        ],
        // Improve user experience by loading tiles while animating. Will make
        // animations stutter on mobile or slow devices.
        loadTilesWhileAnimating: true,
        view: view
      });

      // A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
      function bounce(t) {
        var s = 7.5625, p = 2.75, l;
        if (t < (1 / p)) {
          l = s * t * t;
        } else {
          if (t < (2 / p)) {
            t -= (1.5 / p);
            l = s * t * t + 0.75;
          } else {
            if (t < (2.5 / p)) {
              t -= (2.25 / p);
              l = s * t * t + 0.9375;
            } else {
              t -= (2.625 / p);
              l = s * t * t + 0.984375;
            }
          }
        }
        return l;
      }

      // An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
      function elastic(t) {
        return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
      }

      function onClick(id, callback) {
        document.getElementById(id).addEventListener('click', callback);  //这里定义了一个为特定ID的元素的click事件绑定回调函数的函数
      }
     //向左旋转90度
      onClick('rotate-left', function() {
        view.animate({
          rotation: view.getRotation() + Math.PI / 2
        });
      });
    //向右旋转90度
      onClick('rotate-right', function() {
        view.animate({
          rotation: view.getRotation() - Math.PI / 2
        });
      });
     //以罗马为锚点旋转,分为两个过程
      onClick('rotate-around-rome', function() {
        // Rotation animation takes the shortest arc, so animate in two parts
        var rotation = view.getRotation();
        view.animate({
          rotation: rotation + Math.PI,
          anchor: rome,
          easing: ol.easing.easeIn
        }, {
          rotation: rotation + 2 * Math.PI,
/*

ol.easing.easeIn （t）缓慢加速。easeOut缓慢减速，

ol.easing.inAndOut （t）先缓慢加速后缓慢减速，

ol.easing.upAndDown （t）与上面的作用差不多，没有太大区别

ol.easing.linear （t） 保持匀速*/


       easing:ol.easing.easeOut
        });
      });

      onClick('pan-to-london', function() {
        view.animate({
          center: london,
          duration: 2000
        });
      });

      onClick('elastic-to-moscow', function() {
        view.animate({
          center: moscow,
          duration: 2000,
          easing: elastic
        });
      });

      onClick('bounce-to-istanbul', function() {
        view.animate({
          center: istanbul,
          duration: 2000,
          easing: bounce
        });
      });

      onClick('spin-to-rome', function() {
        // Rotation animation takes the shortest arc, so animate in two parts
        var center = view.getCenter();
        view.animate({
          center: [
            center[0] + (rome[0] - center[0]) / 2,
            center[1] + (rome[1] - center[1]) / 2
          ],
          rotation: Math.PI,
          easing: ol.easing.easeIn
        }, {
          center: rome,
          rotation: 2 * Math.PI,
          easing: ol.easing.easeOut
        });
      });

      function flyTo(location, done) {
        var duration = 2000;
        var zoom = view.getZoom();
        var parts = 2;
        var called = false;
        function callback(complete) {
          --parts;
          if (called) {
            return;
          }
          if (parts === 0 || !complete) {
            called = true;
            done(complete);
          }
        }
        view.animate({
          center: location,
          duration: duration
        }, callback);
        view.animate({
          zoom: zoom - 1,
          duration: duration / 2
        }, {
          zoom: zoom,
          duration: duration / 2
        }, callback);
      }

      onClick('fly-to-bern', function() {
        flyTo(bern, function() {});
      });

      function tour() {
        var locations = [london, bern, rome, moscow, istanbul];
        var index = -1;
        function next(more) {
          if (more) {
            ++index;
            if (index < locations.length) {
              var delay = index === 0 ? 0 : 750;
              setTimeout(function() {
                flyTo(locations[index], next);
              }, delay);
            } else {
              alert('Tour complete');
            }
          } else {
            alert('Tour cancelled');
          }
        }
        next(true);
      }

      onClick('tour', tour);
    </script>
  </body>
</html>

使用DragBox交互来选择要素

   在地图上拉出一个矩形框，一般配合使用一个辅助按键，如Shift，常用于放大功能。该功能是默认添加在地图中的，默认情况下，按下Shift，然后拖动鼠标拉框，然后地图就会将框内内容放大。

http://openlayers.org/en/latest/examples/box-selection.html

 <div id="map" class="map"></div>
    <div id="info">No countries selected</div>
    <script>
      var vectorSource = new ol.source.Vector({
        url: 'https://openlayers.org/en/v4.3.1/examples/data/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
      });


      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            source: vectorSource
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      // a normal select interaction to handle click
      var select = new ol.interaction.Select();
      map.addInteraction(select);

      var selectedFeatures = select.getFeatures();

      // a DragBox interaction used to select features by drawing boxes
      var dragBox = new ol.interaction.DragBox({
        condition: ol.events.condition.platformModifierKeyOnly//如果只是平台修改键被按下，返回true,如果有多余的键被按下（如shift），则返回false    
  map.addInteraction(dragBox);

      dragBox.on('boxend', function() {   //boxdrag当框处于活动状态时触发拖动;boxend拖曳结束时触发；boxstart拖曳开始时触发
// features that intersect the box are added to the collection of
        // selected features
        var extent = dragBox.getGeometry().getExtent();
       vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {  //通过其几何与所提供的范围相交的所有要素迭代，调用每个功能的回调。如果回调返回一个“真值”值，则迭代将停止，该函数将返回相同的值。如果只想测试边框交点，请调用 source.forEachFeatureInExtent()方法。
          selectedFeatures.push(feature);
        });
      });

      // clear selection when drawing a new box and when clicking on the map
      dragBox.on('boxstart', function() {
        selectedFeatures.clear();
      });

      var infoBox = document.getElementById('info');

      selectedFeatures.on(['add', 'remove'], function() {
        var names = selectedFeatures.getArray().map(function(feature) {
          return feature.get('name');
        });
        if (names.length > 0) {
          infoBox.innerHTML = names.join(', ');
        } else {
          infoBox.innerHTML = 'No countries selected';
        }
      });
    </script>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chen1234/p/7418419.html