[Commits] r1560 - in sandbox/cmoullet/ux/GoogleEarthPanel: examples ux/widgets
commits at geoext.org
commits at geoext.org
Sat Dec 5 08:18:24 CET 2009
Author: cmoullet
Date: 2009-12-05 08:18:24 +0100 (Sat, 05 Dec 2009)
New Revision: 1560
Modified:
sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelWmsExample.js
sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js
Log:
Manage Layers from GE independently of Map Layer.
Synchronize visibility
Modified: sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelWmsExample.js
===================================================================
--- sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelWmsExample.js 2009-12-05 02:00:57 UTC (rev 1559)
+++ sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelWmsExample.js 2009-12-05 07:18:24 UTC (rev 1560)
@@ -2,6 +2,8 @@
var GoogleEarthPanel;
+var treePanel;
+
var viewport;
var layer;
@@ -10,17 +12,23 @@
Ext.onReady(function() {
- layer = new OpenLayers.Layer.WMS(
- "GeoServer WMS",
+ var states = new OpenLayers.Layer.WMS(
+ "States",
"http://sigma.openplans.org/geoserver/wms?",
- {layers: 'topp:states'},
+ {layers: 'topp:states', transparent: 'true'},
+ {singleTile: true, isBaseLayer: false}
+ );
+
+ var bluemarble = new OpenLayers.Layer.WMS(
+ "Bluemarble",
+ "http://sigma.openplans.org/geoserver/wms?",
+ {layers: 'bluemarble'},
{singleTile: true}
);
-
var map = new OpenLayers.Map();
- var center = new OpenLayers.LonLat(-98.3,39.9);
+ var center = new OpenLayers.LonLat(-98.3, 39.9);
var mouse = new OpenLayers.Control.MousePosition();
@@ -40,7 +48,7 @@
handler: function() {
if (this.pressed) {
GoogleEarthPanel.add(googleEarthPanelItem);
- GoogleEarthPanel.setSize('50%', 0);
+ GoogleEarthPanel.setSize('40%', 0);
GoogleEarthPanel.setVisible(true);
GoogleEarthPanel.doLayout();
viewport.doLayout();
@@ -64,17 +72,33 @@
}
}
]});
+
+ var mapStore = new GeoExt.data.LayerStore({
+ map: map,
+ layers: [bluemarble, states]
+ });
var googleEarthPanelItem = {
xtype: 'gxux_googleearthpanel',
id: 'googleEarthPanelItem',
map: map,
+ layers: [states],
altitude: 50,
heading: 21.5,
tilt: 70,
range: 1485370
};
+ var treeItem = new Ext.tree.TreePanel({
+ root: new GeoExt.tree.LayerContainer({
+ text: 'Map Layers',
+ layerStore: mapStore,
+ leaf: false,
+ expanded: true
+ }),
+ enableDD: true
+ });
+
viewport = new Ext.Viewport({
layout: "border",
id: 'mainViewport',
@@ -82,19 +106,25 @@
{
region: "center",
id: "mappanel",
- title: "Google Map",
+ title: "2D Map",
xtype: "gx_mappanel",
map: map,
- layers: [layer],
+ layers: mapStore,
center: center,
zoom: 3,
split: true,
tbar: toolbar
},
{
+ region: "west",
+ id: "treepanel",
+ title: "Layer Tree",
+ width: 200
+ },
+ {
region: "east",
layout: 'fit',
- width: '50%',
+ width: '40%',
id: "googleearthpanel",
title: 'Google Earth Panel',
closeAction: 'hide',
@@ -106,14 +136,16 @@
id: "readme",
title: 'README',
margins: {left: 5,top: 5, bottom: 5, right: 5},
- html: '<p style="font-size:12pt;color:#15428B;font-weight:bold;margin:5">Google Earth Panel in action. Enjoy !</p>'
+ html: '<p style="font-size:12pt;color:#15428B;font-weight:bold;margin:5">Google Earth Panel with WMS overlay. Enjoy !</p>'
}
]
});
- mapPanel = Ext.getCmp("mappanel");
GoogleEarthPanel = Ext.getCmp("googleearthpanel");
GoogleEarthPanel.add(googleEarthPanelItem);
+ treePanel = Ext.getCmp("treepanel");
+ treePanel.add(treeItem);
+ treePanel.doLayout();
GoogleEarthPanel.doLayout();
viewport.doLayout();
Modified: sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js
===================================================================
--- sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js 2009-12-05 02:00:57 UTC (rev 1559)
+++ sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js 2009-12-05 07:18:24 UTC (rev 1560)
@@ -10,7 +10,7 @@
// TODO: permalink manage in this class
// TODO: add kml layer (see ticket)
-// TODO: improve hide / show and persistence of parameters
+// TODO: improve hide / show
GeoExt.ux.GoogleEarthPanel = Ext.extend(Ext.Panel, {
@@ -36,33 +36,46 @@
*
*/
showBordersLayer: false,
+
/** api: config[showTerrainLayer]
*
*/
showTerrainLayer: false,
+
/** api: config[showRoadsLayer]
*
*/
showRoadsLayer: false,
+
/** api: config[showBuildings]
*
*/
showBuildingsLayer: true,
+
/** api: config[showBuildingsLowResolution]
*
*/
showBuildingsLowResolutionLayer: false,
- // Show the 2D navigator in the map
+ /** api: config[navigationMode2D]
+ * This mode will show a 2D navigation that allows the user to manage the range and the heading of the Google Earth Instance.
+ * This requires a map.
+ */
navigationMode2D: true,
- // Move Google Earth when 2D map is moved
+ /** api: config[navigationModeFrom2D]
+ * This mode will synchronize the center of the 2D map with the lookAt point of the Google Earth Instance
+ * This requires a map.
+ */
navigationModeFrom2D: false,
- // Check that the targer and camera points are always in the map: not implemented
+ // TO IMPLEMENT
navigationMode3D: false,
- // Click in the map to set the camera point: not implemented
+ /** api: config[clickMode]
+ * This mode will allow the user to click in the 2D map. The clicked point is then the lookAt point of the Google Earth Instance
+ * This requires a map.
+ */
clickMode: true,
/** property[earthAvailable]
@@ -127,10 +140,24 @@
*/
kmlUrl: null,
+ /** api: config[layers]
+ * WMS Layers that are visible in Google Earth
+ * Required: a cartographic server that provide KML content
+ */
+ /** private: property[layers]
+ * Array of ``OpenLayers.Layer.WMS``
+ * Visibility is synchronized with map visibility
+ */
layers: null,
+ /** private: property[layerCache]
+ * Layer cache for Google Earth PlugIn
+ */
layerCache: {},
+ /** private: method[initComponent]
+ * Private initComponent override.
+ */
initComponent: function() {
var defConfig = {
border: true
@@ -140,7 +167,10 @@
GeoExt.ux.GoogleEarthPanel.superclass.initComponent.call(this);
},
- // Create Google Earth instance when panel is rendered
+ /** private: method[afterRender]
+ * Private afterRender override.
+ * Creates a Google Earth Instance if no available.
+ */
afterRender: function() {
if (this.ownerCt) {
var wh = this.ownerCt.getSize();
@@ -154,7 +184,17 @@
}
},
- // Set the lookAt position of the Google Earth Plug-in
+ /** method[setLookAt]
+ * Set the lookAt position.
+ * More documentation in http://code.google.com/apis/earth/documentation/reference/interface_g_e_view.html
+ * :param lat: ``Number`` The latitude of the lookAt position in EPSG:4326
+ * :param lon: ``Number`` The longitude of the lookAt position in EPSG:4326
+ * :param altitude: ``Number`` The altitude of the lookAt position
+ * :param altitudeMode: ``Number`` The altitudeMode to use
+ * :param heading: ``Number`` The heading of the lookAt position
+ * :param tilt: ``Number`` The tilt of the lookAt position
+ * :param range: ``Number`` The range of the lookAt position
+ */
setLookAt: function (lat, lon, altitude, altitudeMode, heading, tilt, range) {
if (this.ge) {
var lookAt = this.ge.createLookAt('');
@@ -169,14 +209,14 @@
}
},
- // Init Google Earth
+ /** method[initCallback]
+ * Callback for the creation of the Google Earth Instance
+ * More documentation in http://code.google.com/apis/earth/documentation/reference/google_earth_namespace.html
+ * :param object: ``Object`` The Google Earth Instance
+ */
initCallback: function(object) {
this.ge = object;
- if (this.map) {
- this.layers = this.map.layers;
- }
-
// Set Google Earth Properties
this.ge.getWindow().setVisibility(true);
@@ -209,8 +249,15 @@
});
}
- for (var i = 0; i < this.layers.length; i++) {
- this.addLayer(this.layers[i]);
+ if (this.layers) {
+ for (i = 0; i< this.layers.length; i++) {
+ var layer = this.layers[i];
+ this.addLayer(layer);
+ layer.events.on({
+ "visibilitychanged": this.updateVisibility,
+ scope: this
+ });
+ }
}
// Adds listener to refresh camera and lookAt points on 2D map
@@ -220,10 +267,20 @@
});
},
- failureCallback: function(object) {
+ /** method[failureCallback]
+ * Failure callback for the creation of the Google Earth Instance
+ * More documentation in http://code.google.com/apis/earth/documentation/reference/google_earth_namespace.html
+ * :param object: ``Object`` The Google Earth Instance
+ */
+ failureCallback: function() {
this.earthAvailable = false;
},
+ /** method[addLayer]
+ * Add a WMS layer supporting KML output format
+ * :param layer: ``OpenLayers.Layer.WMS`` OpenLayers WMS layer
+ * :param order: (optional) ``Number`` Layer order
+ */
addLayer: function(layer, order) {
if (this.ge) {
if (layer.CLASS_NAME == 'OpenLayers.Layer.WMS') {
@@ -255,12 +312,22 @@
}
},
+ updateVisibility: function(event) {
+ if (!this.ge) return;
+ var layer = event.object;
+ // Get the network link
+ var networkLink = this.layerCache[layer.id];
+ if (networkLink) {
+ networkLink.setVisibility(layer.getVisibility());
+ }
+ },
+
setNavigationMode2D: function(state) {
this.navigationMode2D = state;
if (state) {
if (this.map) {
// Vector layer
- this.earthLayer = new OpenLayers.Layer.Vector("earthLayer");
+ this.earthLayer = new OpenLayers.Layer.Vector("Google Earth Navigation");
this.map.addLayer(this.earthLayer);
// Camera and lookAt points to display
@@ -611,6 +678,7 @@
this.ge.getNavigationControl().setVisibility(this.ge.VISIBILITY_HIDE);
GeoExt.ux.GoogleEarthPanel.superclass.beforeDestroy.apply(this, arguments);
},
+
/**
* Function onMoveEnd
* Changes GE position after 2D map move
More information about the Commits
mailing list