Rumah > Artikel > hujung hadapan web > 如何用openlayers3制作气泡框展示点击坐标

如何用openlayers3制作气泡框展示点击坐标

一个新手asal: 2017-09-07 10:55:363642semak imbas

根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。

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

Atas ialah kandungan terperinci 如何用openlayers3制作气泡框展示点击坐标. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：node.js装饰者模式介绍Artikel seterusnya：如何在javascript中定义函数

Artikel berkaitan

Lihat lagi