这是我的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]
});
});
答案 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
});