openlayers3 氣泡框展示滑鼠點選座標
阿新 • • 發佈：2019-01-08
根據這篇文章改寫而來，主要實現了在地圖上點選彈出氣泡框，用來展示經緯度，當然你也可以改成展示其他內容。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>OpenLayers MapQuest Demo</title> <link rel="stylesheet" type="text/css" href="css/ol.css"/> <style type="text/css"> html, body, #map{ padding:0; margin:0; height:100%; width:100%; } .mouse-position-wrapper{ width:300px; height:29px; color:#FF00FF; position:absolute; right:20px; bottom:6px; z-index:999; } .ol-rotate{ right:40px; } .ol-scale-line { left:180px; } .ol-zoomslider{ top:120px; left: 9px; } .ol-popup { position: absolute; background-color: white; -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)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; } .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; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "✖"; } </style> <script type="text/javascript" src="build/ol.js"></script> <script type="text/javascript"> var map; function init(){ //封裝底圖函式 function getBaseLayer(layername, layer){ return new ol.layer.Tile({ title:layername, source:new ol.source.XYZ({ url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}" }) }); }; //封裝標註圖層 function getAnnoLayer(layername, layer, visiable){ return new ol.layer.Tile({ title:layername, source:new ol.source.XYZ({ url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}" }) }); }; //天地圖圖層 var baseLayers = ["vec_w","img_w","ter_w"]; var vecLayer = getBaseLayer("地圖",baseLayers[0]); var imgLayer = getBaseLayer("影像",baseLayers[1]); var terLayer = getBaseLayer("地形",baseLayers[2]); var vecAnno = getAnnoLayer("地圖標註", "cva_w", true); //使用GeoServer釋出的地圖 function getWMSLayer(){ return new ol.layer.Image({ source:new ol.source.ImageWMS({ url:'http://localhost:8080/geoserver/wms', params: {'LAYERS': 'topp:testpoly_landmarks','VERSION':'1.1.1'}, serverType: 'geoserver' }) }) } //GeoServer中圖層範圍BBOX範圍值 var extent=[-74.047,40.68,-73.908,40.882]; //地圖投影型別 var projection=new ol.proj.Projection({ code:'EPSG:4326', units:'degrees', extent:extent }); var geoServerTest=getWMSLayer(); map = new ol.Map({ controls:ol.control.defaults().extend([ new ol.control.FullScreen(), new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326', className: 'custom-mouse-position', target: document.getElementById('mouse-position') }) , new ol.control.OverviewMap({ }), new ol.control.Rotate({ autoHide:false }), new ol.control.ScaleLine({ }), new ol.control.ZoomSlider({ }), new ol.control.ZoomToExtent({ }) ]), view:new ol.View({ /* projection:projection, */ center: ol.extent.getCenter(extent), /* minZoom:1, maxZoom:5, */ zoom:2 }), target: 'map', layers: [vecLayer,vecAnno], }); var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({ element: container, autoPan: true, autoPanAnimation: { duration: 250 //當Popup超出地圖邊界時，為了Popup全部可見，地圖移動的速度. } })); /** * Add a click handler to the map to render the popup. */ map.addEventListener('click', function(evt) { var coordinate = evt.coordinate; var hdms = ol.coordinate.toStringHDMS(ol.proj.transform( coordinate, 'EPSG:3857', 'EPSG:4326')); content.innerHTML = '<p>你點選的座標是：</p><code>' + hdms + '</code>'; overlay.setPosition(coordinate); map.addOverlay(overlay); }); closer.onclick = function() { overlay.setPosition(undefined); closer.blur(); return false; }; } </script> </head> <body onload="init()"> <div id="map"></div> <div id="mouse-position" class="mouse-position-wrapper"> <div class="custom-mouse-position"></div> </div> <!-- 彈框 --> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content" style="width:300px; height:120px;"></div> </div> </body>