有没有一种方法可以在react-native-maps中强制单个瓦片请求WMSTile?

huangapple go评论48阅读模式
英文:

Is there a way to force single tile request for WMSTile in react-native-maps?

问题

WMSTile覆盖层始终加载所有平铺图像,而不是单个图像。没有加载单个图块的选项。

我必须实现的功能之一是地图上对象的热图。下面是我的GeoServer生成的图像:

通用样式:

有没有一种方法可以在react-native-maps中强制单个瓦片请求WMSTile?

带有单个图块的热图样式:

有没有一种方法可以在react-native-maps中强制单个瓦片请求WMSTile?

带有平铺选项的热图样式:(如图所示,图像变得扭曲并移动,因为GeoServer单独匹配不同图块的点)

有没有一种方法可以在react-native-maps中强制单个瓦片请求WMSTile?

因此,这通常是预期的平铺热图行为,GeoServer甚至注意到以下内容:“除非专门为其编写了以适应其的渲染变换,否则渲染变换在平铺模式下可能无法正常工作。”

所以我的问题是 - 是否有一种方法可以强制WMSTile组件以单个图块加载覆盖层,这实际上会正确显示热图 - 我不介意分叉react-native-maps并修复android/ios组件中的此问题,但我不知道从哪里开始

  • 我尝试操纵WMSTile组件本身在URL中替换的宽度和高度属性。
  • 我尝试操纵tileSize以获得比实际屏幕更大的图块。
  • 阅读WMSTile的API,以找到加载单个图块的方法。

以上尝试都没有得到我想要的结果。我期望得到的是一个WMSTile组件,它加载与GeoServer上的OpenLayers预览中的图块相匹配的单个图块覆盖层。

英文:

The WMSTile overlay always loads all tiled images, instead of one. There is no option to load a single tile.

One of the features I must implement is a heatmap of objects on the map. Bellow are the images of what images my GeoServer generates:

Generic style:

有没有一种方法可以在react-native-maps中强制单个瓦片请求WMSTile?

Heatmap style with single tile:

有没有一种方法可以在react-native-maps中强制单个瓦片请求WMSTile?

Heatmap style with tiled option selected: (as seen images get distorted and moved around because GeoServer matches points separately for different tiles)

有没有一种方法可以在react-native-maps中强制单个瓦片请求WMSTile?

So this is usually expected behaviour for tiled heatmaps and GeoServer even notes the following: "Rendering transformations may not work correctly in tiled mode, unless they have been specifically written to accommodate it."

So my question is - is there a way to somehow force the WMSTile component to load the overlay as a single tile, which would in fact display the heatmap correctly - i don't mind forking the react-native-maps and fixing this issue in android/ios components but I don't know where to start

  • I tried manipulating width and height properties that are actually replaced in the url by the WMSTile component it self.
  • I tried manipulating the tileSize in order to get tiles bigger than the actual screen.
  • Read API for WMSTile in order to find a way to load single tile.

None of the above attempts got me what I want. What I was expecting was a WMSTile component that loads a single tile overlay that matches the one on OpenLayers preview from GeoServer.

答案1

得分: 0

我已经将您提供的内容翻译成中文:

所以我通过将WMSTile组件替换为Overlay组件,并将图像URI设置为先前在WMSTile中使用的URL模板来解决了这个问题。现在,图像将被下载并显示为单个瓦片。

  • 先前由库自己填充的参数bbox现在需要进行计算 - 可以查看MatsMaker在此链接上的答案:如何在React Native地图中计算边界

  • 先前由库填充的参数widthheight现在需要手动插入 - 获取屏幕/窗口尺寸并插入它

  • Overlay的bounds属性与URI的bbox参数相同(重要:纬度和经度的顺序被颠倒了)

最终的Overlay URI看起来像这样:
http://geoserver-url/geoserver/workspace-name/wms?service=WMS&version=1.1.0&request=GetMap&layers=layer-name&styles=style-name&bbox=bbox&width=width&height=height&srs=EPSG:4326&format=image/png&transparent=true,其中bbox为minLng,minLat,maxLng,maxLat

匹配bbox的边界是***[[minLat,minLng],[maxLat,maxLng]]***。

英文:

So I solved this by replacing the WMSTile component with Overlay component and setting the image uri to the url previously used in the WMSTile as urlTemplate. The image is now downloaded and displayed as a single tile.

  • the parameter bbox that was previously filled by the library itself now needs to be calculated - check answer by MatsMaker on this link: How to calculate bounds in react native maps

  • the parameter width and height that were previously filled by the library now need to be inserted manually - get screen/window dimensions and insert it

  • the bounds property of the overlay is the same as bbox parameter of the uri (IMPORTANT: the order of lat and lng are reversed)

The overlay uri looks something like this at the end:
http://geoserver-url/geoserver/workspace-name/wms?service=WMS&version=1.1.0&request=GetMap&layers=layer-name&styles=style-name&bbox=bbox&width=width&height=height&srs=EPSG:4326&format=image/png&transparent=true with bbox being minLng,minLat,maxLng,maxLat.

and the bounds for matching bbox are [[minLat,minLng],[maxLat,maxLng]].

huangapple
  • 本文由 发表于 2023年5月10日 22:11:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/76219455.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定