So erstellen Sie mit openlayers3 eine Blasenbox zur Anzeige von Klickkoordinaten-js-Tutorial-php.cn

So erstellen Sie mit openlayers3 eine Blasenbox zur Anzeige von Klickkoordinaten

一个新手

Freigeben： 2017-09-07 10:55:36

Original

3632 Leute haben es durchsucht

In Anlehnung an diesen Artikel wird hauptsächlich das Klicken auf die Karte implementiert, um ein Blasenfeld zur Anzeige von Längen- und Breitengraden anzuzeigen. Natürlich können Sie es auch ändern, um andere Inhalte anzuzeigen.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit openlayers3 eine Blasenbox zur Anzeige von Klickkoordinaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!