要素网格不使用geoext 3从地理服务器层WMS获取数据

时间:2016-08-08 08:34:58

标签: openlayers-3 geoserver extjs6 geoext3

这是我的grid.js文件,它包含在grid.html中。我不知道我的代码有什么问题。我已经看过示例并尝试使用我的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]
            });




    });

1 个答案:

答案 0 :(得分:0)

在第一行中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
});