问题标签 [openlayers-5]

所以最近我正在用 Vue.js 和 OpenLayers 5 做一个小挑战。

我要做的第一步是创建一个简单的开放街道地图，并将我自己的 GPS 数据作为矢量图层放在上面。

事情进展顺利，直到我遇到Vue.js 单文件组件中的“路径”问题。

下面是子组件的样子（用于 GPS 矢量图层生成）：

URL请注意in的三行VectorSource

我留下的那一行是唯一有效的 URL（带有 https://），它是来自 OpenLayers 本身的示例和演示的 URL。

我从官方下载了 .gpx 文件，并将其test.gpx与我自己的 GPS 文件一起重命名2018-08-05_17-22-37.gpx。我把它们放到默认资产文件夹中。我的文件系统的结构看起来是这样的（我没改，原来是 Vue-cli 创建的）：

我想知道我注释掉的这两行 URL 有什么问题？我已经阅读了官方文档，并且对于这些情况，我理解以“。”开头的相对路径。需要使用。我这样做了，但它仍然不起作用。我应该如何编写本地文件的路径？

静态资产和路径的官方文档：

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

更新：

我已经尝试了给定的建议，感谢所有帮助过的人，但目前没有任何效果。要么../，@要么import

我开始阅读 OpenLayers 的文档，我觉得这很有趣：

OpenLayers 将URL发出一个 XMLHttpRequest 来加载 GPX 文件。我认为这就是问题所在。因为我认为我们无法在 Vue 中制作 XMLHttpRequest 来获取本地文件。因为所有的文件都会先编译到最后，所以我们没有像 '../asset/x.gpx' 这样的路径。

我不知道我是否理解正确。我还想问一下文件系统在全部编译后会是什么样子？

最后的更新

今天解决了这个问题，把GPX文件放到public文件夹下，使用Vue-resource(GET)获取，代码如下：

在 OpenLayers 方面，我只是使用了标记为重复的问题中的解决方案 2 。我不再使用该URL选项并选择使用Vue-resourceas加载 GPX 文件String并对其进行解析，最后将解析后的特征添加到空矢量图层。

我通过使用 LineString 几何使用 openlayer v5 和样式功能，没有不同的不同样式。造型特征码：

在地图单击事件的上述代码中，我尝试了 getGeometry() 但它没有返回几何或坐标。

子几何图像

单击即可获得子样式几何图形的任何帮助。

我正在使用 angular6 和 openlayers5。

场景是用户进行搜索，一些特征从数据库中获取并呈现在 OL 矢量图层上。此时，这些要素已经有了一个名称，该名称来自数据库 (postgresql)，因此这是它们在地图上呈现时的名称。

然后用户可以单击其中任何一个进行编辑。有一个包含功能名称的文本字段，但可以进行编辑。

我想在地图上编辑要素的名称，同时正在编辑文本字段的名称。现在我正在编辑文本字段中的名称，但地图上的名称并没有改变，这肯定会让用户感到困惑。

我现在拥有的。每次搜索后我都会得到一个 GeoJSON 并将其放在图层上。

当一个特征被点击时，我得到它的名字并将它放在一个对象中。

然后我有一个函数，它从数据库中获取该功能的所有额外细节，并通过使用值重置它以将它们置于角度反应形式

最后，这是处理地图上特征文本的特征样式函数（受原始 OL 示例的启发）

我试着做类似的事情

但这不会更新地图上的名称，因为正在编辑文本字段。

我怎样才能解决这个问题？

谢谢

在修改http://jsfiddle.net/CPRam/egn1kmc8/上找到的参考链接后，我通过在 openlayer v5.2 中使用具有不同宽度笔划的单要素对象的样式几何选项在地图上生成了平行线串。

在样式函数中使用带有调用函数的几何图形时，我没有在样式的单击事件中获取几何图形。因此，为此，我删除了调用函数并给出了具有平行距离的固定分辨率。

因此，现在在“单击”事件中，我能够获得具有所有样式及其几何形状的功能。但在里面map.on('singleclick',function(event){})...。如何区分点击哪条线或几何图形。

我尝试单击事件点是否与线相交但没有成功然后我在这里理解问题是我单击 Stroke not on Line 因为单击事件像素点也无法与是否与线相交

具有多几何样式的单个特征的图像：

即使我尝试了 turf.js pointToLineDistance() 但由于动态宽度和线坐标差异在我的逻辑中没有得到正确的线串。

我谷歌但没有得到任何解决方案来获取在地图上单击哪种样式几何（线）。请参阅上面的代码jsFiddler参考链接

通过任何事件来获得单击哪个 lineString 的任何帮助。

我尝试将 OL5 矢量切片与全局切片网格一起使用。

一个请求看起来像http://localhost:8000/get-vector-tiles/0/3487/6007，据我了解{x}/{y}是来自原点的图块的坐标（数字）（在我的情况下0,0）。

起始分辨率为9.554628535647032，因此图块大小为9.554628535647032 × 256 = 2445.984905126米

估计请求的区域坐标：

X：2445.984905126 × 3487 = 8529149.3642

是的：2445.984905126 × 6007 = 14693031.2943

考虑到地图的中心是[8531000, 5342500]：

X坐标正确8529149.3642 ~ 8531000，而Y坐标不匹配5342500 vs 14693031.2943

怎么了？

我目前正在开展一个项目，以使用 openlayers 5 的 observable 来观察地图中的某些项目并做出相应的响应。

http://openlayers.org/en/latest/apidoc/module-ol_Observable-Observable.html

我想做的是每次视图的中心发生变化时，我都想调用一个函数。我目前正在这样做（但它不起作用）。

有小费吗？

上周我是 OL 的新手，所以如果我错过了一些明显的事情，我深表歉意。它主要由示例拼凑而成，但我很确定我理解此时发生的事情。你可以在这里看到我的代码：https ://fleur.github.io/dist/index.html ，或者更传统的，在这里：https ://github.com/fleur/olexample 。

如果我创建一个带有矢量图层的地图，其源是一个静态文件（通过“url”属性），那么这些特征就会按预期显示。如果我使用相同的代码创建地图，唯一的区别是源是进行 xhr 调用的加载器函数，则这些功能不会显示。

在这两种情况下，我都在源和层上放置了侦听器，并触发了这些事件：

静止的：

动态的：

请注意，动态事件序列中没有“渲染”事件。我什至做了一个同步 HTTP 调用。我完全不知所措。动态源加载器函数正在用闭包做一些棘手的事情，所以也许这与它有关？不过，代码取自 openlayers.org 上的示例，仅使用 console.log 和不同的 url 进行了修改。

所以，我的问题是：我怎样才能得到动态检索的特性，这些特性确实被添加到源中，以呈现？

我有一个非常标准的 OpenLayers 设置，与正常相比，地图显示相当模糊

值得注意的是，当我使用浏览器缩放页面（注意：不缩放地图）时，它看起来不错：

我不确定在这里做什么，我将地图的 pixelRatio 设置为 1，我的视口标签设置如下

我有用蓝色显示 7 个点的代码。现在我需要显示 7 个不同颜色的点（例如 2 个红色点、2 个绿色点和 3 个蓝色点）。我也需要对这些点进行点聚类工作。

我的代码： https ://codepen.io/quas1k/pen/WgWRNE

如何更改此代码以实现所描述的行为？我在以不同颜色显示点并进一步按颜色对它们进行聚类时遇到问题。

最近的 openlayer 完全是用 typescript 开发的。与 ol5 一起开发 Angular 应用程序时，架构方法是什么？