openlayers实现地图弹窗-6ren

openlayers实现地图弹窗

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章openlayers实现地图弹窗由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

 
         < 
         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 id="codetool">

效果图:

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

原文链接：https://www.cnblogs.com/wwj007/p/13497866.html 。

 
         
          
         
         
         
         
          
           
          Openlayers 
          弹窗 
          地图 
          
          
           
          
         
         
          
          延伸 · 阅读 
          
          
          2021-10-15openlayers实现图标拖动获取坐标 
          2021-10-15openlayers实现地图测距测面 
          2021-10-15openlayers 3实现车辆轨迹回放 
          2021-10-15vue-openlayers实现地图坐标弹框效果 
          2021-10-15vue集成openlayers加载geojson并实现点击弹窗教程 
          2021-10-15Vue+Openlayers自定义轨迹动画 
          
         
         
         
         
          
           
          
         
         
         
           精彩推荐 
          
         
         
          
           
            
           
          JavaScript 
            
            JavaScript字符串对象toUpperCase方法入门实例（用于把字母转换为大 
            这篇文章主要介绍了JavaScript字符串对象toUpperCase方法入门实例,toUpperCase方法用于把字母转换为大写,需要的朋友可以参考下... 。 
             
             JavaScript教程网 
             387 
             2021-04-02 
             
           
  
          JavaScript 
            
            JavaScript不使用prototype和new实现继承机制 
            这篇文章主要介绍了JavaScript不使用prototype和new实现继承机制的相关资料,需要的朋友可以参考下... 。 
             
             JavaScript教程网 
             620 
             2021-06-09 
             
           
  
          JavaScript 
            
            JavaScript实现世界各地时间显示 
            这篇文章主要为大家详细介绍了javaScript实现世界各地时间显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下... 。 
             
             java亮小白1997 
             623 
             2021-09-17 
             
           
  
          JavaScript 
            
            深入理解javascript原型链和继承 
            这篇文章主要介绍了javascript原型链和继承的概念，以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用，是篇非常不错的文章，... 。 
             
             JavaScript教程网 
             848 
             2021-03-17 
             
           
  
          JavaScript 
            
            jQuery不使用插件及swf实现无刷新文件上传 
            这篇文章主要介绍了jQuery不使用插件及swf实现无刷新文件上传,需要的朋友可以参考下... 。 
             
             jQuery教程网 
             900 
             2021-05-08 
             
           
  
          JavaScript 
            
            JavaScript实现删除电脑的关机键 
            本文给大家分享的是一个恶作剧小程序，使用JavaScript实现删除电脑的关机键，非常有意思，主要是通过ActiveX操作注册表来实现，有需要的小伙伴可以参考... 。 
             
             JavaScript教程网 
             827 
             2021-02-18 
             
           
  
          JavaScript 
            
            javascript学习笔记（八）正则表达式 
            这篇文章本来很早就要写的，主要介绍一下javascript正则表达式，拖了挺久的，现在整理下，供大家学习交流哈！... 。 
             
             JavaScript教程网 
             873 
             2021-03-27 
             
           
  
          JavaScript 
            
            微信小程序实现身份证取景框拍摄 
            这篇文章主要介绍了微信小程序实现身份证取景框拍摄，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下... 。 
             
             孙伟涛 
             406 
             2021-09-23 
             
           
  
          
         
         
          
           
          
          
           
           最近更新 
           
           
            
            openlayers实现图标拖动获取坐标 
            openlayers实现地图弹窗 
            openlayers实现地图测距测面 
            openlayers 3实现车辆轨迹回放 
            vue-openlayers实现地图坐标弹框效果 
            
           
          
          
           
          
          
           
           编辑推荐 
           
           
            
             
              
               
               
               云服务器是什么，云主机干什么用的？ 
               
              
            2 
              
              2020最新好用的web服务器软件推荐 
              2020-05-17 
              
            3 
              
              服务器操作系统有哪些? 
              2020-04-06 
              
            4 
              
              web服务器配置（图文详解） 
              2020-04-06 
              
            5 
              
              企业如何选择阿里云服务器配置? 
              2019-10-18 
              
            6 
              
              五大免费主机管理系统优缺点对比及推荐 
              2019-06-14 
              
            7 
              
              2019最新三款Windows下连接Linux的ssh软件下载推荐 
              2019-05-28 
              
            8 
              
              服务器常用管理软件盘点 
              2019-05-27 
              
            9 
              
              Nginx服务器究竟是怎么执行PHP项目 
              2019-05-24 
              
            10 
              
              运维必须知道的关于云服务器的十个问题 
              2019-05-24 
              
            
           
          
          
           
          
          
           
           阅读排行 
           
           
            
            1 基于jquery的blockui插件显示弹出层 
            2 js通过location.search来获取页面传来的参数 
            3 2021年优秀JavaScript框架和技术趋势 
            4 VUE中V-IF条件判断改变元素的样式操作 
            5 Javascript让DEDECMS告别手写Tag 
            6 jQuery中parents()和parent()的区别分析 
            7 2014年最火的Node.JS后端框架推荐 
            8 javascript框架设计读书笔记之数组的扩展与修 
            9 jQuery元素选择器用法实例 
            10 AngularJS入门教程（二）：AngularJS模板 
            
           
          
          
           
          
          
           
           热门标签 
           
           
           
             图标拖动 　 原型 　 原型链 　 仿淘宝商城 　 jqeuryUI 　 网页对话框 　 样式规则 　 blockui 　 页面滚动 　 弹出窗 　 弹出提示 　 hidden 　 Hapi.js 　 无间断 　 对象构建 　 dialogArguments 　 随机显示 　 node应用 　 箭头函数 　 高级类型 　 Vuejs 　 JavaScript技术 　 并发语言 　 JavaScript优化 　 QRCanvas 　 JS库 　 Svelte 　 事件处理函数 　 名称冲突 　 当时时间 　 
            
           
          
          
           
          
         
         
         
          
          © 2019-2021 我(www.zzvips.com) 版权所有 
          关于我们联系我们版权申明网站地图

最后此篇关于openlayers实现地图弹窗的文章就讲到这里了,如果你想了解更多关于openlayers实现地图弹窗的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： OpenLayers3实现地图显示功能

文章推荐： openlayers实现图标拖动获取坐标

文章推荐： openlayers实现地图测距测面

文章推荐： openlayers 3实现车辆轨迹回放

openlayers - openlayers 中的弹出窗口
popup 和 Frame 和 FrameColud 有什么区别？而且，似乎弹出窗口的方向取决于标记相对于 map 的位置。流行音乐可能在标记上方或下方。例如: 上图: 下面: 现在，我想知道如何
openlayers - 哪些书籍可用于 OpenLayers？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
openlayers - 选择特征控制 OpenLayers
我一直在使用 OpenLayers，我做了一个层树(所有层都是矢量图层)，所有这些层都有特征，我想要的是通过选择控件选择这些特征。我制作了选择功能控件，但问题是当我关闭其中一个图层时(我正在从 ma
openlayers - OpenLayers 5 和 OpenLayers 6 的区别
关于即将发布的 OpenLayers 6 的快速问题。有谁知道 OpenLayers 5 和 OpenLayers 6 之间的主要区别是什么。我读了一些 here但出现了其他问题: OpenLayer
openlayers-3 - Openlayers - 不同几何类型的多种样式
所以我使用了一个单个矢量图层，我把我所有的: 积分折线多边形这是我的代码: var source = new ol.source.Vector({ wrapX: false }); var ve
openlayers - 如何按名称删除图层 - openlayers 3
我是用 wkt 添加矢量图层的使用以下代码映射的源: var SelectVector = null; for (var i = 0; i < wktarray.length; i++) {
openlayers - OpenLayers WMS 什么时候物理调用远程服务器？
我正在尝试简化我的应用程序，并想知道 OpenLayers 何时物理调用 WMS 服务器？此外，层可见性是否也在调用中起作用？实例化一个层时会发生吗 var layer = new OpenLaye
openlayers-3 - Openlayers 3偏移正则形状
对于群集功能，我想在OL3中制作以下样式: 一个正方形，在其顶部，在右上角还有另一个较小的正方形。较大的正方形将保留符号，而较小的正方形将保留聚类要素的数量。类似于this 有可能实现这一目标吗？在
openlayers - 在 OpenLayers 中绘制速度引导线
我正在尝试在 OpenLayers map 上绘制一个代表实体的图标，其中包括一条“速度领导者”，这是一条从图标开始并沿实体移动方向向外绘制的小线段。线的长度表示实体的速度。我遇到的问题是我希望线的
openlayers - 使用 openlayer 在标记中单击处理程序
我正在使用 openlayers，当我从服务器查询 pois 列表时，我想为每个添加到 map 中。所以我为它们中的每一个都创建了标记，并且我希望在单击标记时打开一个 FrameCloud。我用这
openlayers - ZoomToExtent OpenLayers 3
OpenLayers 2具有非常有用的map.zoomToExtent(extent)功能。 OpenLayers 3中有类似的东西吗？我可以使用source.getExtent()获得感兴趣的范围，
openlayers - 链接到旧的 openlayers api
ol5最近发布了，但我仍在使用ol4。他们网站上的所有链接都指向最新的文档，但我需要 4.6.5 的文档。有谁知道它在哪里吗？最佳答案 https://openlayers.org/en/v4.6.
openlayers - 使用 OpenLayers 动态添加自定义标记以映射
我想让用户在 map 上添加自定义标记以及每个标记的描述。任何提示、任何教程的链接都会非常有用。最佳答案您可以注册一个函数来在 map 上“点击”事件。当用户点击它时，标记会自动添加。尝试这样的
openlayers - 如何使用 Openlayers map
我对这个 openlayers map 完全感到困惑。即使有很多示例和 wiki，我也找不到如何重用它。我的意思是我想显示我的城市 map ，管理员可以管理，管理员可以添加点和位置，它应该显示在前端。
openlayers - 如何更改 OpenLayers 样式？
我对网络制图非常非常陌生。我有一个由 PostGis 数据库的形状文件制作的 OpenLayers map ，有一个矢量图层，它有默认样式(GeoServer SLD)，但我想在用户单击刷新按钮时更改
openlayers - 如何在本地安装 openLayers 3？
我是 OpenLayers 的新手，我必须开发一个使用它的离线应用程序。我已经下载了 OL 3.7.0 并设置了一个测试 html 文件，该文件通过以下方式加载 OL javascript 文件:
openlayers - 带有圆角的 Openlayer map
我将我的 openlayer map 集成到一个带有圆角的 div 中。我怎样才能让 map 有圆角？我曾尝试将 border-radius 应用于开发人员工具中的许多 div，但 map 拒绝圆角。
openlayers - 如何在 Openlayers 外拖动特征
在我们的应用程序中，我们希望从“CanvasMap”上的标记/功能到外部世界(任何接受该类型拖放操作的 HTML 目标)启动 native (HTML) 拖放操作。想象一下，我们在 CanvasMa
javascript - Openlayers 3 - 创建自定义符号，如 openlayers 2 -> OpenLayers.Renderer.symbol.anySymbol
在 Openlayers v2 中，我可以添加如下符号: OpenLayers.Renderer.symbol.pointToIcon = [100, 70, 20, 50, 42, 70, 20,
openlayers - 在缩放更改时，特征在 openlayers 中消失
我在 map 上有一些功能，在我移动它们之后，使用 var point = new OpenLayers.LonLat(newlon, newlat); point.transform(epsg432

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

openlayers实现地图弹窗

延伸 · 阅读

JavaScript字符串对象toUpperCase方法入门实例（用于把字母转换为大

JavaScript不使用prototype和new实现继承机制

JavaScript实现世界各地时间显示

深入理解javascript原型链和继承

jQuery不使用插件及swf实现无刷新文件上传

JavaScript实现删除电脑的关机键

javascript学习笔记（八）正则表达式

微信小程序实现身份证取景框拍摄

2020最新好用的web服务器软件推荐

服务器操作系统有哪些?

web服务器配置（图文详解）

企业如何选择阿里云服务器配置?

五大免费主机管理系统优缺点对比及推荐

2019最新三款Windows下连接Linux的ssh软件下载推荐

服务器常用管理软件盘点

Nginx服务器究竟是怎么执行PHP项目

运维必须知道的关于云服务器的十个问题