openlayers实现地图弹窗
wwj007 人气:0本文着重为大家仔细讲解了openlayers实现地图弹窗,文中代码实例讲解的非常细致,希望能够帮助到您,欢迎大家阅读和收藏
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <title>Ol3 popup</title> <style type="text/css"> body, #map { border: 0px; margin: 0px; padding: 0px; padding: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; } .ol-popup { display: none; position: absolute; background-color: white; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2); -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); border: 1px solid #cccccc; bottom: 12px; left: -50px; width: 200px; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .popup-title{ font-weight: bold; border-bottom:1px solid #cccccc; padding: 5px 8px; } .popup-content{ padding: 5px 8px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 6px; right: 6px; } .ol-popup-closer:after { content: "✖"; } </style> <script type="text/javascript"> function init(){ var format = 'image/png'; var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236]; var vectorSource = new ol.source.TileWMS({ url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326&format=application/openlayers', params:{ 'LAYERS':'capital', 'TILED':false }, serverType:'geoserver' }); var untiled = new ol.layer.Tile({ source: vectorSource }); var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var title = document.getElementById('popup-title'); var closer = document.getElementById('popup-closer'); closer.onclick = function(){ container.style.display = 'none'; closer.blur(); return false; }; var overlay = new ol.Overlay({ element: container }); var osmsource = new ol.source.OSM() //console.log(osmsource.getProjection().getCode()); var map = new ol.Map({ controls: ol.control.defaults({ attribution: false }), target: 'map', layers: [new ol.layer.Tile({ source: osmsource, //将数据源坐标系统进行转换 projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326") }), untiled], overlays: [overlay], view: new ol.View({ center:[117,42], projection:'EPSG:4326', zoom:1 }) }); map.addOverlay(overlay); map.getView().fit(bounds, map.getSize()); map.on('click', function(evt) { var coordinate = evt.coordinate; var hdms = ol.coordinate.toStringHDMS(ol.proj.transform( coordinate, 'EPSG:4326', 'EPSG:4326')); overlay.setPosition(coordinate); content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>'; container.style.display = 'block'; title.innerHTML = "提示信息"; title.style.display = 'block'; map.getView().setCenter(coordinate); }); } </script> </head> <body onLoad="init()"> <div id="map"> <div id="popup" class="ol-popup"> <a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-title" class="popup-title"></div> <div id="popup-content" class="popup-content"></div> </div> </div> </body> </html>
效果图:
加载全部内容