我正在尝试开发用于在 web 上覆盖图层的框架。为此，我使用 geoserver 发布图层，并使用 geoext tree.js 示例在树状面板中显示所有图层。但是我遇到了放大和缩小的问题。当我使用 Geoext tree.js 示例时，我尝试使用此示例覆盖的图层，该图层正在放大和缩小最大范围。在下图中，它被清除。
var mapPanel, tree;
Ext.application({
name: 'Tree',
launch: function() {
mapPanel = Ext.create('GeoExt.panel.Map', {
border: true,
region: "center",
map: {allOverlays: false},
center: [74.60,16.84],
zoom: 15,
layers: [
new OpenLayers.Layer.WMS("Wi-Fi",
"http://localhost:8082/geoserver/NewProject/wms", {
layers: "wi-fi antena",
transparent: true,
format: "image/png"
}, {
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Water Cooler",
"http://localhost:8082/geoserver/NewProject/wms", {
layers: "water cooler",
transparent: true,
format: "image/png"
}, {
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Solar Pole",
"http://localhost:8082/geoserver/NewProject/wms", {
layers: "solar pole",
transparent: true,
format: "image/png"
}, {
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Roads",
"http://localhost:8082/geoserver/NewProject/wms", {
layers: "road",
transparent: true,
format: "image/png"
}, {
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Optical Fiber Line",
"http://localhost:8082/geoserver/NewProject/wms",
{
layers: 'optical fiber line',
format: 'image/png',
transparent: true
},
{
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Dustbin",
"http://localhost:8082/geoserver/NewProject/wms", {
layers: "dustbin",
transparent: true,
format: "image/png"
}, {
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Drainage Line",
"http://localhost:8082/geoserver/NewProject/wms",
{
layers: 'drainage line',
format: 'image/png',
transparent: true
},
{
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Contour",
"http://localhost:8082/geoserver/NewProject/wms",
{
layers: 'contour',
format: 'image/png',
transparent: true
},
{
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("Building",
"http://localhost:8082/geoserver/NewProject/wms",
{
layers: 'building',
format: 'image/png',
transparent: true
},
{
singleTile: true,
visibility: false
}
),
new OpenLayers.Layer.WMS("College",
"http://localhost:8082/geoserver/NewProject/wms", {
layers: "areaofcollege",
format: "image/png8"
}, {
buffer: 0,
singleTile: true,
visibility: false
}
),
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'GeoExt.data.LayerTreeModel',
root: {
expanded: true,
children: [
{
plugins: [{
ptype: 'gx_layercontainer',
store: mapPanel.layers
}],
expanded: true
},
]
}
});
// create the tree with the configuration from above
tree = Ext.create('GeoExt.tree.Panel', {
border: true,
region: "west",
title: "Layers",
width:200,
split: true,
collapsible: true,
collapseMode: "mini",
autoScroll: true,
store: store,
rootVisible: false,
lines: false,
});
Ext.create('Ext.Viewport', {
layout: "fit",
hideBorders: true,
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, tree, {
contentEl: "search",
region: "east",
bodyStyle: {"padding": "5px"},
collapsible: true,
collapseMode: "mini",
split: true,
width: 200,
title: "Search"
}]
}
});
}
});
<!DOCTYPE html>
<html>
<head>
<title>WCE Campus</title>
<!-- ExtJS -->
<script type="text/javascript" src="include-ext.js"></script>
<!-- Basic example styling -->
<link rel="stylesheet" type="text/css" href="examples.css" />
<link rel="stylesheet" type="text/css" href="Libs/geoext2-2.1.0/resources/css">
<!-- You should definitely consider using a custom single-file version of OpenLayers -->
<script src="Libs/OpenLayers-2.13.1/OpenLayers.js"></script>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<div id="search">
</div>
</body>
</html>