Flutter和Openlayers-在Flutter中包括js库 [英] Flutter and Openlayers - including js libraries in flutter
问题描述
我来自基于js / cordova的跨平台领域，最近我正在研究扑扑。因此，我想知道直接在flutter中利用各种js库的选项。更具体地讲，我对在flutter中使用openlayers库来创建具有各种绘图和编辑功能的通用地图视图感兴趣。因此，我想知道有哪些选项可以包含它。
Coming from the js/cordova based cross-platform universe, I am digging into flutter lately. So I wonder about the options to make use of the various js libraries in flutter directly. More concrete I am interested in using the openlayers library in flutter to create a versatile map view with various functions for drawing and editing. So I wonder what options are there to include it.
到目前为止，我看到了两种主要方式：
So far I see two major ways:
-
使用Webview：
即使还没有原生的Webview小部件，也有一个用于此的插件（ https://github.com/dart-flitter/flutter_webview_plugin ）。我在这里看到的主要优点是按原样使用openlayers库，但是该插件处于早期状态，我还没有看到在Webview中的flutter和js函数之间建立通信的方法。此外（仅是我的假设），使用Webview可能比使用Dart代码创建适当的小部件要慢。
Using a webview: Even though there is no native webview widget yet in flutter there is a plugin for this (https://github.com/dart-flitter/flutter_webview_plugin). The main advantage I see here is to use the openlayers library "as it is", however the plugin is in kinda early state and I could not see a way to establish communication between flutter and js functions in the webview yet. Futhermore (this is just my assumption) using the webview is probably slower than creating a proper widget with dart code.
创建自定义小部件：
我已经看到了使用js包直接将js代码转换为dart的方法（ https：//pub.dartlang .org / packages / js ）和键入js_facade_gen（ https://github.com/dart -lang / js_facade_gen ），就像使用chartjs库（ https://github.com/a）一样。 com / google / chartjs.dart / ）。如此类似，应该可以将openlayers lib自动转换为dart。但是，主要问题是将其集成到flutter中，因为如果我正确的话，openlayers正在使用html5 canvas。同样，chartjs.dart程序包也没有任何提示如何将其包含在flutter应用程序中。我还看到有一个传单插件（ https://github.com/apptreesoftware/flutter_map ）这是在创建自己的窗口小部件，但是他们似乎是手动重写代码（？），这是针对具有20.000行代码的公开发布者，实际上不是atm选项。
Creating a custom widget: I have seen there are ways to convert js code direcly to dart, using package js (https://pub.dartlang.org/packages/js) and for typings js_facade_gen (https://github.com/dart-lang/js_facade_gen) like it is done with the chartjs library (https://github.com/google/chartjs.dart/). So similar to this it should be possible to automatically convert the openlayers lib to dart. The main issue however is to integrate this into flutter, since openlayers is using a html5 canvas if I'm correct. Also the chartjs.dart package does not giva any hints how to include it in a flutter app. I've also seen there is a leaflet plugin (https://github.com/apptreesoftware/flutter_map) which is creating their own widget, however they seem to rewrite the code by hand (?), which is for openlyers with 20.000 lines of code not really an option atm.
我知道这不是该网站的最佳问题格式，但是我希望有人能提供一些建议或提示从何处开始或如何执行此操作，尤其是对于第二个选项-第一个更直接。或者，如果您可以想到第三种选择，请继续，我很感谢您提供任何线索。
I'm aware that this is not the best question format for this site, nonetheless I hope someone has some advice or hints on where to start or how to implement this, especially for the 2nd option - the first one is more straight forward. Or if you can think of a third option, go ahead please, I'm grateful for any clues.
推荐答案
唯一的方法在Flutter中使用JS的方法是使用WebView。
The only way to make use of JS in Flutter is using WebView.
Dart仅针对浏览器应用程序编译为JS，对于Flutter，它将编译为本机代码。
Dart compiles to JS only for browser applications, for Flutter it compiles to native machine code.
使用js包将js代码直接转换为dart
convert js code direcly to dart, using package js
package JS不会转换JS，它只是为JS函数创建代理以能够从Dart调用它们，但这也仅在Dart Web应用程序中受支持。
package JS doesn't convert JS, it just creates proxies for JS functions to be able to call them from Dart, but that is also only supported in Dart web applications.
这篇关于Flutter和Openlayers-在Flutter中包括js库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
