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

来源：动视网责编：小采时间：2020-11-27 20:13:38

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

如何用openlayers3制作气泡框展示点击坐标:根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&q

推荐度：

点击下载本文 文档为doc格式

导读如何用openlayers3制作气泡框展示点击坐标:根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&q

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

<!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()"> 
 <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>

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

推荐度：

点击下载本文 文档为doc格式

标签：坐标气泡点击

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐