[Commits] r1542 - in sandbox/cmoullet/ux/GoogleEarthPanel: examples resources ux/widgets
commits at geoext.org
commits at geoext.org
Thu Dec 3 06:42:22 CET 2009
Author: cmoullet
Date: 2009-12-03 06:42:21 +0100 (Thu, 03 Dec 2009)
New Revision: 1542
Modified:
sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.html
sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.js
sandbox/cmoullet/ux/GoogleEarthPanel/resources/eye.png
sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js
Log:
New icon, add config parameters, improve performance for IE, add partial permalink support
Modified: sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.html
===================================================================
--- sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.html 2009-12-02 23:34:15 UTC (rev 1541)
+++ sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.html 2009-12-03 05:42:21 UTC (rev 1542)
@@ -9,10 +9,15 @@
<script src='http://maps.google.com/maps?file=api&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRTv_-xvSZ6KJmWSkQfCJoxbiB7tyBQ1ey_kgwA_p7sbTQSTOBeMyXtXkA"></script>
-->
- <!--
+ <!-- 192.168.1.44
<script src='http://maps.google.com/maps?file=api&key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRSIMweZSjbRtcUk2F5YNqLnri0MahTrQJRaRPWFP0OUB1b6unv37Jg7vQ'></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRSIMweZSjbRtcUk2F5YNqLnri0MahTrQJRaRPWFP0OUB1b6unv37Jg7vQ"></script>
-->
+ <!--
+ <script src='http://maps.google.com/maps?file=api&key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRQg15vMUgV9rqK5U3tGsPdx8x_OsBTeBHQ0wK75MLc8dB7yu0cRx36VJQ'></script>
+ <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRQg15vMUgV9rqK5U3tGsPdx8x_OsBTeBHQ0wK75MLc8dB7yu0cRx36VJQ"></script>
+ -->
+
<!-- Google Maps API for "dev.geoext.org" -->
<script src='http://maps.google.com/maps?file=api&key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRTv_-xvSZ6KJmWSkQfCJoxbiB7tyBQ1ey_kgwA_p7sbTQSTOBeMyXtXkA'></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRTv_-xvSZ6KJmWSkQfCJoxbiB7tyBQ1ey_kgwA_p7sbTQSTOBeMyXtXkA"></script>
Modified: sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.js
===================================================================
--- sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.js 2009-12-02 23:34:15 UTC (rev 1541)
+++ sandbox/cmoullet/ux/GoogleEarthPanel/examples/GoogleEarthPanelExample.js 2009-12-03 05:42:21 UTC (rev 1542)
@@ -12,6 +12,7 @@
var options;
var center = new OpenLayers.LonLat(-13625995.09, 4550849.74);
+ var lookAt = new OpenLayers.LonLat(-13625995.09, 4550849.74);
options = {
projection: new OpenLayers.Projection("EPSG:900913"),
@@ -64,9 +65,8 @@
handler: function() {
var googleEarthPanelItem = Ext.getCmp("googleEarthPanelItem");
if (googleEarthPanelItem) {
- alert("TODO");
+ window.open(googleEarthPanelItem.getPermalink(true));
}
-
}
}
]});
@@ -75,7 +75,7 @@
xtype: 'gxux_googleearthpanel',
id: 'googleEarthPanelItem',
map: map,
- lonLat: center,
+ lookAt: lookAt.transform(new OpenLayers.Projection("EPSG:900913"),new OpenLayers.Projection("EPSG:4326")),
altitude: 50,
heading: -60,
tilt: 70,
Modified: sandbox/cmoullet/ux/GoogleEarthPanel/resources/eye.png
===================================================================
(Binary files differ)
Modified: sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js
===================================================================
--- sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js 2009-12-02 23:34:15 UTC (rev 1541)
+++ sandbox/cmoullet/ux/GoogleEarthPanel/ux/widgets/GoogleEarthPanel.js 2009-12-03 05:42:21 UTC (rev 1542)
@@ -23,18 +23,56 @@
*/
ge: null,
- /** private: property[earthAvailable]
+ /** private: property[ge]
+ * Google earth instance
+ */
+ geProperties: {},
+
+ /** api: config[showBordersLayer]
+ *
+ */
+ 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
+ navigationMode2D: true,
+
+ // Move Google Earth when 2D map is moved
+ navigationModeFrom2D: true,
+
+ // Check that the targer and camera points are always in the map: not implemented
+ navigationMode3D: false,
+
+ // Click in the map to set the camera point: not implemented
+ clickMode: false,
+
+ /** property[earthAvailable]
* Defines if Google Earth is available
*/
earthAvailable: true,
- /** api: config[lonLat]
- * `` OpenLayers.LonLat`` Initial position (default: 0,0)
+ /** api: config[lookAt]
+ * `` OpenLayers.LonLat`` Initial camera position (default: 0,0)
*/
- /** private: property[map]
- * ``OpenLayers.LonLat`` Initial position
+ /** private: property[lookAt]
+ * ``OpenLayers.LonLat`` Initial camera position
*/
- lonLat: new OpenLayers.LonLat(0, 0),
+ lookAt: new OpenLayers.LonLat(0, 0),
/** api: config[altitude]
* Initial altitude (default: 100)
@@ -71,7 +109,7 @@
/** api: config[kmlUrl]
* KML Url (default: null)
*/
- /** private: property[range]
+ /** private: property[kmlUrl]
* KML Url
*/
kmlUrl: null,
@@ -82,63 +120,6 @@
};
Ext.applyIf(this, defConfig);
GeoExt.ux.GoogleEarthPanel.superclass.initComponent.call(this);
- this.addEvents('earthLoaded');
-
- // GE is EPSG:4326
- this.geProjection = new OpenLayers.Projection("EPSG:4326");
-
- // Vector layer
- this.earthLayer = new OpenLayers.Layer.Vector("earthLayer");
- this.map.addLayer(this.earthLayer);
-
- // Camera and lookAt points to display
- this.features = [
- new OpenLayers.Feature.Vector(null, {role: 'line'}, {strokeColor: '#ff0000',
- strokeWidth: 3,
- pointRadius: 6}),
- new OpenLayers.Feature.Vector(null, {role: 'lookAt'}, {pointRadius: 8,
- fillColor: '#ff0000'}),
- new OpenLayers.Feature.Vector(null, {role: 'camera'}, {externalGraphic: '../resources/eye.png',
- graphicHeight: 18,
- graphicWidth: 31,
- graphicYOffset: -3,
- rotation: 0})];
-
- // Drag control to move camera ans lookAt points
- this.drag = new OpenLayers.Control.DragFeature(this.earthLayer, {
- earth: this,
- downFeature: function(pixel) {
- this.lastPixel = pixel;
- this.firstPixel = pixel;
- this.firstGeom = this.feature.geometry;
- },
- moveFeature: function(pixel) {
- if (this.feature === null) {
- return;
- }
- if (this.feature.attributes.role != 'line') {
- var res = this.map.getResolution();
- var x = res * (pixel.x - this.firstPixel.x) + this.firstGeom.x;
- var y = res * (this.firstPixel.y - pixel.y) + this.firstGeom.y;
- var lonLat = new OpenLayers.LonLat(x, y);
-
- if (this.feature.attributes.role == 'lookAt') {
- this.earth.lookTo(lonLat);
- } else if (this.feature.attributes.role == 'camera') {
- this.earth.lookFrom(lonLat);
- }
- }
- this.lastPixel = pixel;
- }
- });
- this.map.addControl(this.drag);
- this.drag.activate();
-
- // Refreshes GE on map move
- this.map.events.on({
- move: this.onMove,
- scope: this
- });
},
// Create Google Earth instance when panel is rendered
@@ -148,42 +129,126 @@
Ext.applyIf(this, wh);
}
GeoExt.ux.GoogleEarthPanel.superclass.afterRender.call(this);
+
+ // http://code.google.com/apis/earth/documentation/reference/google_earth_namespace.html
google.earth.createInstance(this.body.dom, this.initCallback.createDelegate(this), this.failureCallback.createDelegate(this));
},
// Init Google Earth
initCallback: function(object) {
this.ge = object;
+
+ // Set Google Earth Properties
this.ge.getWindow().setVisibility(true);
- this.fireEvent('earthLoaded', this);
-
- // Initializes position
+ this.geProperties.geProjection = new OpenLayers.Projection("EPSG:4326");
var lookAt = this.ge.createLookAt('');
- this.transformToGE(this.lonLat);
- lookAt.set(this.lonLat.lat, this.lonLat.lon,
- this.altitude, this.ge.ALTITUDE_RELATIVE_TO_GROUND,
- this.heading, this.tilt, this.range);
+ lookAt.set(this.lookAt.lat,
+ this.lookAt.lon,
+ this.altitude,
+ this.ge.ALTITUDE_RELATIVE_TO_GROUND,
+ this.heading,
+ this.tilt,
+ this.range);
this.ge.getView().setAbstractView(lookAt);
-
this.ge.getNavigationControl().setVisibility(this.ge.VISIBILITY_SHOW);
this.ge.getOptions().setFlyToSpeed(this.ge.SPEED_TELEPORT);
- this.ge.getLayerRoot().enableLayerById(this.ge.LAYER_BUILDINGS, true);
-
+ this.showGeLayers();
+
+ // Set the 2D navigation tool
+ if (this.map && this.navigationMode2D) {
+ // Vector layer
+ this.earthLayer = new OpenLayers.Layer.Vector("earthLayer");
+ this.map.addLayer(this.earthLayer);
+
+ // Camera and lookAt points to display
+ this.features = [
+ new OpenLayers.Feature.Vector(null, {role: 'line'}, {strokeColor: '#ff0000',
+ strokeWidth: 3,
+ pointRadius: 6}),
+ new OpenLayers.Feature.Vector(null, {role: 'lookAt'}, {pointRadius: 8,
+ fillColor: '#ff0000'}),
+ new OpenLayers.Feature.Vector(null, {role: 'camera'}, {externalGraphic: '../resources/eye.png',
+ graphicHeight: 18,
+ graphicWidth: 31,
+ graphicYOffset: -3,
+ rotation: 0})];
+
+ // Drag control to move camera ans lookAt points
+ this.drag = new OpenLayers.Control.DragFeature(this.earthLayer, {
+ earth: this,
+ downFeature: function(pixel) {
+ this.lastPixel = pixel;
+ this.firstPixel = pixel;
+ this.firstGeom = this.feature.geometry;
+ },
+ moveFeature: function(pixel) {
+ if (this.feature === null) {
+ return;
+ }
+ if (this.feature.attributes.role != 'line') {
+ var res = this.map.getResolution();
+ var x = res * (pixel.x - this.firstPixel.x) + this.firstGeom.x;
+ var y = res * (this.firstPixel.y - pixel.y) + this.firstGeom.y;
+ var lonLat = new OpenLayers.LonLat(x, y);
+
+ if (this.feature.attributes.role == 'lookAt') {
+ this.earth.lookTo(lonLat);
+ } else if (this.feature.attributes.role == 'camera') {
+ this.earth.lookFrom(lonLat);
+ }
+ }
+ this.lastPixel = pixel;
+ }
+ });
+ this.map.addControl(this.drag);
+ this.drag.activate();
+ }
+
+ // Refreshes GE on map move
+ if (this.map && this.navigationModeFrom2D) {
+ this.map.events.on({
+ move: this.onMove,
+ scope: this
+ });
+ }
+
// Downloads KML
if (this.kmlUrl) {
google.earth.fetchKml(this.ge, this.kmlUrl, function(obj) {
- this.ge.getFeatures().appendChild(obj);
- });
+ this.ge.getFeatures().appendChild(obj);
+ });
}
// Adds listener to refresh camera and lookAt points on 2D map
var self = this;
- google.earth.addEventListener(this.ge, "frameend", function() { self.onFrameEnd(); });
+ google.earth.addEventListener(this.ge, "frameend", function() {
+ self.onFrameEnd();
+ });
},
failureCallback: function(object) {
this.earthAvailable = false;
},
+ /*
+ * Define which Google Earth Layers are shown
+ */
+ showGeLayers: function() {
+ if (this.showBuildingsLayer) {
+ this.ge.getLayerRoot().enableLayerById(this.ge.LAYER_BUILDINGS, true);
+ }
+ if (this.showBordersLayer) {
+ this.ge.getLayerRoot().enableLayerById(this.ge.LAYER_BORDERS, true);
+ }
+ if (this.showTerrainLayer) {
+ this.ge.getLayerRoot().enableLayerById(this.ge.LAYER_TERRAIN, true);
+ }
+ if (this.showRoadsLayer) {
+ this.ge.getLayerRoot().enableLayerById(this.ge.LAYER_ROADS, true);
+ }
+ if (this.showBuildingsLowResolutionLayer) {
+ this.ge.getLayerRoot().enableLayerById(this.ge.LAYER_BUILDINGS_LOW_RESOLUTION, true);
+ }
+ },
/**
* Function transformToGE
@@ -191,7 +256,7 @@
*/
transformToGE: function(lonLat) {
lonLat.transform(this.map.getProjectionObject(),
- this.geProjection);
+ this.geProperties.geProjection);
},
/**
@@ -199,10 +264,48 @@
* Transforms a LonLat from GE projection to map projection
*/
transformFromGE: function(geLonLat) {
- geLonLat.transform(this.geProjection,
- this.map.getProjectionObject());
+ geLonLat.transform(this.geProperties.geProjection,
+ this.map.getProjectionObject());
},
-
+
+ getPermalink: function(complete) {
+ var permalink;
+ if (complete) {
+ permalink = window.location.href;
+ if (OpenLayers.String.contains(permalink, '?')) {
+ var end = permalink.indexOf('?');
+ permalink = permalink.substring(0, end);
+ }
+ permalink = permalink + "?";
+ } else {
+ permalink = '';
+ }
+ var lookAt = this.ge.getView().copyAsLookAt(this.ge.ALTITUDE_RELATIVE_TO_GROUND);
+
+ permalink = permalink + "lookAtLatitude=" + lookAt.getLatitude();
+ permalink = permalink + "&lookAtLongitude=" + lookAt.getLongitude();
+ permalink = permalink + "&range=" + lookAt.getRange();
+ permalink = permalink + "&tilt=" + lookAt.getTilt();
+ permalink = permalink + "&heading=" + lookAt.getHeading();
+ permalink = permalink + "&altitude=" + lookAt.getAltitude();
+ permalink = permalink + "&altitudeMode=" + lookAt.getAltitudeMode();
+ permalink = permalink + "&showBordersLayer=" + this.showBordersLayer;
+ permalink = permalink + "&showTerrainLayer=" + this.showTerrainLayer;
+ permalink = permalink + "&showRoadsLayer=" + this.showRoadsLayer;
+ permalink = permalink + "&showBuildingsLayer=" + this.showBuildingsLayer;
+ permalink = permalink + "&showBuildingsLowResolutionLayer=" + this.showBuildingsLowResolutionLayer;
+ permalink = permalink + "&navigationMode2D=" + this.navigationMode2D;
+ permalink = permalink + "&navigationModeFrom2D=" + this.navigationModeFrom2D;
+ permalink = permalink + "&navigationModeFrom2D=" + this.navigationMode3D;
+ permalink = permalink + "&navigationModeFrom2D=" + this.clickMode;
+ if (this.map) {
+ permalink = permalink + "&easting=" + this.map.getCenter().lon;
+ permalink = permalink + "&northing=" + this.map.getCenter().lat;
+ permalink = permalink + "&zoom=" + this.map.getZoom();
+ }
+ return permalink;
+ },
+
// Set the permalink
setPermalink: function(parameters) {
@@ -210,9 +313,26 @@
beforeDestroy: function() {
//Delete object
+ if (this.map && this.navigationMode2D) {
+ this.drag.deactivate();
+ this.map.removeControl(this.drag);
+ this.map.removeLayer(this.earthLayer);
+ this.earthLayer.destroy();
+ this.features = null;
+ }
+ if (this.map && this.navigationModeFrom2D) {
+ this.map.events.un({
+ move: this.onMove,
+ scope: this
+ });
+ }
+ google.earth.removeEventListener(this.ge, "frameend", function() {
+ self.onFrameEnd();
+ });
+ this.ge.getNavigationControl().setVisibility(this.ge.VISIBILITY_HIDE);
GeoExt.ux.GoogleEarthPanel.superclass.beforeDestroy.apply(this, arguments);
},
- /**
+ /**
* Function onMove
* Changes GE position on 2D map move
*/
@@ -225,7 +345,9 @@
* Changes camera and lookAt points on GE move
*/
onFrameEnd: function() {
- this.refresh();
+ if (this.map && this.navigationMode2D) {
+ this.refreshMap();
+ }
},
/**
@@ -257,7 +379,7 @@
// Gets current lookAt position
var lookAt = this.ge.getView().copyAsLookAt(this.ge.ALTITUDE_RELATIVE_TO_GROUND);
var geLonLat = new OpenLayers.LonLat(lookAt.getLongitude(),
- lookAt.getLatitude());
+ lookAt.getLatitude());
// Computes distance between lookAt and camera for range computation
var lonLatTmp = lonLat.clone();
@@ -266,7 +388,7 @@
// Computes rotation
this.transformFromGE(geLonLat);
- var rot = (180/Math.PI) * Math.atan((geLonLat.lon - lonLat.lon) / (geLonLat.lat - lonLat.lat));
+ var rot = (180 / Math.PI) * Math.atan((geLonLat.lon - lonLat.lon) / (geLonLat.lat - lonLat.lat));
if (geLonLat.lat < lonLat.lat) {
rot = rot + 180;
}
@@ -274,17 +396,17 @@
// Computes range
var tilt = lookAt.getTilt();
- var range = dist / Math.sin(tilt / (180/Math.PI));
+ var range = dist / Math.sin(tilt / (180 / Math.PI));
lookAt.setRange(range);
this.ge.getView().setAbstractView(lookAt);
},
/**
- * Function refresh
- * Refreshes camera and lookAt drawings on 2D map
+ * Function refreshMap
+ * Refreshes camera and lookAt drawings in 2D map
*/
- refresh: function() {
+ refreshMap: function() {
if (!this.ge) {
return;
}
@@ -299,7 +421,7 @@
// Refresh map only if camera has moved
if (this.pl && this.pc) {
- if (this.pl == pl && this.pc == pc) {
+ if (this.pl.lat == pl.lat && this.pl.lon == pl.lon && this.pc.lat == pc.lat && this.pc.lon) {
return;
} else {
this.pl = pl;
@@ -313,8 +435,8 @@
// Computes new features positions
this.earthLayer.removeFeatures(this.features);
this.features[0].geometry =
- new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(pl.lon, pl.lat),
- new OpenLayers.Geometry.Point(pc.lon, pc.lat)]);
+ new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(pl.lon, pl.lat),
+ new OpenLayers.Geometry.Point(pc.lon, pc.lat)]);
this.features[1].geometry = new OpenLayers.Geometry.Point(pl.lon, pl.lat);
this.features[2].geometry = new OpenLayers.Geometry.Point(pc.lon, pc.lat);
@@ -322,7 +444,7 @@
if (pl.lon == pc.lon) {
this.features[2].style.rotation = 0;
} else {
- var rot = (180/Math.PI) * Math.atan((pl.lon - pc.lon) / (pl.lat - pc.lat));
+ var rot = (180 / Math.PI) * Math.atan((pl.lon - pc.lon) / (pl.lat - pc.lat));
if (pl.lat > pc.lat) {
this.features[2].style.rotation = rot + 180;
} else {
@@ -330,7 +452,6 @@
}
}
- // Redraws
this.earthLayer.addFeatures(this.features);
}
});
More information about the Commits
mailing list