openlayers3实现弹出框

最新推荐文章于 2024-06-27 16:40:00 发布

L.傲骨雄风

最新推荐文章于 2024-06-27 16:40:00 发布

阅读量3.4k

点赞数 1

分类专栏： openlayer

本文链接：https://blog.csdn.net/xlp789/article/details/83445049

版权

openlayer 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ol3 popup</title>
	<link rel="stylesheet" type="text/css" href="./css/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			padding: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}
 
		.ol-popup {
			display: none;
			position: absolute;
			background-color: white;
			-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
			-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));
			border: 1px solid #cccccc;
			bottom: 12px;
			left: -50px;
			width: 200px;
		}
		.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;
		}
		.popup-title{
			font-weight: bold;
			border-bottom:1px solid #cccccc;
			padding: 5px 8px;
		}
		.popup-content{
			padding: 5px 8px;
		}
		.ol-popup-closer {
			text-decoration: none;
			position: absolute;
			top: 6px;
			right: 6px;
		}
		.ol-popup-closer:after {
			content: "✖";
		}
	</style>
	<script type="text/javascript" src="./js/ol.js"></script>
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript">
		function init(){
			var format = 'image/png';
			var bounds = [73.4510046356223, 18.1632471876417,
				134.976797646506, 53.5319431522236];
			 var vectorSource = new ol.source.TileWMS({
				url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326&format=application/openlayers',
                    params:{    
                          'LAYERS':'capital',
                          'TILED':false    
                      }, 	  
			   serverType:'geoserver'
         
			});
			var untiled = new ol.layer.Tile({
				source: vectorSource
			});
			var container = document.getElementById('popup');
			var content = document.getElementById('popup-content');
			var title = document.getElementById('popup-title');
			var closer = document.getElementById('popup-closer');
			closer.onclick = function(){
				container.style.display = 'none';
				closer.blur();
				return false;
			};
			var overlay = new ol.Overlay({
				element: container
			});
			
           var osmsource = new ol.source.OSM()
		   //console.log(osmsource.getProjection().getCode());	
			var map = new ol.Map({
				controls: ol.control.defaults({
					attribution: false
				}),
				target: 'map',
				layers: [new ol.layer.Tile({
							source: osmsource, //将数据源坐标系统进行转换
							projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326")
						}),
						untiled],
				overlays: [overlay],
				view: new ol.View({
					center:[117,42],
					projection:'EPSG:4326',
					zoom:1
				})
			});
			map.addOverlay(overlay);
			map.getView().fit(bounds, map.getSize());
 
			map.on('click', function(evt) {
				var coordinate = evt.coordinate;
				var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
						coordinate, 'EPSG:4326', 'EPSG:4326'));
				overlay.setPosition(coordinate);
				content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
				'</code>';
				container.style.display = 'block';
				title.innerHTML = "提示信息";
				title.style.display = 'block';
				map.getView().setCenter(coordinate);
			});
		}
	</script>
</head>
<body onLoad="init()">
<div id="map">
	<div id="popup" class="ol-popup">
		<a href="#" id="popup-closer" class="ol-popup-closer"></a>
		<div id="popup-title" class="popup-title"></div>
		<div id="popup-content" class="popup-content"></div>
	</div>
</div>
</body>
</html>

L.傲骨雄风

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
openlayers3实现弹出框

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Ol3 popup&lt;/title&gt; &l
复制链接

扫一扫