1. 程式人生 > >openlayers3 氣泡框展示滑鼠點選座標

openlayers3 氣泡框展示滑鼠點選座標

根據這篇文章改寫而來,主要實現了在地圖上點選彈出氣泡框,用來展示經緯度,當然你也可以改成展示其他內容。

<!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>