Sencha Architect中的OpenLayers4

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

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

1. 包括OpenLayers
2. 地图容器
3. JavaScript创建简单地图

包括:

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

• 选择JS资源,设置URL,你自己的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。我们需要使用一些事件,该事件被激发->启动我们的函数,在那里我们可以编写自己的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
                })
              });
    }

});

保存并预览项目:

上周我在Architect中使用了OpenLayers4,实际上我和您在pagep中所做的完全一样,只是: -我将地图直接显示到一个组件中;没有div(我给了组件id=map)。 -我使用的是现代软件包,没有“渲染”事件,所以我使用了“绘制”事件。