OpenLayers和Vaadin14

Question

有没有人集成了最新的OpenLayers和java框架Vaadin14？应该使用Npm，我和Webpack已经尝试了一些在Vaadin的文档(https://vaadin.com/docs/v14/flow/web-components/integrating-a-web-component.html)中描述的方法。因此，OpenLayers看不到目标容器(根据其目标属性)。

如果有任何建议，我将不胜感激。

问候你，谢尔盖

Answer 1

免责声明：下面的示例有一些控件的问题:它们没有正确呈现。如果我将找到解决方案，我将更新答案，但希望您已经从中受益了一点:)

更新:通过添加此处所述的缺失样式，部分解决了问题Problems using ol3 inside Shadow DOM

1. 创建一个模板，在其中定义地图，并在命令行中运行
2. NPM openlayers
3. Create a Java对应类，您可以从server-side
4. Add类到layout npm install ol

使用该模板

openlayers-template.js文件

import {PolymerElement,html} from '@polymer/polymer/polymer-element.js';
import {Map, View} from 'ol';
import {default as TileLayer} from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj.js';

/**
 * `openlayers-template`
 *
 * OpenlayersTemplate element.
 *
 * @customElement
 * @polymer
 */
class OpenlayersTemplate extends PolymerElement {

    static get template() {
        return html`
     //Essential for controls buttons
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/css/ol.css">
            <div>
                <div style="height: 250px;width: 750px;" id="map"></div>
            </div>`;
    }
    ready() {
        super.ready();
        const map = new Map({
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: fromLonLat([28.9744, 41.0128]),
                zoom: 0
            })
        });
        map.setTarget(this.shadowRoot.getElementById("map"))
    }
    static get is() {
        return 'openlayers-template';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(OpenlayersTemplate.is, OpenlayersTemplate);

和一个对应的Java类：

@Tag("openlayers-template")
@JsModule("./src/openlayers-template.js")
public class OpenlayersTemplate extends PolymerTemplate<OpenlayersTemplate.OpenlayersTemplateModel> {

    /**
     * Creates a new OpenlayersTemplate.
     */
    public OpenlayersTemplate() {
        // You can initialise any data required for the connected UI components here.
        setId("openlayers");
    }

    /**
     * This model binds properties between OpenlayersTemplate and openlayers-template
     */
    public interface OpenlayersTemplateModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

输出：

​