GeoExt的使用

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>

 效果图：

评论

1 楼 ka520888 2015-07-26  

帅哥，这个地图是直接使用网上的GOOGLE地图资源么？
另外，这个地图支持那些浏览器，支持IE不。