VC的IDE使用技巧大全

GeoExt是一款结合openlayers和Extjs的gis前端框架。目前支持openlayers2.10和Ext3.2.

下载地址:http://geoext.org/index.html

下面是用GeoExt改写的一个小的例子：

 

js代码：

 

/**
* Copyright (c) 2008-2010 The Open Source Geospatial Foundation
*
* Published under the BSD license.
* See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
* of the license.
*/

/** api: example[mappanel-div]
*  Map Panel
*  ---------
*  Render a map panel in any block level page element.
*/

var mapPanel,map;

Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var bounds = new OpenLayers.Bounds(113.235,23.04,113.416,23.12);

map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);

map.addLayer(layer);

map.addControl(new OpenLayers.Control.LayerSwitcher());

map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({
element : $('location')
}));
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.ScaleLine());

var simple = new Ext.FormPanel({
labelWidth: 60, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: '',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: '演示速度',
name: 'first',
width:50,
allowBlank:true
},{
fieldLabel: '轨迹速度',
width:50,
name: 'last'
}
],

buttons: [{
text: '确定',
handler:function(){win.hide();}
},{
text: '取消',
handler:function(){win.hide();}
}]
});
win = new Ext.Window({
layout:'fit',
width:200,
height:150,
title:'速度设置',
draggable:false,
resizable : false,
closeAction:'hide',
plain: true,
items: [simple]
});
mapPanel = new GeoExt.MapPanel({
title: "GeoExt MapPanel",
renderTo: "mappanel",
stateId: "mappanel",
height: 600,
width: 1000,
map: map,

center: new OpenLayers.LonLat(113.31898,23.08618),//two
zoom: 18,
//extent: bounds,//one
// getState and applyState are overloaded so panel size
// can be stored and restored
items:[{
xtype: 'button',
id: 'basic-button',
style :'position: absolute; z-index: 1000; right: 15px; top: 5px; left: auto;',
text: '设置',
handler:function (b){
win.x=b.el.dom.offsetParent.offsetWidth+b.el.dom.offsetParent.offsetLeft-230;
win.y=b.el.dom.offsetParent.offsetTop+30;
if(!win.isVisible()){
win.show();
}else{
win.hide();
}

}
}],

getState: function() {
var state = GeoExt.MapPanel.prototype.getState.apply(this);
state.width = this.getSize().width;
state.height = this.getSize().height;
return state;
},
applyState: function(state) {
GeoExt.MapPanel.prototype.applyState.apply(this, arguments);
this.width = state.width;
this.height = state.height;
}
});
});

// functions for resizing the map panel
function mapSizeUp() {
var size = mapPanel.getSize();
size.width += 40;
size.height += 40;
mapPanel.setSize(size);
map.setCenter(new OpenLayers.LonLat(113.31898,23.08618), 0);
}
function mapSizeDown() {
var size = mapPanel.getSize();
size.width -= 40;
size.height -= 40;
mapPanel.setSize(size);
}
var selectControl,vectors;
function mapAddLayer(){
var v_style =  new OpenLayers.StyleMap({
"default": {
strokeOpacity: 1,
strokeWidth: 1,
pointRadius: 6,
fillOpacity:1
},
"select": {
cursor: "pointer",
strokeColor: "blue",
fillColor: "blue"
}
});
vectors = new OpenLayers.Layer.Vector(
"layer1",
{
visibility : true,
styleMap: v_style
}
);
map.addLayer(vectors);
selectControl= new OpenLayers.Control.SelectFeature(
vectors, {clickout: true, toggle: false,
multiple: false, hover: false});
map.addControl(selectControl);
selectControl.activate();
var pointFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(113.31898,23.0861));//
var pFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(113.32898,23.0861));//
vectors.addFeatures([pointFeature,pFeature]);

// create popup on "featureselected"
vectors.events.on({
featureselected: function(e) {
createPopup(e.feature);
},
featureunselected :function(e){
popup.destroy();
popup = null;
}
});
}

var bogusMarkup = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";
function createPopup(feature) {
popup = new GeoExt.Popup({
title: 'My Popup',
location: feature,
width:200,
html: bogusMarkup,
maximizable: true,
unpinnable: false,
collapsible: true
});
// unselect feature when the popup
// is closed
popup.on({
close: function() {
selectControl.unselect(feature);
if(OpenLayers.Util.indexOf(vectors.selectedFeatures,
this.feature) > -1) {
popup = null;
}
}
});
popup.show();
}

 html页面代码：

 

<html>
<head>
<title>GeoExt MapPanel Example</title>

<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" />
<script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
<script type="text/javascript" src="../script/GeoExt.js"></script>

<script type="text/javascript" src="mappanel-div.js"></script>

</head>
<body>
<h1>GeoExt.MapPanel with an Existing OpenLayers.Map</h1>
<p>This example shows the how to create a MapPanel with a map that has
already been created.  See <a href="mappanel-window.html">mappanel-window.html</a>
for an example that creates the MapPanel without creating the map first.<p>
<p>This example makes use of a <code>CookieProvider</code>. The <code>MapPanel</code>
being a stateful component, if you reload the page the map should be
at the same location as previously. Also the <code>getState</code> and
<code>applyState</code> methods are overloaded so the size of the map
panel is also restored when refreshing the page.</p>
<p>The js is not minified so it is readable. See <a href="mappanel-div.js">mappanel-div.js</a>.</p>
<div id="mappanel"></div>
<input type="button" onclick="mapSizeUp()" value="bigger"></input>
<input type="button" onclick="mapSizeDown()" value="smaller"></input>
<input type="button" onclick="mapAddLayer()" value="addlayer"></input>
</body>
</html>

 效果图：