Sencha Architect 中的 OpenLayers4

Question

如何在 sencha architect 中添加和使用 openlayers4 地图？我想在容器中添加 openlayers 地图，但我不知道如何在 sencha architect 中执行此操作，所以任何建议都很好！

提前致谢

Answer 1

从OL指南开始https://openlayers.org/en/latest/doc/quickstart.html

我们需要根据指南做三件事：

包括 OpenLayers
地图容器
JavaScript 创建一个简单的地图

包括：

点击加号按钮，select资源，添加JS资源
Select JS资源，设置URL，自己的ID，设置remote为true

对 CSS 资源执行相同的步骤

您应该会看到这两个资源已远程加载，并且您应该会在 SA 中看到它们。或者您可以下载 JS 文件。将它们放入项目文件夹中的资源文件夹中，url 看起来像 resources/myOLm.js 并且 CSS.

也是如此

地图容器：

添加面板或容器，select html 配置并在其中添加带有 id 的自定义 div。

你应该看到这个：

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mypanel',

    requires: [
        'MyApp.view.MyPanelViewModel'
    ],

    viewModel: {
        type: 'mypanel'
    },
    height: 559,
    html: ' <div id="map" stlye="width:100%; height:400px"></div>',
    width: 728,
    title: 'My Panel'

});

创建地图的JS：

现在我们需要执行地图的JS。我们将需要使用一些事件，它被触发 -> 触发我们可以编写自己的 JS 的函数。

我选择了渲染事件。点击面板，在config中window找到basic event binding，select render，添加即可。并将示例 JS 代码放入函数中。

您的代码应如下所示：

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mypanel',

    requires: [
        'MyApp.view.MyPanelViewModel'
    ],

    viewModel: {
        type: 'mypanel'
    },
    height: 559,
    html: ' <div id="map" stlye="width:100%; height:400px"></div>',
    width: 728,
    title: 'My Panel',
    defaultListenerScope: true,

    listeners: {
        render: 'onPanelRender'
    },

    onPanelRender: function(component, eOpts) {
        var map = new ol.Map({
                target: 'map',
                layers: [
                  new ol.layer.Tile({
                    source: new ol.source.OSM()
                  })
                ],
                view: new ol.View({
                  center: ol.proj.fromLonLat([37.41, 8.82]),
                  zoom: 4
                })
              });
    }

});

保存并预览您的项目：

Answer 2

我上周在 Architect 中使用了 OpenLayers4，实际上我做的和你做的一样 @pagep 除了： - 我直接将地图显示到一个组件中并且没有 div（我给组件提供了 id=map）。 - 我使用的是现代包，没有 "render" 事件，所以我使用了 "painted" 事件。

Sencha Architect 中的 OpenLayers4

OpenLayers4 in Sencha Architect

extjs

openlayers

sencha-architect