Sencha Architect 中的 OpenLayers4答案

【问题标题】：OpenLayers4 in Sencha ArchitectSencha Architect 中的 OpenLayers4
【发布时间】：2017-11-20 10:11:54
【问题描述】：

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

提前致谢

【问题讨论】：

标签： extjs openlayers sencha-architect

【解决方案1】：

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

我们需要按照指南做三件事：

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

包括：

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

对 CSS 资源执行相同的步骤

您应该看到这两个资源都是远程加载的，并且您应该在 SA 中看到它们。或者你可以下载 JS 文件。将它们放入项目文件夹的资源文件夹中，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。我们将需要使用一些事件，它被触发 -> 触发我们的函数，我们可以在其中编写自己的 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
                })
              });
    }

});

保存并预览您的项目：

【讨论】：

【解决方案2】：

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

【讨论】：