Flutter 和 Openlayers - 包括 Flutter 中的 js 库

Posted 2023-02-23

【中文标题】Flutter 和 Openlayers - 包括 Flutter 中的 js 库

【英文标题】：Flutter and Openlayers - including js libraries in flutter

【发布时间】：2018-11-27 12:05:00

【问题描述】：

来自基于 js/cordova 的跨平台领域，我最近正在研究 Flutter。所以我想知道直接在flutter中使用各种js库的选项。更具体地说，我有兴趣在 Flutter 中使用 openlayers 库来创建具有各种绘图和编辑功能的多功能地图视图。所以我想知道有哪些选项可以包含它。

到目前为止，我看到了两种主要方式：

使用网络视图： 尽管 Flutter 中还没有原生的 webview 小部件，但有一个插件可以解决这个问题 (https://github.com/dart-flitter/flutter_webview_plugin)。我在这里看到的主要优势是“按原样”使用 openlayers 库，但是该插件处于早期状态，我还看不到在 webview 中建立 Flutter 和 js 函数之间通信的方法。此外（这只是我的假设）使用 webview 可能比使用 dart 代码创建适当的小部件要慢。

创建自定义小部件： 我已经看到有一些方法可以将 js 代码直接转换为 dart，使用包 js (https://pub.dartlang.org/packages/js) 和键入 js_facade_gen (https://github.com/dart-lang/js_facade_gen)，就像使用 chartjs 库 (https://github.com/google/chartjs.dart/) 一样。与此类似，应该可以自动将 openlayers lib 转换为 dart。然而，主要问题是将其集成到颤振中，因为如果我是正确的，openlayers 正在使用 html5 画布。此外，chartjs.dart 包也没有提供任何提示如何将其包含在颤振应用程序中。我还看到有一个传单插件（https://github.com/apptreesoftware/flutter_map）正在创建自己的小部件，但是他们似乎手动重写了代码（？），这适用于具有 20.000 行代码的公开用户，而不是真正的选项 atm。

我知道这不是本网站的最佳问题格式，但我希望有人对从哪里开始或如何实施此问题提供一些建议或提示，尤其是对于第二个选项 - 第一个更直接向前。或者如果你能想到第三种选择，请继续，我很感激任何线索。

【问题讨论】：

看看这个包。 github.com/apptreesoftware/flutter_map这是dart的传单端口，所以你可以向repo所有者询问任何提示

@Tree 谢谢，是的，我看过这个 repo。还在看代码

【参考方案1】：

在 Flutter 中使用 JS 的唯一方法是使用 WebView。

Dart 仅针对浏览器应用程序编译为 JS，对于 Flutter，它编译为本机机器码。

使用包js将js代码直接转换为dart

package JS 不会转换 JS，它只是为 JS 函数创建代理，以便能够从 Dart 调用它们，但这也仅在 Dart Web 应用程序中受支持。

【讨论】：

谢谢，所以尝试这个会遇到编译错误？无路可走？这就解释了为什么 apptreesoftware 的人会完全重写它。

是的，你会得到编译错误，除了用 Dart 重写之外别无他法。

如何在 dart 文件中导入 jindex.js 文件并加载到 webview 中