Flash 与 JavaScript 的交互式地图
我正在开发一个网络应用程序，该应用程序应该能够实时显示世界任何地方的陆地交通情况。几个月来，我一直使用 JavaScript 和 OpenLayers (http://www.openlayers.org) 框架来开发它。
不幸的是，这个解决方案似乎效率低下。地图上有数百（200-300）个对象，每几分钟更新一次。刷新和渲染它们的纯粹操作需要大量时间，这使得 应用程序不太可用（对用户操作的响应速度慢）。
目前我正在考虑改变技术。 Adobe Flex 似乎是最合理的解决方案。其中至少有一个应用程序与我的应用程序执行类似的操作（http://casper.frontier.nl/）。
然而，我对 Flex 有一些担忧：
- 它是否可以轻松地与 Flex 集成？ 基于 HTML/CSS/JavaScript 的部分 应用程序（例如， 图形界面应该是 在风格和风格上保持一致 颜色）？
- 我的印象是 使用最新的浏览器（主要是 Chrome 9.0) JavaScript 和 CSS 变得更加高效。有什么机会 几个月内 JavaScript+CSS 将使实施成为可能 高效、快闪式的富互联网 应用？ （这里需要注意一下： 著名的 Canvas 标签不是解决方案 对于我的问题，至少现在不是。 使用画布在地图上渲染对象 事实证明效率低于 传统的 SVG 因为大小 画布真的很大——一个整体 浏览器窗口）
- 有什么机会 Flash技术将是 已放弃（Apple 政策、HTML5 不断增长的支持等） 不太近的未来（一些 年）？
- 我的客户可能希望在移动设备（包括 iPhone）上查看此应用程序。
- 基于网络的交互式地图还有其他解决方案吗？
有人可以解决这些问题吗？
I am developing a web application that is supposed to display land traffic in real time in any part of the world. For a couple months I've been developing it using JavaScript and OpenLayers (http://www.openlayers.org) framework.
Unfortunately, this solution appears to be inefficient. There are hundreds (200-300) of objects on the map that are updated every couple minutes. The sheer operation of refreshing and rendering them takes significant amount of time that makes the
application less usable (slow responsivity to user actions).
At the moment I am considering changing the technology. Adobe Flex seems to be the most reasonable solution. There is at least one application written in it that does similar things to mine (http://casper.frontier.nl/).
However, I have a couple of concerns regarding Flex:
- can it be easily integrated with the
HTML/CSS/JavaScript based part of the
application (for example, the
graphical interface should be
coherent when it comes to styles and
colors)? - I get an impression that
with latest browsers (mainly Chrome
9.0) JavaScript and CSS becoming more efficient. What are the chances that
in a couple of months JavaScript+CSS
will make it possible to implement
efficient, flash-like rich internet
application? (A note is needed here:
famous Canvas tag is not a solution
for my problem, at least not for now.
Rendering objects on map with canvas
proved to be less efficient than with
traditional SVG because the size of
the canvas is really big - a whole
browser window) - What are the chances
that Flash technology will be
abandoned (Apple policy, HTML5
growing support etc.) in
not-so-near-future (a couple of
years)? - There is a possibility that my client would like to view this application on mobile devices, including iPhone.
- Any other solution for web-based interactive maps?
Can anybody address these issues?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
不知道您可以在 js 中管理和更新多少对象，但在我的公司 (flashmaps.com)，我们构建了基于 flash 的地图，可处理数千个对象。事实上，在许多情况下，关键问题是地图与标记完全重叠。在这些情况下，我们通常建议过滤标记。我们在构建基于 flash/flex 的地图方面拥有丰富的经验，因此如有任何问题，请随时向我询问。
顺便说一句，我认为 Flash 不会很快就不再使用。苹果控制 iPhone/iPad 应用程序的策略（禁止 Flash 的真正原因）给网络开发人员带来了很多麻烦，他们需要为这些设备创建特定版本的网站，这太疯狂了。但我确信苹果有一天会允许 Flash ......可能是当许多其他支持 Flash 的平板电脑上市时。我们拭目以待。
No idea how many objects you can manage and update in js, but in my company (flashmaps.com) we have built flash-based maps handling many thousands of objects. The key issue in many cases in fact is that the map is completely overlapped by the markers. We use to recommend filtering the markers in those cases. We have a huge experience in building flash/flex-based maps, so on't hesitate to ask me any question on that.
By the way, I don't think Flash will get out of use soon. Apple's strategy on controlling iPhone/iPad apps (the real reason behind Flash banning) is causing a lot of trouble to web developers, that need to create specific versions of their websites for these devices, it's crazy. But I'm sure Apple will permit Flash, someday... Probably when many other tablets hit the streets supporting Flash. We'll see.
MVC 架构的奇妙之处在于，只要将领域逻辑与业务逻辑和 UI 分开，那么创建访问相同数据的特定于平台的应用程序就相对容易。例如，您可以构建相同的 UI 以在网络浏览器（通过 html/javascript 或 flash 播放器）、桌面（通过 Air）和 iPhone/iPad（通过 iOS）上运行，所有这些都连接到同一服务器- 端脚本。选择哪个平台完全取决于个人选择。如果将来某个平台碰巧过时了，那么您只需在另一个平台上创建一个新的 UI 即可。
The awesome thing about MVC architecture is as long as you keep your domain logic separate from your business logic and UI, then it's relatively easy to create platform specific apps that access the same data. For example, you could build the same UI to run in the web browser (via html/javascript or flash player), on the desktop (via Air), and on an iPhone/iPad (via iOS) that all connect to the same server-side scripts. It's all a matter of personal choice which platform you choose. If a platform happens to fall out of fashion in the future, then you simply create a new UI on another platform.
懒惰评论转发：
我使用了 Google Maps JavaScript API + 自定义画布图块层（请参阅 此处 和此处）绘制带有 10k 多个标记的地图，非常快。也许您只需要重新考虑您的特定方法，而不是完全重写您的地图。
Lazy comment repost:
I've used Google Maps JavaScript API + a custom canvas tile layer (see here and here) to draw maps with 10k+ markers, really quickly. Perhaps you just need to rethink your particular approach rather than totally rewriting your maps.
在现代浏览器（例如 IE7 或更高版本）上运行的 JavaScript 应该能够轻松地每隔几分钟处理 200 或 300 个对象更新。当然，如果您想同时执行所有 300 个更新，速度可能会有点慢。但如果这些更新分散在该时期内发生，那么您应该不会遇到任何麻烦。
有用 JavaScript 编写的 Asteroids 游戏和 3D 射击游戏，非常耐玩。他们每秒进行数十次更新。
在我怀疑这个平台之前，我会怀疑你的框架（我对 OpenLayers 一无所知）或你进行更新的方式。
我对 Flash 的体验就没那么积极了。尽管它可以与 JavaScript 进行互操作，但有一些奇怪的边缘情况会让您陷入困境。我的经验是，除非你正在做的事情确实微不足道，否则几乎不可能不被这些边缘情况绊倒。当然，iPad 和 iPhone 上缺乏 Flash 支持将导致无法支持这些平台。
我认为 Flash 不太可能很快被抛弃，因为有太多客户仍然相信 Flash 是构建交互式 Web 应用程序的方式这一愚蠢的观念。尽管四年前这几乎肯定是正确的，但浏览器、计算机和 JavaScript 技术已经发展到我目前对 Flash 的唯一用途就是播放视频。未来几年，当 HTML5 视频变得更加流行时，这种使用将会消失。凭借 Google 的 WebM 视频格式和构建 WebM 的预期高质量工具，除了较旧的内容之外，Flash 作为电影播放器几乎变得无关紧要。
我的建议是仔细检查您当前的实现，研究一些其他频繁更新的 JavaScript 应用程序，并确定是否真的是平台而不是您使用它的方式导致了性能问题。
JavaScript running on a modern browser (say, IE7 or later) should easily be able to handle 200 or 300 object updates every few minutes. Granted, if you want to do all 300 updates at the same time, things might get a little slow. But if those updates occur spread out over that period, then you shouldn't have any trouble.
There are Asteroids games and 3D shooters written in JavaScript and that are very playable. They do dozens of updates per second.
I would suspect your framework (I know nothing about OpenLayers) or the way in which you're doing the updates before I suspected the platform.
My experience with Flash has been less that positive. Although it will interoperate with JavaScript, there are some strange edge cases that will trip you up. And my experience is that it's almost impossible not to trip over those edge cases unless what you're doing is truly trivial. And, of course, the lack of Flash support on the iPad and iPhone will make supporting those platforms impossible.
I think it's unlikely that Flash will be abandoned any time soon, as there are too many customers who continue to believe the silly notion that Flash is the way to build interactive Web apps. Although that was almost certainly true four years ago, browsers, computers, and JavaScript techniques have advanced to the point that the only use I currently have for Flash is to play video. And that use will go away in the next few years when HTML5 video becomes more prevalent. With Google's WebM video format and the expected high-quality tools to build WebM, Flash becomes almost irrelevant as a movie player, except for older content.
My advice would be to take a long hard look at your current implementation, study some other JavaScript applications that do frequent updates, and determine if it's really the platform rather than the way you're using it that is causing your performance problem.