openlayers實(shí)現(xiàn)地圖彈窗
更新時間:2020年09月25日 08:05:44 作者:wwj007
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)地圖彈窗,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了openlayers實(shí)現(xiàn)地圖彈窗的具體代碼,供大家參考,具體內(nèi)容如下
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" /> <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, //將數(shù)據(jù)源坐標(biāo)系統(tǒng)進(jìn)行轉(zhuǎn)換 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>
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Openlayers實(shí)現(xiàn)地圖全屏顯示
- Openlayers學(xué)習(xí)之地圖比例尺控件
- Openlayers實(shí)現(xiàn)地圖的基本操作
- OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加
- OpenLayers3實(shí)現(xiàn)對地圖的基本操作
- OpenLayers3實(shí)現(xiàn)地圖顯示功能
- openlayers實(shí)現(xiàn)地圖測距測面
- vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果
- 使用OpenLayers3 添加地圖鼠標(biāo)右鍵菜單
- Openlayers繪制地圖標(biāo)注
相關(guān)文章
JS組件系列之MVVM組件 vue 30分鐘搞定前端增刪改查
這篇文章主要介紹了JS組件系列之MVVM組件 vue 30分鐘搞定前端增刪改查,需要的朋友可以參考下2017-04-04webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程
這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06javascriptvoid(0)含義以及與"#"的區(qū)別講解
今天小編就為大家分享一篇關(guān)于javascriptvoid(0)含義以及與"#"的區(qū)別講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01