Openlayers 3. 如何为功能制作tootlip

2023-12-30

现在我正在将我的项目从 openlayers 2 移动到 openlayers 3。不幸的是,我找不到如何显示功能的标题(工具提示)。 OL2中有一种风格叫graphicTitle。 您能给我一些如何在 OL3 上实现工具提示的建议吗?


这是 ol3 开发人员的示例。jsfiddle.net/uarf1888/ http://jsfiddle.net/uarf1888/

var tooltip = document.getElementById('tooltip');
var overlay = new ol.Overlay({
  element: tooltip,
  offset: [10, 0],
  positioning: 'bottom-left'
});
map.addOverlay(overlay);

function displayTooltip(evt) {
  var pixel = evt.pixel;
  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
  });
  tooltip.style.display = feature ? '' : 'none';
  if (feature) {
    overlay.setPosition(evt.coordinate);
    tooltip.innerHTML = feature.get('name');
  }
};

map.on('pointermove', displayTooltip);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Openlayers 3. 如何为功能制作tootlip 的相关文章

  • 如何在 OpenLayers-3 中使用 SVG 图像作为地图标记?

    我正在尝试使用 SVG 图像在 OpenLayers 3 OL3 中创建地图 针滴 即地图标记 目前 我使用 PNG 图像作为引用 ol style Icon 源 src 属性的 pindrop 效果很好 但是 使用 SVG 图像时会失败
  • 确保所有图块均加载到 Open Layers 3 XYZ 源中

    我们有一些层利用ol source XYZ来源 对于我们使用的加载策略ol loadingstrategy tile new ol tilegrid createXYZ 在进行其他操作之前 我们需要确保所有图块已完全加载到地图视图中 我们已
  • Geoserver - 使用 DWITHIN 过滤点

    首先 我是 Geoserver 和 Openlayers 的新手 我一直试图在 Geoserver 端使用图层预览页面来使用 Openlayer 查看器查看我的图层 我最终会将其实现为 Openlayers WFS GET 请求 我想要完成
  • 显示 GeoTiff 图像 Openlayers 3

    我需要以 GeoTiff 格式显示光栅图像 它是用 QGIS 进行地理参考的 看起来 Openlayers 3 15 不支持这种格式 你知道这件事吗 var agentUrl http localhost 9925 Wgis assets
  • 在隐藏元素中绘制 OpenLayers 3 地图

    我正在编写一个页面 您可以在其中查看有关区域和地图的详细信息 详细信息位于一个选项卡上 地图位于另一个选项卡上 HTML 的相关部分如下 类来自引导程序 http getbootstrap com css div class col xs
  • 如何在 OpenLayers 3 中使描边不透明度起作用

    无论我如何尝试 我都无法在 OpenLayers 3 中使描边不透明度正常工作 我试图实现的是用 0 5 的不透明度在 OSM 平铺地图上画一条线 这是示例代码 var lineString new ol geom LineString 4
  • 将平铺 Google 地图与 OpenLayers 3 结合使用

    如何将 google 地图与 OpenLayers 3 一起使用 我想从 OpenLayers 2 迁移到 3 这是一个例子 谷歌地图与 OpenLayers 集成示例 http openlayers org en v3 0 0 examp
  • Openlayers-3 强制刷新地图

    我有一个自定义样式 可以显示 隐藏地图上的功能 但是当应用它时 它不会激活 直到地图由于功能更新而刷新 但我需要它立即触发 我尝试了 map render 和 renderSync 但它们什么也没做 mapResize 似乎也没有执行任何操
  • OpenLayers 3 图像和文本样式 zindex

    我注意到文本和图像样式在渲染时似乎不遵守其图层顺序 例如 当具有这些样式的许多要素靠近时 所有文本都会呈现在其他重叠矢量要素之上 有没有办法禁用或覆盖这种行为 谢谢 myFeature setStyle new ol style Style
  • 使用 OpenLayers 从 GeoServer Javascript 编辑 WFS

    看完后非常好有关如何使用 OpenLayers 编辑 WFS 的教程 http wordpress dbauszus rhcloud com wfs t with openlayers 3 5 我尝试过复制它 但是使用来自 Geoserve
  • 如何减小 openlayers 3 中图标的大小,我正在使用 bing 地图

    这是我的代码 var iconFeature new ol Feature geometry new ol geom Point ol proj transform 95 3698 29 7604 EPSG 4326 EPSG 3857 n
  • div 下面仍然触发 click 事件

    这是我正在构建的 PhoneGap 应用程序 我正在我的笔记本电脑上进行测试 然后使用 PhoneGap cli 在 iPhone 上进行测试 我有一个 openlayers 3 地图 上面记录了点击事件 我还有一个 div 当菜单显示时
  • 如何在 Openstreetmap 上双击获取坐标?

    我在用角度 openlayers 指令 https github com tombatossals angular openlayers directive 我想获取双击点的坐标 类似的问题 将点转换为经纬度 https stackover
  • 性能测试 OpenLayers 与 Leaflet

    我想比较 OpenLayers 和 Leaflet 之间的性能 我想测试诸如渲染矢量文件 底图 显示大量标记等最快的东西 我可以自己设置这个例子 但我不知道如何实际测量它们之间的速度差异 在哪里可以看到执行将矢量数据加载到地图等任务实际需要
  • openlayers 3 可以使用 gif 渲染动画标记吗

    我想问如何让标记像 openlayers 2 一样显示动画 gif 图片 它可以显示动画标记 我想要的是显示动画 gif 标记而不使标记移动 这可能吗 style anchorXUnits fraction anchorYUnits pix
  • 从 Openlayers 3 视口获取所有功能

    我试图找出 Openlayers 3 中图层上可见的所有功能 视口 如果我向地图添加点击事件 我可以找到一个功能 如下所示 但我无法找到视口中可见的所有功能 有人可以帮忙解决这个问题吗 map on click function evt v
  • Openlayers 3 将 EPSG:4326 矢量重新投影到 EPSG:3857

    我需要将 GeoJSON 矢量数据从 EPSG 4326 转换为 EPSG 3857 我有一张地图 var olMapDiv document getElementById olmap control map new ol Map targ
  • 找不到模块:错误:无法使用 TypeScript 定义文件解析“openlayers”

    在使用 TypeScript 的 Visual Studio 2017 React 应用程序中 有一个使用 OpenLayers v4 6 5 的组件 Map tsx package json 文件加载 types openlayers 和
  • 设置样式缩放级别 openlayers 3

    在 Openlayers 中 可以根据缩放级别打开或关闭某些功能 尽管查看了文档 但我在 OpenLayers 3 中没有找到相同的功能 有谁知道如何做到这一点 这是我放置在地图上的功能ol style Text是我只想在用户放大到特定缩放
  • Openlayers3:中止绘制交互

    我在 html 中使用绘制交互来手动绘制路线 manual route creation event createRoute click function remove previous interactions map removeInt

随机推荐

  • 开发人员应该提交 Go 生成的代码吗?

    我使用代码生成器插件根据 OpenAPI 规范生成服务器存根 我想知道是否应该将生成的代码提交给版本控制 一般来说 是的 推理很简单 如果我是您代码的下游用户 也就是说 我只想将您的库作为依赖项包含在内或构建您的应用程序 那么构建您的代码就
  • 使用 vb.net 将表脚本编写为 CREATE TO

    在 SQL Server 中 我可以创建一个与另一个表重复的表 并在其中设置所有约束 我可以在 SQL Server Management Studio 中使用脚本表作为 CREATE TO 来执行此操作 然后我可以在另一个数据库中运行该脚
  • Smalltalk ReferenceStream 对新实例变量有问题吗?

    在 Pharo Smalltalk 中 我使用 ReferenceStream 序列化对象列表 这是我要序列化的对象的类定义 Object subclass Task instanceVariableNames title notes li
  • 整合银行账户[已关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有任何 API 可以将银行帐户集成到 NET 应用程序中 我希望为用户提供将银行对账单提取到我的软件
  • 动态铸造?

    我需要一种方法将对象转换为编译时未知的类型 像这样的东西 object obj public type of obj Obj get return obj set obj type of obj value 唯一知道的是 obj 是一个值类
  • 远程 Glassfish v4.1 部署上出现 TimeoutException

    我在 OVH 上有 VPS 假设它是 vpsXXXX ovh net 使用 Debian 7 我已经安装了 Java 8 Glassfish 4 1 并启用了安全管理 asadmin gt change admin password use
  • 使用Sql Server 2016的OPENJSON函数从Json文档中的多个数组元素中选择结果

    是否可以在 Sql Server 2016 中将来自多个数组元素的 json 文档的部分组合成单个结果 给定这个 json fruit types possible Apples Bananas Pears category Basic p
  • C# 控制电脑音量

    有没有办法在 C 中控制计算机的实际音量并将其显示在垂直轨迹栏中 我几乎已经尝试了一切 但一定有一些东西我错过了 Thanks 您是否尝试过使用winmm dll通过 p Invoke 库 这就是本文所推荐的 http www dreami
  • 测试 SQLite 触发器内的 COUNT()>X

    如何比较 SQLite 中触发器内的 COUNT 结果 到目前为止 这是我想出的代码 CREATE TRIGGER mytrigger BEFORE INSERT ON mytable BEGIN SELECT CASE WHEN SELE
  • Django 查询聚合同一字段中匹配实例的总和

    我有以下 Django 2 1 模型 class Sales models Model product name models ForeignKey Product category models ForeignKey Category s
  • 如何在kubernetes环境中使用spark配置beam python sdk

    TLDR 如何使用 environment type EXTERNAL 或 PROCESS 配置 Apache Beam 管道选项 描述 目前 我们在 Kubernetes 中有一个独立的 Spark 集群 如下this https sta
  • MySQL存储过程中的变量

    我遇到了这个简单存储过程的问题 我想保存LAST INSERT ID放在一个变量中 然后将其分配给下一个插入 DELIMITER CREATE PROCEDURE Adda Name varCHAR 45 Surrname varCHAR
  • 非空参数的方法引用?

    我正在读关于Java 8 特性 http www techempower com blog 2013 03 26 everything about java 8 而且我看到他们有方法引用 但是我没有看到当方法重载时如何指定哪个方法 有人知道
  • Google 图表图例 - 重叠文本

    我在页面中使用谷歌图表 但图例文本重叠 如下图所示 这是我的代码 var dataTable new google visualization DataTable dataTable addColumn date Data dataTabl
  • Symfony2:与非命名空间 SDK(特别是 PayPal)集成

    我创建了一个PaypalBundle并添加了贝宝商家 php sdk https github com paypal merchant sdk php to my composer json现在我有一个vendor paypal merch
  • 检查java中长操作的进位

    我正在对 long 类型的数字进行加 减 有没有办法确定此操作是否会设置理论进位 这应该做 Add two long s with overflow detection r s d public static long add final
  • Airflow:使用新计划从头开始重新运行 DAG

    背景故事 我每天都在运行 Airflow 作业 其中包含start date2019 年 7 月 1 日 收集的作业从第三方请求每天的数据 然后将该数据加载到我们的数据库中 成功运行作业几天后 我意识到第三方数据源每月只刷新一次数据 因此
  • centos上无法安装erlang

    在cent os上安装erlang时出现以下错误 错误 软件包 erlang crypto R16B03 0 2 el6 x86 64 erlang 解决方案 需要 libcrypto so 10 libcrypto so 10 64位 错
  • 如何在 Angular 1.5 组件中等待 UI Router Resolve 的承诺

    我正在使用 Angular 1 5 组件 我不知道如何通过 Resolve 获取数据 您能透露一些信息吗 Plunker https plnkr co edit 2wv4YWn8YQvow6FDcGV0 https plnkr co edi
  • Openlayers 3. 如何为功能制作tootlip

    现在我正在将我的项目从 openlayers 2 移动到 openlayers 3 不幸的是 我找不到如何显示功能的标题 工具提示 OL2中有一种风格叫graphicTitle 您能给我一些如何在 OL3 上实现工具提示的建议吗 这是 ol