问题标签 [openlayers-5]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Openlayers如何在地图moveend事件上更新叠加位置
我在 openlayers 地图上有一个 ol.geom.Point 类型的点特征,并且在单击该特征时会显示一个弹出窗口。弹出窗口是<div>
我添加为叠加层的元素,每当我在地图上找到点击事件的功能时,我都会显示和隐藏叠加层。
问题是当您在地图上放大或缩小时,覆盖错位(tip 和 div) 。但是,如果您再次单击功能,它会正确显示,但每次单击并不理想。我也试图在每个世界中显示覆盖,每个世界的问题都是一样的,它错位了。
预期的结果是,无论何时我单击功能,都应在功能上显示叠加层,而不管放大或缩小。
这是重现问题的工作小提琴: Openlayers overlay JSFiddle
image - 打开图层:如何显示与中心有一定偏移的功能的 svg 图标
我必须使用 OpenLayers 在地图上显示多个要素。每个功能必须由 2 个图像(2 个 SVG 图标)表示。其中一个图标必须锚定在要素坐标上,但第二个图标必须移动固定数量的像素。另一个问题是移位的也必须旋转,并且旋转中心必须是图标的中心,而不是特征的中心。作为一个例子,我可以说:有一个车辆图标始终面向北方,还有一个显示旋转方向。方向一必须始终显示在车辆顶部
我尝试使用各种偏移量和锚点,但无法精确定位第二个图标
代码是用 ExtJS 完成的,但我希望它是可读的:所以我使用函数 fot 为 ImageVector 设置样式:
函数看起来像:
}
现在,如果旋转第二个图标,它会围绕特征的中心旋转,而不是在其自身的中心。我曾考虑向第二种样式(点)添加新几何,但在这种情况下,我无法指定几何与原始特征中心的偏移量(以像素为单位)。我只能使用坐标,但不知道是否可以将它们转换为像素。实际上,预期的解决方案类似于可以指定 offsetX 和 offsetY 的样式的 text 属性。
你能建议我一些解决方案吗?
openlayers - 我想要制作 ol.js 文件。如何制作全包ol.js?
我想制作ol.js,比如ol cdn 文件或v5.3-dist 的结果。
例如,提供 ol 网站,不是我想要的。ol 的例子只是做应用,ol 的一部分。
我想要完整的 ol.js。
如何制作ol.js?网络包?包裹?
javascript - 使用 OpenLayers,如何在单个图层上显示不同功能的不同图标?
首先,我是 Openlayers/JS 整体上的新手,并且对一般的编程相当缺乏经验,因此我的代码可能存在其他我不知道的问题。
我正在使用最新版本的 Openlayers (5.3.0)。
我的程序目前通过 Ajax 传递 GeoJson 格式的数据以显示在 Openlayers 地图上。它为要显示的要素创建地图、视图和图层。当我按下页面上的“开始”按钮时,这些功能已成功加载到地图上。在我的情况下,这些特征只是使用 png 标记进行可视化的具有纬度/经度的简单点。GeoJson 在 C# 中看起来像这样,然后被序列化并发送到我页面上的 JS 进行反序列化:
JS接收到上面的序列化后,使用这段代码添加到图层中查看:
它被添加到的矢量图层如下所示:
iconStyleFunc() 看起来像这样:
这适用于使用图标“pinother.png”为所有功能设置样式。当我按下按钮时,我在地图上显示点没有问题。
我想做的是根据每个功能的GeoJson“iconpath”属性中的图标路径应用样式,这样任何具有“pinred.png”的功能都会使用它而不是默认的“pinother.png”,等等,我将来可能需要添加各种图标。
我不确定如何阅读每个功能的此属性以及如何在样式功能中最好地实现它。我设想的方式是使用 iconStyleFunc() 遍历功能,读取每个功能的 IconPath 属性,将该值附加到 iconStyleFunc() 中的“src/images/”路径并适当地设置功能的样式。
openlayers - 是否可以在 OpenLayers 5 中定义视图的有效视口区域?
OpenLayers 示例“高级视图定位”(https://openlayers.org/en/latest/examples/center.html)展示了如何创建“视图中的视图”。
如果您检查该示例,它会使用传递给 的填充view.fit()
。我看到的问题是只有该函数接受填充,因此无法为重新定位设置动画。
此外,如果您查看屏幕截图,适合操作将地图置于 B 点的中心,但单击缩放按钮会使用 A 点。
我的问题是:有没有办法在创建视图时指定该子视图,以便所有操作(动画、缩放、拟合等)总是使用 B 点?
一个额外的问题是,像 Map Rotate (Alt+Shift+mouse) 这样的默认交互围绕 A 而不是 B 旋转。因此,定义该子视图以自动影响所有视图操作会非常有帮助,比如说在打开侧面板时,例子。
javascript - openlayers 5:将地图中心移动一个像素值
我有一个由以下内容生成的 openlayers 5 地图:
我想通过单击元素将地图的中心移动 [10, 10] 像素,并且我正在尝试以下事件:
但它不起作用,它破坏了地图。
实现移动的正确方法是什么?
reactjs - React 组件中的 OpenLayers Draw 模块不会更新地图
我正在开发一个使用 React 作为所有其他 UI 内容的包装器的 OpenLayers 地图。因此,我也在尝试对一些特性进行组件化,在本例中是绘图。
下面是重新创建OpenLayers 文档中的示例的尝试。发生的事情是我得到了绘图表面,它进行了绘图,但是一旦绘图完成,地图上什么也没有显示。
我还有一个代码沙盒中行为的活生生的例子。
地图组件
绘图组件
编辑:应用了使用地图上相同来源的建议,这意味着还要添加我以前没有做过的图层。
openlayers - 有没有办法在 openlayers 5 中强制重新加载/刷新地图?
使用 openlayers 5,我遇到了一个问题,即删除后几何图形在地图上仍然存在 - 似乎地图没有正确更新。有没有办法强制更新/刷新地图及其功能?在文档中找不到与此相关的任何内容。
尝试使用map.render()
,但这似乎也不起作用。
调用.getFeatures()
我的 VectorSource 对象显示几何/对象不在功能列表中,但它仍然出现在我页面的地图上。