支持更多客户端功能的OpenLayers替代产品


14

我正在考虑系统的不同体系结构,这些体系结构理想地将客户端渲染用于点要素,并且必须是无插件的。我一直在使用针对此问题而开发的应用程序来测试我的笔记本电脑(功能相当强大-四核2.6 ghz cpu,4 gb内存,没有任何其他负载,Firefox 8)在OpenLayers和它明显落后于500,开始挣扎超过1000。随机生成的功能似乎没有任何事件处理程序,并且都使用相同的符号系统。

我预计将在功能不强的平台上显示多达1,000个功能,最多包含10个不同的符号,全部带有单击和鼠标悬停处理程序。

我一直希望获得更好的客户端性能,尤其是在看到此GIS Cloud示例之后 -我知道它的工作方式有所不同(HTML5 canvas与SVG),但是性能上的差异确实惊人。

我的关键问题(如果您愿意的话)是:

  1. 生成随机点的应用程序代表您编写/使用的其他OpenLayers应用程序中的性能吗?
  2. 是否有一个经过验证且免费的替代Web映射API,该API支持WMS服务(我需要使用),并且具有客户端功能,而无需使用Flash / Silverlight /任何其他插件,速度更快?
  3. 关于我应该调查的内容还有其他建议吗?

主要依靠服务器端呈现是一种选择,但是由于担心扩展用户数量和UI的响应性,我和客户端都希望避免这种情况。


在我5岁的双核,3gb RAM桌面上,在Firefox 8上使用该应用程序(同时下载了1gb Linux发行版ISO),可以立即获得1000点积分,而不会费劲……10,000需要1.5秒。
user2856 2012年

@LukePinner是快速绘制*并平滑地平移/缩放吗?检索数据和绘制特征对我而言也很好,但是问题是地图交互。
tomfumb 2012年

我刚刚在ipad2上尝试了您的应用程序,它处理了1000分。有了10K点,最初需要花费几秒钟的时间来渲染,但是随后它可以很好地应对。如果需要,可以始终对OL Vector图层类进行子类化并实现自定义类。我可以举一个例子。
unicoletti 2012年

是的,平移/缩放没有问题。1K点的确确实在我的1.6ghz Atom上网本上放慢了很多:)
user2856 2012年

Answers:


23

第一个问题的答案。您正在使用具有非常普通配置的OL。您可以使用一些技巧来提高性能,我将在后面介绍。

问题2的答案可能是(特别是在牢度方面)。您可以在该站点上搜索替代列表(现在想到的是Leaflet)。

问题3的答案:首先进行测量:

我编辑了该应用程序的本地副本,以便在Vector图层的选项列表中显式指定渲染器。在测试过程中,我将省略Canvas渲染器,然后将页面实验重新加载到另一页面:

var pts = new OpenLayers.Layer.Vector("Points", {renderers: ["Canvas", "SVG", "VML"]});

我在重绘函数中添加了一个计时器,以便打印出花费了多少绘图时间:

function redraw() {
var start = (new Date).getTime();
[...]
var diff = (new Date).getTime() - start;
console.log("redraw completed in "+diff+"ms");

之后,我尝试在OSX SL上的Chrome 17和Firefox 8.0.1上运行几次,并绘制了1000和5000个功能。令我惊讶的是,SVG渲染器平均比Canvas渲染器快20%!(注意:在Windows js上,时间不如在OSX中精确,因此结果可能不太一致)。

这个和你所说的

问题是地图互动

,恕我直言,告诉我们热点是在特征的Vector处理中。在开发我的应用程序时,我最近对其进行了研究,并决定对其进行子类化,然后将其删除所有对简单点没有用的复杂代码。诚然,我变得非常疯狂,甚至删除了对OpenLayers.Geometry.Point的依赖,我的版本现在可以在具有x,y属性的简单js对象上使用。

您的选择按收益/成本的先后顺序排列:

第一种选择是通过在向量层上配置策略选项来过滤服务器端的可见点,如下所示:

 strategies: [new OpenLayers.Strategy.Refresh({force:true}), new OpenLayers.Strategy.BBOX({ratio:2, resFactor: 3})],

这样,当您放大绘制在客户端的功能部件的数量时,将仅限于在那个范围内可见的功能部件,而不是全部。

第二种选择是,您可以考虑编写自定义的Vector / Renderer。自定义,剥离下来的一个例子,更快的实现可我github上页这里。虽然不适合所有用途,但应该足以使我大致了解所建议的内容。

当用户完全缩小时,第三种选择是实现某种功能的服务器端群集,以便将闭合点合并为一个,从而再次减少绘制的功能。


非常感谢您的详尽而彻底的回应。我很可能将研究服务器端群集,希望将其与缓存策略结合使用,以便仅在必要时进行操作。服务器端的一种选择是MapGuide,因此检索和聚类点的方法可以完全定制。我还将尝试使用渲染器选项,以了解它的不同之处。
tomfumb 2012年

1
我添加了指向我的项目中使用的示例矢量/画布渲染器的链接。
unicoletti 2012年

哇,精简的示例产生了巨大的变化,这确实令人印象深刻。我从挣扎着1000个功能的挣扎中挣脱了
挣到

我修改了第一个示例(swingley.appspot.com),以使用OL Canvas渲染器和实心填充点,并且缩放和平移性能实际上与TagCanvas和TagVector非常相似。我还重新实现了您在修改中删除的点击测试功能,因此我可以测试比较性能-Tag *方法在识别哪个功能被点击时(大约5000个)快了大约20%。鉴于编写/更新自定义类的大量工作以及类似的性能(在我的测试中),我想我会看到香草OL可以做什么
tomfumb 2012年

这是因为点击测试会将所有功能重新绘制到另一个画布中,因此每次刷新它们都会绘制两次
unicoletti 2012年

0

使用UTFGridTileMill,您可以显示无限的点,并且具有相当好的性能。但是,显示n个随机点是一个人为的示例,在那种情况下或与GISCloud或任何类似的魔术都无法使用-因为矢量性能破解通常需要了解完整的数据集和一些预处理:TileMill和GISCloud都可以很多瓷砖。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.