Openlayers之Popup标注

最新推荐文章于 2024-05-21 16:00:17 发布
最新推荐文章于 2024-05-21 16:00:17 发布
阅读量8.7k 收藏 18
点赞数 5
分类专栏： OpenLayers3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmileCoffin/article/details/56014624
版权

1、Popup标注

Popup标注，即通过冒泡的方式显示标注点的信息，一般与基本的标注点一起使用，而且可以结合HTML、CSS等样式自定义标注信息样式，在弹出框中描述详细点的信息；

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../css/ol.css" rel="stylesheet" />
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/ol/ol.js"></script>
    <style type="text/css">
        body, html
        {
            border:none;
            padding:0;
            margin:0;
        }
        #menu
        {
            width:100%;
            height:20px;
            padding:5px 10px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;
        }
        .ol-popup
        {
            position:absolute;
            background-color:white;
            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:0px;
            width:0px;
            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;
            left:-11px;
        }
        .ol-popup-closer
        {
            text-decoration:none;
            position:absolute;
            top:2px;
            right:8px;
        }
        #popup-content
        {
            font-size:14px;
            font-family:"微软雅黑";
        }
最低0.47元/天 解锁文章
桃李不言_下自成蹊
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
050：vue+openlayers使用Popup组件显示经纬度坐标
大剑师兰特的GIS世界
08-14 686
本示例的目的是介绍演示如何在vue+openlayers中使用popup的形式来显示出经纬度坐标，本示例是采用引用扩展的方式，相比以往的添加方式，减少了不少的代码量。
openlayers的popup实现
Lin00Kun11的专栏
08-29 6524
功能需求如下： 在地图 http://blog.csdn.net/lin00kun11/article/details/38865147
OpenLayers3基础教程——OL3之Popup
LZUGIS
07-07 6453
本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。
OpenLayers封装popup
Moke的博客
08-03 306
OpenLayers封装popup 首先创建一个Vue文件，正常的文件即可，展示的东西以Vue语法展示 html <template> <div id="popup" class="ol-popup"> <div class="pophead" style="width: 100%; height: 20px"> <div id="popup-title" style=" font: b
openLayer-popup弹窗
最新发布
zhushanlin的博客
05-21 220
在 OpenLayers 中，ol.Overlay 用于在地图上叠加自定义的 HTML 元素，如弹出框、提示信息等。下面是一个简单的示例，演示如何创建并使用 ol.Overlay 来显示一个点击地图上要素后弹出的提示信息框.创建 Overlay 实例: 使用 ol.Overlay 创建一个新的覆盖物实例，并指定其位置、元素和定位方式。添加到地图: 通过 map.addOverlay() 方法将覆盖物添加到地图上。创建地图: 首先，你需要有一个基础的地图实例。
OpenLayers基础教程——实现popup弹出框
HerryDong的博客
08-20 7505
1、前言 在OpenLayers中，一般使用ol.Overlay实现popup弹出框，弹出框一般用于显示地图上兴趣点的一些属性信息，如下图所示。下面开始介绍实现方法。 2、准备测试数据 在SqlServer中新建一张省会数据表——ProvincialCapital，字段如下表所示： 字段 含义 Id 自增主键 CityName 城市名称 ProvinceCode 省份编码 Pinyin 拼音 Attribution 归属 CityCode 城市编码 PostCode
OpenLayers 3 之 弹出框（popup）
热门推荐
研究与专注
03-18 2万+
摘要          上回说到，加载完地图后，我们想更多一点交互，而不仅仅是缩放和平移，赋予地图多一点的生命 ~-~！点击地图，它至少应该知道我是在哪里点击了，并且弹出一个气球类似的框框告诉我！这次，我们就来尝试给我们的地图加上这个能力！          PS：这次的例子是基于上一篇的加载地图的代码的哦！在上一篇的基础上增删修改，所以读读前一篇是很有必要的哦！ 正文
openlayers [九] 地图覆盖物overlay三种常用用法 popup弹窗，marker标注，text文本
爱玩亚索的程序员
01-19 1088
常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等。
（转）OpenLayers3基础教程——OL3之Popup
06-09 253
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述： 本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。 接口简介： overlay跟ol.control.Control一样，是一个可见的窗口，但是不和Control一样，不是固定在地图区域...
Openlayers3 实现点击不同的图标弹出不同的popup信息
英勇的博客
02-03 3703
1、 我们老师的书籍《WebGIS之Openlayers全面解析》上面有关于popup的例子，作为例子，肯定是写死的，没有查询数据库，也就是只有一个地理位置。（不要管为什么看不到地图 ）如下图： 2、 我想要的效果就是，查询数据库，找出所有的监测站点，并把这些站点显示在地图上，点击不同的站点能弹出不同的信息。如下图，是我想要的效果： 3、 先给出书本上参考例子的代码，接下来对例子的代码进行修改...
OpenLayers Popup（浮窗）的Vue组件
GIS小虫的博客
04-25 1247
根据openlayers官方的popup实例改的，使用Vue2+TS，功能比较简单 OLPopop.vue <template> <div ref="container" class="ol-popup"> <a href="#" ref="closer" class="ol-popup-closer"></a> <slot></slot> </div> </template> impo
Popup.js（有用例及注释）
09-01
Popup.js 是一个很不错的javaScript 弹出窗口js库。 可修改，可括展性好。 Web编程必备的好工具啊。 下载后解压，打开Demo.html即可以看到效果了。 希望对大家有帮助！！
openlayers 添加标注 markers
11-13
openlayers 添加标注 markers 怎么给Google地图添加标注
openlayers3 获取点图层数据并添加标注和展示标注信息实例
11-29
openlayers3 显示静态地图，从后台查询点数据（后台java代码没有提交，太简单了。。。）展示到地图并添加标注，给标注添加点击事件并展示标注信息，初次接触开源GIS，代码中有错误还请各位看官指正，感谢！
ol-popup:OpenLayers弹出式叠加层
05-13
OpenLayers弹出窗口 地图的基本弹出式窗口叠加层。 默认情况下，地图居中，以便弹出窗口完全可见。 与OpenLayers版本3、4、5和6兼容（有关为OpenLayers安装适当版本的ol-popup ，请参阅注释）。 例子 这些示例演示了用法，并且可以通过在线查看这些示例： 创建一个弹出实例，单击即可显示它，并指定内容 处理与弹出内容中的元素交互触发的DOM事件 控制弹出窗口的尺寸和滚动溢出的内容 每次单击地图时添加一个新的弹出窗口 要将弹出窗口与和模块捆绑器（如Parcel，Webpack等）一起使用，请参见 。 所有示例的来源都可以在找到。 安装 浏览器 JS 在OpenLayers之后加载ol-popup.js 。 弹出式叠加层可作为Popup或ol.Overlay.Popup 。 < script src =" https://unpkg.com/ol-popu
Openlayers绘制地图标注
10-14
在OpenLayers中绘制地图标注是将特定的信息或者兴趣点（POI）以图标或文字的形式在地图上清晰呈现的关键操作。这有助于用户更好地理解和解析地图上的数据。以下是对OpenLayers中绘制地图标注的详细说明： 1. **标注...
Openlayers绘制聚合标注
10-14
在OpenLayers中，聚合标注（Clustered Annotation）是一种优化大量地理标记点显示的技术，它在不同缩放级别下通过将相近的点聚合成一个单一的标注来提高性能和用户体验。这样，当地图缩放级别较小时，用户看到的是...
openlayers 添加文字标注
06-18
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签
openlayers 自定义标注
07-17
openlayers 画点并标注，用静态图片作为图层，并从数据库加载点信息显示在图层上
openlayers批量删除标注
01-13
在OpenLayers中，可以通过以下步骤批量删除标注点： 1. 创建一个矢量图层（Vector Layer）来存储标注点。 2. 创建一个矢量源（Vector Source）并将其添加到矢量图层中。 3. 使用矢量源的`addFeature`方法将标注点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值