脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → openlayers地图弹窗

openlayers实现地图弹窗

 更新时间：2020年09月25日 08:05:44   作者：wwj007  
这篇文章主要为大家详细介绍了openlayers实现地图弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了openlayers实现地图弹窗的具体代码，供大家参考，具体内容如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
 <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <title>Ol3 popup</title>
 <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">
 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="#" rel="external nofollow" 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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript函数防抖动debounce

    JavaScript函数防抖动debounce

    这篇文章主要介绍了JavaScript函数防抖动debounce，防抖动作用防止在短时间内过于频繁的执行相同的任务，更多相关内容需要的小伙伴可以参考一下
    2022-06-06
  • 固定表格行列(expression)在IE下适用

    固定表格行列(expression)在IE下适用

    本文为大家介绍下使用expression固定表格行列，这是一种在IE下适用的固定行列的方法，感兴趣的朋友可以学习下，希望对大家有所帮助
    2013-07-07
  • 前端Webpack配置之eval-source-map使用方法

    前端Webpack配置之eval-source-map使用方法

    eval-source-map 是 Webpack 中 devtool 选项的一种模式,它提供了一种内联 Source Map 的方式,用于开发环境中的源代码映射,这篇文章主要介绍了前端Webpack配置之eval-source-map使用方法,需要的朋友可以参考下
    2024-12-12
  • JavaScript实现批量重命名文件

    JavaScript实现批量重命名文件

    这篇文章主要为大家详细介绍了如何利用JavaScript实现批量重命名文件,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • JavaScript圣杯布局与双飞翼布局实现案例详解

    JavaScript圣杯布局与双飞翼布局实现案例详解

    这篇文章主要介绍了JavaScript圣杯布局与双飞翼布局实现案例，这是前端面试中需要掌握的知识点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • openlayers实现地图弹窗

    openlayers实现地图弹窗

    这篇文章主要为大家详细介绍了openlayers实现地图弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript链式调用实例浅析

    JavaScript链式调用实例浅析

    这篇文章主要介绍了JavaScript链式调用,结合实例形式分析了javascript链式调用的相关原理、实现方法及操作注意事项,需要的朋友可以参考下
    2018-12-12
  • js实现简单的验证码

    js实现简单的验证码

    这篇文章主要介绍了js实现简单验证码的方法，验证码主要是为了网站的安全性，防止恶意注册和登陆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript的for循环中嵌套一个点击事件的问题解决

    JavaScript的for循环中嵌套一个点击事件的问题解决

    本文主要介绍了JavaScript的for循环中嵌套一个点击事件点击一次弹出多个相同的值的解决方法，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 基于js对象,操作属性、方法详解

    基于js对象,操作属性、方法详解

    下面小编就为大家带来一篇基于js对象,操作属性、方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论