OpenLayers 和 Vaadin 14答案

【问题标题】：OpenLayers and Vaadin 14OpenLayers 和 Vaadin 14
【发布时间】：2019-12-09 14:21:21
【问题描述】：

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

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

问候，谢尔盖

【问题讨论】：

请添加您尝试过的内容以及遇到的错误，以便我们改进。
只有空标签

标签： vaadin openlayers vaadin-flow

【解决方案1】：

免责声明 ：下面的示例在控件方面存在一些问题：它们未正确呈现。如果我能找到解决方案，我会更新答案，但希望你能从中受益一点:)

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

创建定义地图的模板
在命令行中运行npm install olNPM openlayers
创建一个 Java 对应类，您可以在服务器端使用它
向布局添加类

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.
    }
}

输出：

【讨论】：

它有效，非常感谢！关于渲染 - 我们尝试修复它，如果成功，我们将其发布在这里
我发现应该加一个`cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/…">`-->这样看起来更好:)
是的，通过href应用的样式，但是还有一个问题：如何应用（导入）本地的ol.css（已经存在于项目目录的./node_modules/ol）。我们是 Polymer 的新手，因此我们将不胜感激）