Home > Article > Web Front-end > How to use openlayers3 to create a bubble box to display click coordinates

How to use openlayers3 to create a bubble box to display click coordinates

一个新手Original: 2017-09-07 10:55:363642browse

Adapted from this article, it mainly implements clicking on the map to pop up a bubble box to display longitude and latitude. Of course, you can also change it to display other content.

<!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:&#39;http://localhost:8080/geoserver/wms&#39;,  
			            params: {&#39;LAYERS&#39;: &#39;topp:testpoly_landmarks&#39;,&#39;VERSION&#39;:&#39;1.1.1&#39;},  
			            serverType: &#39;geoserver&#39;  
            		})
            		
            	})
            }
            
            //GeoServer中图层范围BBOX范围值
  			var extent=[-74.047,40.68,-73.908,40.882];  
  			
  			//地图投影类型 
  			var projection=new ol.proj.Projection({ 
	          	code:&#39;EPSG:4326&#39;,  
	         	units:&#39;degrees&#39;,  
	          	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: &#39;EPSG:4326&#39;,
			            className: &#39;custom-mouse-position&#39;,
			            target: document.getElementById(&#39;mouse-position&#39;)
			        }) ,
			        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: &#39;map&#39;, 
                layers: [vecLayer,vecAnno],  
            });  
            
            var container = document.getElementById(&#39;popup&#39;);  
            var content = document.getElementById(&#39;popup-content&#39;);  
			var closer = document.getElementById(&#39;popup-closer&#39;);  
			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(&#39;click&#39;, function(evt) {  
			  var coordinate = evt.coordinate;  
			  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(  
			      coordinate, &#39;EPSG:3857&#39;, &#39;EPSG:4326&#39;));  
			  content.innerHTML = &#39;<p>你点击的坐标是：</p><code>&#39; + hdms + &#39;</code>&#39;;  
			  overlay.setPosition(coordinate);  
			  map.addOverlay(overlay);  
			});  
            closer.onclick = function() {  
			  overlay.setPosition(undefined);  
			  closer.blur();  
			  return false;  
			}; 
        }  
    </script>  
</head>  
<body onload="init()">  
    <p id="map"></p>  
    <p  id="mouse-position" class="mouse-position-wrapper">
    	<p class="custom-mouse-position"></p>    
	</p>
	<!-- 弹框 -->
    <p id="popup" class="ol-popup">  
	    <a href="#" id="popup-closer" class="ol-popup-closer"></a>  
	    <p id="popup-content" style="width:300px; height:120px;"></p>  
	</p>  
</body>

The above is the detailed content of How to use openlayers3 to create a bubble box to display click coordinates. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to node.js decorator patternNext article：Introduction to node.js decorator pattern

See more

How to use openlayers3 to create a bubble box to display click coordinates

Related articles