OL3:按坐标从图层获取特征

2024-01-22

我想通过坐标获取图层的特征。 此外,我想在弹出窗口中打开此功能,到目前为止我已经通过 onclick 事件解决了这个问题。但我想通过给出特征的坐标并打开特征的弹出窗口来实现。

我有一个带有地图的图层和一个带有以下功能的图层:

if (trackMap != null) {
  for (var i = 0; i < trackMap.length; i++) {
    var trackInfo = trackMap[i];
    lat = parseFloat(trackInfo.lat);
    lon = parseFloat(trackInfo.lon);

    var layergpx = new ol.layer.Vector({
      source: new ol.source.Vector({
        parser: new ol.parser.GPX(),
        url: '${contextRoot}/gps/gpx2' + trackInfo.url
      })
    });
    layers.push(layergpx);
  }
}

我想在另一个Javascript函数中获取这一层的功能。

如何通过单击地图打开弹出窗口:

/**
 * The Click Event to show the data
 */
var element = document.getElementById('popup');
var popup = new ol.Overlay({
      element: element,
      positioning: ol.OverlayPositioning.BOTTOM_CENTER,
      stopEvent: false
});
map.addOverlay(popup);

map.on('singleclick', function(evt) {
  map.getFeatures({
    pixel: evt.getPixel(),
    layers: vectorLayers,
    success: function(layerFeatures) {
      var feature = layerFeatures[0][0];
      if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);
        $(element).popover({
          'placement': 'top',
          'html': true,
          'content': feature.get('desc')
        });
        $(element).popover('show');
      } else {
        $(element).popover('destroy');
      }
    }
  });
});

但我希望不要通过在地图上单击来打开此功能,而是通过在文本字段中输入坐标来打开此功能,然后地图会打开此弹出窗口,就像在 onclick 事件中一样。


看一下这个例子,看看它是否对您有帮助:http://openlayers.org/en/latest/examples/kml.html http://openlayers.org/en/latest/examples/kml.html

var displayFeatureInfo = function(pixel) {
  map.getFeatures({
    pixel: pixel,
    layers: [vector],
    success: function(featuresByLayer) {
      var features = featuresByLayer[0];
      var info = [];
      for (var i = 0, ii = features.length; i < ii; ++i) {
        info.push(features[i].get('name'));
      }
      document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
    }
  });

map.getFeatures() 有这个成功回调,它提供在layers: [vector]中指定的图层的特征。随意定制以获得您所需要的。

===更新===

在 OpenLayers 3 的 Map 对象中,您有一个函数: getPixelFromCooperative

/**
 * @param {ol.Coordinate} coordinate Coordinate.
 * @return {ol.Pixel} Pixel.
 */
ol.Map.prototype.getPixelFromCoordinate = function(coordinate) {
  var frameState = this.frameState_;
  if (goog.isNull(frameState)) {
    return null;
  } else {
    var vec2 = coordinate.slice(0, 2);
    return ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2);
  }
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

OL3:按坐标从图层获取特征 的相关文章

  • 如何在react-select v2中创建optgroup?

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com
  • 在 Angular 单元测试中应该如何处理运行块?

    我的理解是 当您在 Angular 单元测试中加载模块时 run块被调用 我认为如果你正在测试一个组件 你不会想同时测试run块 因为unit测试应该只是测试一个unit 真的吗 如果是的话有什么办法可以防止run阻止运行 我的研究让我认为
  • Sails.js - 如何更新嵌套模型

    attributes username type email validated by the ORM required true password type string required true profile firstname s
  • 是否可以将自定义 HTML 添加到传单图层组和图层控件

    有什么方法可以将自定义 HTML 注入图层组和图层控件中吗 在我们的应用程序中 我们实现了滑块 输入 范围 来调整不透明度设置 并且很明显 在其控制容器内部的基础层上使用专用滑块是有意义的 没有选项或参数可以修改此控件 理想情况下 我们希望
  • Amcharts 图表 - 图表列到自定义 URL 的超链接以在新选项卡/窗口中打开

    我正在尝试制作一个 amcharts 图表 其中的列链接到自定义网址 并希望网址在新选项卡 窗口中打开 我尝试将此代码添加到图形对象中 但它不起作用 它在同一选项卡 窗口中打开链接 listeners event clickItem met
  • 变量前面加双下划线

    我的节点代码中有以下代码片段 var fs require fs fs readdir dirname function err files console log files 为什么变量 dirname 有双下划线 我知道一个下划线是私有
  • JavaScript 原型 - 请澄清

    有人可以帮我理解原型属性吗 我不明白原型属性是函数的属性还是函数内部的属性 假设我们创建以下构造函数 Food 此时 函数 Food 具有 Food prototype 属性 由于 Food 是 Object 的实例 因此这意味着 Obec
  • jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

    我正在尝试使用 TypeScript 和 jspm system js 来引导 Web 应用程序进行模块加载 我还没有走多远 安装 jspm 后 并使用它来安装 jQuery jspm install jquery 以及基础知识 main
  • 将数组中的所有元素相乘

    我在这里找不到我真正想要的例子 我想将所有数组元素相乘 因此如果数组包含 1 2 3 总和将为 123 6 到目前为止 我已经得到了这段代码 但它返回未定义 function multiply array var sum 1 for var
  • 更改特定字符串的颜色

    有谁知道如果将特定单词输入文本区域 我如何更改它的颜色 例如 如果用户输入 你好我的朋友 它会动态地将 你好 更改为绿色 在google上花了很多时间 找不到任何相关的东西 谢谢 textareas 的设计目的不是选择性着色
  • 大型应用的回流/布局性能

    我正在使用 GWT 构建一个 HTML 应用程序 其性能总体上是正确的 有时 它会加载 DOM 中的许多对象 并且应用程序会变得很慢 我使用 Chrome 开发者工具分析器来查看时间花在哪里 在 Chrome 下 一旦应用程序被编译 即没有
  • selenium-webdriver 与 webdriverjs 有什么区别(以及何时使用)?

    我是一位使用 selenium webdriver 的经验丰富的专业人士 我正在探索有关如何测试 javascript 应用程序的更多选项 我发现了 webdriverJs 不幸的是 我不明白这两者 2 之间有什么区别 有人可以解释一下何时
  • Promise 构造函数回调的主体何时执行?

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt
  • D3.js - 具有多个环的圆环图

    以下示例显示了 D3 js 中的圆环图 是否可以向图表添加多个圆环 var dataset apples 53245 28479 19697 24037 40245 var width 460 height 300 radius Math
  • 不可见的 reCAPTCHA - 缺少必需的参数:sitekey

    我正在为每个带有具有类的按钮的表单动态加载不可见的 reCAPTCHAg recaptcha 我遇到的问题是验证码未正确加载 我不知道为什么 我按照验证码网站上的文档进行操作 但我不确定如何以及为什么会出现此错误 Uncaught Erro
  • 无法从 JSON 请求获取数据,尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id
  • 指定在任何 Jest 设置发生之前运行的代码

    tl dr 是 1 我怎样才能让Jest使用原生的require函数可以在任何地方加载我的测试中的所有模块 2 我将在哪里 如何进行修改 即替换为esm加载程序 https github com standard things esm ht
  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网
  • 使用 QtWebEngine 将 C++ 对象暴露给 Qt 中的 Javascript

    使用 QtWebkit 可以通过以下方式将 C 对象公开给 JavascriptQWebFrame addToJavaScriptWindowObject如中所述https stackoverflow com a 20685002 5959
  • React 错误:目标容器不是 DOM 元素

    我刚刚开始使用 React 所以这可能是一个非常简单的错误 但我们开始吧 我的html代码非常简单 load staticfiles

随机推荐

  • 自动续订订阅:一个月有多长?

    我对一些问题感到困惑 1 自动续费订阅的一个月期限是30天还是按照自然月 因为我只能在沙盒模式下测试 所以持续时间只有几分钟 也许苹果只是简单地这样计算 2013 01 15 gt 2013 02 15 gt 2013 03 15 如果是这
  • r 在 for 循环中创建并寻址变量

    我在一个文件夹中有多个 csv 文件 我想将此文件夹中的每个 csv 文件加载到一个单独的数据框中 接下来 我想从该数据框中提取某些元素到一个矩阵中 并计算所有这些矩阵的平均值 setwd D data group 1 lt list fi
  • CMDeviceMotion 用户加速度漂移

    我正在使用以下方法获取加速度数据 CMDeviceMotion userAcceleration 我注意到一件有趣的事情 Z 轴上总是有一个小偏差 约为 0 0155 方差为 0 002 而在其他轴上 平均值接近 0 我正在使用 iPod
  • 查看 IsEnabled 属性在 Xamarin Forms 上不起作用

    这是我的列表视图 Listview 内部按钮 IsEnabled 属性不起作用 IsEnabled False 不起作用 我遵循了此步骤 但仍然不起作用https forums xamarin com discussion 47857 se
  • 寻找一个Linux PDF库来从PDF中提取注释和图像[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个免费的库 Java Ruby 它可以在linux上运行 并且可以从PDF中提取图像和注释
  • 从文件流上传到 ADLS

    我正在 ADF 中进行自定义活动 其中涉及从 Azure 存储 Blob 读取多个文件 对它们进行一些处理 最后将生成的文件写入 Azure Data Lake Store 最后一步是我停止的地方 因为据我所知 NET SDK 只允许从本地
  • .NET 应用程序中的最大线程数?

    在 C 应用程序中可以创建的最大线程数是多少 当达到这个限制时会发生什么 是否抛出某种异常 没有固有的限制 最大线程数由可用物理资源量确定 看到这个文章作者 雷蒙德 陈 https devblogs microsoft com oldnew
  • 使用 JavaMail 创建带有附件的 EML 文件 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我将使用
  • 如何在发布模式下启用框架的可测试性?

    我有一个 iOS 应用程序项目 由 Swift 3 0 编写 该工作区包含我们团队构建的动态框架 用于在整个项目中共享可重用的代码和资源 We use Activate Compilation Conditions用于切换生产服务器 url
  • PhpMyAdmin |致命错误:第 0 行未知中允许的内存大小 134217728 字节已耗尽(尝试分配 xxxxxx 字节)

    我试图找到此错误的原因 但失败了 我已经在我的服务器上安装了 PhpMyAdmin 现在在每个页面的页脚上都收到此错误 致命错误 第 0 行未知中允许的内存大小 134217728 字节已耗尽 尝试分配 10934248 字节 正如您所看到
  • “命令”对象没有属性“has_permissions”

    client command commands has permissions administrator True async def kick ctx member discord Member reason None try awai
  • IdentityServer、声明和角色

    我正在使用 Identity Server v4 但我认为与 v3 相同 和 NET Core 现在我有一个我不明白的奇怪问题 在我的 MVC 应用程序中 我使用 授权 角色 极客 保护我的控制器 操作 从以下位置查看当前用户HttpCon
  • 在android中为按钮添加阴影

    我试图在单击时在图像按钮上添加某种阴影 是否可能以及如何实现 所以我有按钮 我希望当我点击它时它看起来像是被按下的 所以我创建了新的 xml 如下所示
  • 如何在 Next JS 博客中实现上一篇文章和下一篇文章?

    我想从特定的博客文章转到上一篇文章和下一篇文章 考虑一下这个盖茨比的例子 https gatsby starter blog demo netlify com my second post https gatsby starter blog
  • 如何停止 Android webView swipeToRefresh 加载进度条?

    注意 这个问题已经被问过here https stackoverflow com questions 41467855 how to stop swipetorefresh progressbar in webview没有得到任何答案 所以
  • 在迭代 Java ArrayList 时修改它

    我想做类似的事情this https stackoverflow com questions 993025 java adding elements to a collection during iteration 但是 我不希望迭代添加的
  • ListJoinedTeams 可以指定 /me 工作,但不能指定 /user

    I tried ListJoinedTeams与指定用户 但它不起作用 我试过ListJoinedTeams与我自己和Listmessage与指定用户一起使用并且它有效 不起作用 https graph microsoft com v1 0
  • 如何在媒体查询中使用 > 或 <(大于和小于)符号

    我们可以在媒体查询中使用 gt 或 media screen and min width lt 768px 媒体查询不使用这些符号 相反 他们使用min and max 前缀 这包含在spec http www w3 org TR css3
  • bootstrap 无法连接到 Angular 6?

    npm install bootstrap 配置angular json styles node modules bootstrap dist css bootstrap min css styles scss 直接导入src style
  • OL3:按坐标从图层获取特征

    我想通过坐标获取图层的特征 此外 我想在弹出窗口中打开此功能 到目前为止我已经通过 onclick 事件解决了这个问题 但我想通过给出特征的坐标并打开特征的弹出窗口来实现 我有一个带有地图的图层和一个带有以下功能的图层 if trackMa