Карта во Flutter for Web - Отправка данных из JS во Flutter for Web - PullRequest
Новая
       24

Карта во Flutter for Web - Отправка данных из JS во Flutter for Web

0 голосов
/ 29 сентября 2019

КОНТЕКСТ

Я пытаюсь использовать OpenStreetMap (с OpenLayers) в Flutter Web, но все найденные мной плагины работают только для IOS или Android на данный момент.

ЧТО Я ДОСТИГНУЛ

Я нашел способ для отображения карты в Flutter Web с dart:html и IFrameElement. Вот мой код виджета в Dart: 

import 'dart:html' as html;
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class MapView extends StatefulWidget {
  MapView({Key key}) : super(key: key);

  @override
  _MapViewState createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  String createdViewId = 'hello-world-html';
  html.Element _iframe = html.IFrameElement()
    ..width = '400'
    ..height = '400'
    ..src = "http://localhost:80/dist"
    ..style.border = '1';

  @override
  void initState() {
    super.initState();
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry
        .registerViewFactory(createdViewId, (int viewId) => _iframe);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 400,
        child: HtmlElementView(
          viewType: createdViewId,
        ));
  }
}

Вот мой index.js файл, который я использую для построения карты 

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import Point from 'ol/geom/Point';
import { Tile, Vector as VectorLayer } from 'ol/layer';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import { Icon, Style } from 'ol/style';
import {fromLonLat} from 'ol/proj';

var lonLat = [4.89, 44.93];
var lonLatFR = [2.213749, 46.227638];

var iconFeature = new Feature({
    geometry: new Point(fromLonLat(lonLat)),
    name: 'Valence',
    population: 4000,
    rainfall: 500
});

var iconStyle = new Style({
    image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'icon.svg',
    })
});

iconFeature.setStyle(iconStyle);

var vectorSource = new VectorSource({
    features: [iconFeature]
});

var vectorLayer = new VectorLayer({
    source: vectorSource
});

var rasterLayer = new Tile({
    source: new OSM()
});

var map = new Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new View({
        center: fromLonLat(lonLatFR),
        zoom: 5
    })
});

var element = document.getElementById('popup');

var popup = new Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -50]
});
map.addOverlay(popup);

// display popup on click
jQuery.noConflict();
map.on('click', function (evt) {

    window.top.postMessage("SEND ME !!", "*");


    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function (feature) {
            return feature;
        });
    if (feature) {
        var coordinates = feature.getGeometry().getCoordinates();
        popup.setPosition(coordinates);
        jQuery(element).popover({
            placement: 'top',
            html: true,
            content: feature.get('name')
        });
        jQuery(element).popover('show');
    } else {
        jQuery(element).popover('destroy');
    }
});

// change mouse cursor when over marker
map.on('pointermove', function (e) {
    if (e.dragging) {
        jQuery(element).popover('destroy');
        return;
    }
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTarget().style.cursor = hit ? 'pointer' : '';
});

И, наконец, это мой index.html файлчто я запрашиваю у Дарт (http://localhost:80/dist) 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Icon Symbolizer</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .map {
            width: 400px;
            height: 400px;
            margin: auto
        }
    </style>
</head>

<body>
    <div id="map" class="map">
        <div id="popup"></div>
    </div>
    <script src="index.js"></script>
</body>

</html>

МОЙ ВОПРОС

Мало того, что это решение не очень красиво, но мне нужно отправить данные обратноот JS до Flutter. Действительно, идея в том, что у меня будет несколько маркеров на карте, и мне нужно знать, какие из них выбрал пользователь.

Я видел, что это возможно сделать с помощью плагина WebView Flutter (JavascriptMessage) но опять же, он работает только в IOS или Android. Поэтому я пытаюсь сделать это, отправив postMessage из Javascript, но я не нашел, где я должен слушать это сообщение во Флаттере.

...