未使用geoext 3从geoserver图层WMS获取数据的要素格网

Question

这是包含在grid.html中的grid.js文件。我不知道我的代码出了什么问题。我已经看到了一些示例，并尝试对我的geoserver图层执行相同的操作，但没有输出。我的变量存储后的代码不工作。我想将我的文件加载到web上，并使用geoext 3.0.0在要素网格中显示其数据。请帮帮忙。

  Ext.require([
        'Ext.container.Container',
        'Ext.panel.Panel',
        'Ext.grid.GridPanel',
        'GeoExt.component.Map',
        'GeoExt.data.store.Features'
    ]);

    Ext.onReady(function () {

        var wmsLayer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                url: 'http://localhost:8080/geoserver/opengeo/wms',
                params: {'LAYERS': 'opengeo:abc'},              
                serverType: 'geoserver'

            })
        });

        var baseLayer = new ol.layer.Tile({
                        source: new ol.source.TileWMS({
                            url: 'http://ows.terrestris.de/osm-gray/service',
                            params: {'LAYERS': 'OSM-WMS', 'TILED': true}
                        })
                    });

        var view = new ol.View({
            center:  ol.proj.fromLonLat([75, 36]),
            zoom: 8
        });

        var map = new ol.Map({
            layers: [ baseLayer, wmsLayer ],
            target: 'map',
            view: view
        });



        var store = Ext.create("GeoExt.data.store", {
                url: 'http://localhost:8080/geoserver/wms',
                params: {'LAYERS': 'opengeo:abc'},  
                autoLoad: true
        });

        grid1 = Ext.create('Ext.grid.Panel', {
                title: 'Main Cities',
                border: true,
                region: 'east',
                store: store,
                columns: [

                    {text: 'CityName', dataIndex: 'Name'}
                ],
                width: 300

            });

            var mapComponent = Ext.create('GeoExt.component.Map', {
                map: olMap
            });
            var mapPanel = Ext.create('Ext.panel.Panel', {
                region: 'center',
                height: 400,
                layout: 'fit',
                items: [mapComponent]
            });

            var description = Ext.create('Ext.panel.Panel', {
                contentEl: 'description',
                region: 'south',
                title: 'Description',
                height: 180,
                border: false,
                bodyPadding: 5,
                autoScroll: true
            });

            Ext.create('Ext.Viewport', {
                layout: 'border',
                items: [mapPanel, grid1, description]
            });




    });

Answer 1

在第一行中，您可以require GeoExt.data.store.Features，但稍后会尝试实例化GeoExt.data.store包。试试这个：

var store = Ext.create("GeoExt.data.store.Features", {
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': 'opengeo:abc'},  
  autoLoad: true
});

此外，您还可以尝试将一个变量olMap传递给GeoExt映射组件。你在上面的几行代码中命名为map。尝试：

var mapComponent = Ext.create('GeoExt.component.Map', {
  map: map
});