Sencha Architect的OpenLayers4

Question

如何在sencha架构师中添加和使用openlayers4地图？我想在容器中添加openlayers地图但我不知道如何在sencha架构师中这样做，所以任何建议都会很棒！

提前致谢， Joud

Answer 1

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

开始

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

1. 包含OpenLayers
2. 地图容器
3. JavaScript创建一个简单的地图

包含：

• 点击加号按钮，选择资源，添加JS资源

• 选择JS资源，设置网址，自己的ID，将远程设置为true



• 对CSS资源执行相同的步骤

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

映射容器：

添加面板或容器，选择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。我们需要使用一些被触发的事件 - ＆gt;触发我们的函数，我们可以编写自己的JS。

我选择了渲染事件。单击面板，在配置窗口中找到基本事件绑定，选择渲染，添加它。并将示例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）。 - 我正在使用现代包，并且没有“渲染”事件，因此我使用了“绘制”事件。