如何用openlayers3制作气泡框展示点击坐标-js教程-PHP中文网

首页

web前端

js教程

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

一个新手

Sep 07, 2017 am 10:55 AM

点击鼠标

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

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

登录后复制

以上是如何用openlayers3制作气泡框展示点击坐标的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7518

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Win11怎么禁用任务栏缩略图预览? 关闭鼠标移动任务栏图标显示缩略图技巧 Feb 29, 2024 pm 03:20 PM

本文将介绍如何在Win11系统中关闭鼠标移动任务栏图标时显示的缩略图功能。这一功能在默认情况下是开启的，当用户将鼠标指针悬停在任务栏上的应用程序图标上时，会显示该应用程序的当前窗口缩略图。然而，有些用户可能觉得这个功能不太实用或者会干扰到他们的使用体验，因此想要关闭它。任务栏缩略图可能很有趣，但它们也可能分散注意力或烦人。考虑到您将鼠标悬停在该区域的频率，您可能无意中关闭了重要窗口几次。另一个缺点是它使用更多的系统资源，因此，如果您一直在寻找一种提高资源效率的方法，我们将向您展示如何禁用它。不过

惠普推出 Professor 1 三模轻音鼠标：4000DPI、蓝影 RAW3220，首发价 99 元 Apr 01, 2024 am 09:11 AM

本站3月31日消息，惠普近日在京东上架了一款Professor1三模蓝牙鼠标，可选黑白奶茶色，首发价99元，需要支付10元定金。据介绍，这款鼠标重量106克，采用人体工程学设计，尺寸为127.02x79.59x51.15mm，可选七档4000DPI，搭载蓝影RAW3220传感器，使用650毫安时电池，号称一次充电续航可以使用2个月。本站附鼠标参数信息如下：

雷蛇 | 宝可梦耿鬼款无线鼠标、鼠标垫上架，套装价 1549 元 Jul 19, 2024 am 04:17 AM

本站7月12日消息，雷蛇今日宣布推出雷蛇|宝可梦耿鬼款无线鼠标、鼠标垫。其单品定价分别为1299元和299元，包含两款产品的套装价则为1549元。这并非雷蛇首次推出耿鬼联名的外设产品，2023年雷蛇就推出过耿鬼款的八岐大蛇V2游戏鼠标。此次推出两款新品整体均采用与鬼斯、鬼斯通、耿鬼家族外观类似的深紫色底色，印有这三只宝可梦和精灵球的线条轮廓，中间则为耿鬼这一经典幽灵属性宝可梦的彩色大图。本站发现，雷蛇|宝可梦耿鬼款无线鼠标基于此前发布的毒蝰V3专业版打造。其整体重量为55g，搭载雷蛇第二代FOC

VGN 联名《艾尔登法环》键鼠系列产品上架：菈妮 / 褪色者定制主题，首发 99 元起 Aug 12, 2024 pm 10:45 PM

本站8月12日消息，VGN于8月6日推出了联名《艾尔登法环》键鼠系列产品，包含键盘、鼠标和鼠标垫，采用菈妮/褪色者定制主题设计，目前系列产品已上架京东，售价99元起。本站附联名新品信息如下：VGN丨艾尔登法环S99PRO键盘该键盘采用纯铝合金外壳，辅以五层消音结构，使用GASKET板簧结构，拥有单键开槽PCB、原厂高度PBT材质键帽、铝合金个性化背板；支持三模连接和SMARTSPEEDX低延迟技术；接入VHUB，可一站式管理多款设备，首发549元。VGN丨艾尔登法环F1PROMAX无线鼠标该鼠标

雷蛇鼠标驱动在哪个文件夹 Mar 02, 2024 pm 01:28 PM

很多用户不知道自己雷蛇驱动安装的文件去了哪里，这些驱动文件一般都是安装在了系统盘，也就是电脑的C盘，具体位置在programfiles下的RAZE文件夹。雷蛇鼠标驱动在哪个文件夹答：在系统C盘的programfiles下的RAZE文件夹。一般驱动都会安装在C盘，按照位置去找就可以了。雷蛇鼠标驱动安装方法介绍1、下载好官网的文件以后双击运行自己下载的EXE文件。2、等待软件加载。3、在这里可以选择你要安装的哪个驱动。4、选择好以后点击右下角的“安装”就可以了。

Microsoft Word无法使用鼠标选择或突出显示文本 Feb 20, 2024 am 09:54 AM

这篇文章探讨了在MicrosoftWord中鼠标无法选择或突出显示文本时可能出现的问题，以及如何解决这些问题。为什么我无法在MicrosoftWord中选择文本？在MSWord中无法选择文本可能受多种原因影响，如权限限制、文档受保护、鼠标驱动问题或文件损坏。以下将提供解决这些问题的方法。修复MicrosoftWord无法使用鼠标选择或突出显示文本如果MicrosoftWord无法使用鼠标选择或突出显示文本，请遵循下面提到的解决方案：确保您的鼠标左键正在工作检查您是否有资格更改该文件更新鼠标的驱动

Windows 10登录后仅显示黑屏和鼠标 Dec 28, 2023 pm 04:10 PM

win10系统是当下电脑使用系统中最为常见的一款系统了，在对win10系统的使用过程中一些系统的不足也慢慢的显露额出来，许多的小伙伴们最近都反应win10在开机后桌面并没有正常的显示而是黑屏了只有一个鼠标的光标，对于这种问题其实很好解决！今天小编就为大家带来了win10桌面黑屏只有鼠标解决方法有需要的小伙伴们就快来看看吧。win10登录后黑屏只有鼠标图文解决教程：操作方法：1、在开始菜单上单击右键，选择2、点击“其他电源设置”3、点击左侧的4、在“定义电源按钮并启用密码保护”界面点击“更改当前不

鼠标cpi是什么意思 Feb 12, 2024 pm 09:40 PM

CPI又叫做countperinch，鼠标中的CPI就是鼠标的灵敏度的高低，在使用的时候CPI数字越高说明鼠标越灵敏，现在小编在本篇文章中给大家带来了鼠标cpi按钮功能介绍。cpi含义x和y轴含义左键变成右键滚轮上下失灵灵敏度怎么调鼠标不动恢复鼠标cpi是什么意思答案：动态移动中每英寸反馈回来的坐标点数，就是鼠标的灵敏度的高低。按钮功能介绍：1、调节鼠标的移动速度按键;2、通过按cpi键调节鼠标灵敏度;3、衡量鼠标灵敏度的动态指标;4、可对CPI在500/1000CPI之间自由调节;

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题