openlayers | ol.Overlay實現點選地圖圖示,圖示跳動
阿新 • • 發佈:2022-03-19
要在地圖上顯示並附加到單個地圖位置的元素。就像module:ol/control/Control~Control,疊加層是可見的小部件。
與控制元件不同,它們不在螢幕上的固定位置,而是與地理座標相關聯,因此平移地圖將移動覆蓋而不是控制元件。
例子:
import Overlay from 'ol/Overlay';
var popup = new Overlay({
element: document.getElementById('popup')
});
popup.setPosition(coordinate);
map.addOverlay(popup);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" /> <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script> <title>openlayers 標記點閃爍</title> </head> <body> <div id="map"></div> <div id="baidu"><img src="https://www.baidu.com/img/flexible/logo/pc/[email protected]"></div> <script> var beijing = ol.proj.fromLonLat([116.28, 39.54]); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: beijing, zoom: 4 }) }); var tip = document.getElementById('baidu'); var overlay = new ol.Overlay({ element: tip, positioning: 'center-center' }); overlay.setPosition(beijing); map.addOverlay(overlay) let flag = true let animate = null tip.onclick = () => { if (animate != null) { clearInterval(animate); animate = null; } else { animate = setInterval(() => { flag = !flag let po = flag ? '10px' : '-10px' tip.style.top = po }, 500); } } </script> </body> <style> #baidu { width: 100px; position: absolute; top: 10px; } img { width: 100%; } </style> </html>