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 |
数字 | 未定义 |
动画结束时视图的分辨率。如果 |
rotation |
数字 | 未定义 |
在动画结束时旋转视图。 |
anchor |
ol.Coordinate | 未定义 |
可选的锚点，在旋转或分辨率动画期间保持固定。 |
duration |
数字 | 未定义 |
动画的持续时间（以毫秒为单位）（默认为 |
easing |
未定义 | 功能 |
动画中使用的缓动功能（默认为 |
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>
