Pullup changes since RC2. Fixes:

* WorldWind layer working again
 * Popup.destroy() complaints
 * Decompose marker destruction code for easier subclassing.
 * Error catching for better layerPx error in Map.js
 * Several eamples, including getFeatureInfo, fullScreen, worldwind,
   layer-opacity


git-svn-id: http://svn.openlayers.org/branches/openlayers/2.1@1501 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2006-09-26 20:24:00 +00:00
parent 5f8dc06823
commit c7c21ea08a
12 changed files with 400 additions and 45 deletions

40
examples/fullScreen.html Normal file
View File

@@ -0,0 +1,40 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
function init(){
var map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
"http://wms.jpl.nasa.gov/wms.cgi",
{layers: "modis,global_mosaic"});
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.zoomToMaxExtent();
}
// -->
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>

View File

@@ -0,0 +1,46 @@
<html>
<head>
<script src="../lib/OpenLayers.js"></script>
<style type="text/css">
ul, li { padding-left: 0px; margin-left: 0px; }
</style>
<title>World Map Query</title>
</head>
<body>
<a id='permalink' href="">Permalink</a><br />
<div style="float:right;width:28%">
<h1 style="font-size:1.3em;">CIA Factbook</h1>
<p style='font-size:.8em;'>Click a country to see statistics about the country below.</p>
<div id="nodeList">
</div>
</div>
<div id="map" style="width:70%; height:90%"></div>
<script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";
var map = new OpenLayers.Map('map', {'maxResolution':'auto'});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://world.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/world/map/factbook.map", {'layers': 'factbook'} );
map.addLayer(wms);
map.addControl(new OpenLayers.Control.Permalink($('permalink')));
map.zoomToMaxExtent();
map.events.register('click', map, function (e) {
var url = wms.getFullRequestString({
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: wms.map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: 'text/html',
QUERY_LAYERS: wms.params.LAYERS,
WIDTH: wms.map.size.w,
HEIGHT: wms.map.size.h});
OpenLayers.loadURL(url, '', this, setHTML);
Event.stop(e);
});
function setHTML(response) {
$('nodeList').innerHTML = response.responseText;
}
</script>
</body>
</html>

View File

@@ -0,0 +1,86 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
font-family: sans-serif;
}
#map {
width: 512px;
height: 350px;
border: 1px solid lightgray;
}
p {
width: 512px;
}
a {
text-decoration: none;
color: black;
font-weight: bold;
font-size: 1.1em;
}
#opacity {
padding: 0;
text-align: center;
width: 2em;
font-family: sans-serif;
background: transparent;
color: black;
border: 0;
}
p.note {
font-style: italic;
font-size: 0.8em;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map = null;
var shade = null;
var maxOpacity = 0.9;
var minOpacity = 0.1;
function changeOpacity(byOpacity) {
var newOpacity = (parseFloat($F('opacity')) + byOpacity).toFixed(1);
newOpacity = Math.min(maxOpacity,
Math.max(minOpacity, newOpacity));
$('opacity').value = newOpacity;
shade.setOpacity(newOpacity);
}
function init(){
var options = {
projection: "EPSG:26912",
units: 'm',
maxExtent: new OpenLayers.Bounds(455402, 4967657, 473295, 4984095),
maxResolution: 'auto',
maxZoomLevel: 8
};
map = new OpenLayers.Map('map', options);
var drg = new OpenLayers.Layer.WMS("Topo Maps",
"http://terraservice.net/ogcmap.ashx",
{layers: "DRG"});
shade = new OpenLayers.Layer.WMS("Shaded Relief",
"http://ims.cr.usgs.gov:80/servlet19/com.esri.wms.Esrimap/USGS_EDC_Elev_NED_3",
{layers: "HR-NED.IMAGE", reaspect: "false", transparent: 'true'},
{isBaseLayer: false, opacity: 0.3});
map.addLayers([drg, shade]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(464348.5,4975876), 1);
}
// -->
</script>
</head>
<body onload="init()">
<h2>OpenLayers Layer Opacity Example</h2>
<div id="map"></div>
<p>
Note that if you also have the setOpacity method defined on the Layer
class, you can tweak the layer opacity after it has been added to the map.
</p>
<p>Opacity:
<a title="decrease opacity" href="javascript: changeOpacity(-0.1);">&lt;&lt;</a>
<input id="opacity" type="text" value="0.3" size="3" disabled="true" />
<a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a>
</p>
<p class="note">IE users: Wait until the shade layer has finished loading to try this.</p>
</body>
</html>

View File

@@ -20,7 +20,7 @@ url = fs.getvalue('url', "http://openlayers.org")
# Designed to prevent Open Proxy type stuff.
allowedHosts = ['www.openlayers.org', 'openlayers.org', 'octo.metacarta.com', 'merrimack.metacarta.com', 'labs.metacarta.com']
allowedHosts = ['www.openlayers.org', 'openlayers.org', 'octo.metacarta.com', 'merrimack.metacarta.com', 'labs.metacarta.com', 'world.freemap.in']
try:
host = url.split("/")[2]

151
examples/scroll.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>OpenLayers: Home</title>
<link rel="stylesheet" href="http://openlayers.org/common.css" type="text/css" />
<link rel="stylesheet" href="http://trac.openlayers.org/chrome/common/css/trac.css" type="text/css" />
<link rel="stylesheet" href="http://trac.openlayers.org/chrome/common/css/wiki.css" type="text/css" />
<link rel="stylesheet" href="http://trac.openlayers.org/chrome/common/css/tracnav.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/website.css" type="text/css" />
<script type="text/javascript" src="//trac.openlayers.org/chrome/common/js/trac.js"></script>
<!--[if lt IE 7]>
<script defer="defer" type="text/javascript" src="/pngfix.js"></script>
<![endif]-->
</head>
<body>
<div id="olbanner">
<img class="openlayersbannerimg" src="http://www.openlayers.org/images/OpenLayers.trac.png" style="height: 44px; width: 49px" border="0" alt="OpenLayers" />
<a class="openlayersbanner" href="http://www.openlayers.org/" >
OpenLayers</a>
</div>
<div id="navcontainer">
<a class="navtabtraccurrent" href="http://www.openlayers.org">Home</a>
<a class="navtab" href="http://trac.openlayers.org">Support &amp; Development</a>
</div>
<div id="mainnav" class="nav"><ul><li class="first"><a href="http://trac.openlayers.org/wiki" accesskey="1">Wiki</a></li><li><a href="/QuickTutorial" accesskey="2">Tutorial</a></li><li><a href="http://trac.openlayers.org/wiki/HowToDownload" accesskey="3">Download</a></li><li><a href="/gallery">Gallery</a></li><li><a href="/EmailLists">Email Lists</a></li></ul></div>
<div id="main">
<div id="mapFrame">
<div id="map"></div>
<div align="center"><b>Put an open map widget in any web page!</b></div>
<div align="center">
Double-click to zoom in, and drag to pan. Hold down the shift key
and drag to zoom to a particular region.
</div>
</div>
<h3>Get OpenLayers Now</h3>
<p>
Latest stable release: <a href="/api/2/OpenLayers.js">Link to the hosted version</a> | <a href="/download/OpenLayers-2.0.tar.gz">OpenLayers-2.0.tar.gz</a> | <a href="/doc/reference.html">Class Documentation</a> | <a href="/gallery/">See Screenshots</a>
</p>
<p><b>Latest Development Release</b>: Test out OpenLayers 2.1-RC2! <a href="/api/2.1-rc2/OpenLayers.js">Link to 2.1-RC2 Hosted Version</a>.</p>
<p><b>FOSS4G</b>: Was the FOSS4G presentation too early for you this morning? The presentation is <a href="http://openlayers.org/presentations/foss4g2006/openlayers.odp">available in Open Office Impress format</a>, and the examples are <a href="http://openlayers.org/presentations/foss4g2006/examples/">available as well</a>.</p>
<h3>About...</h3>
<p>OpenLayers makes it easy to put a dynamic map in any web page. It can
display map tiles and markers loaded from any source. <a
href="http://www.metacarta.com/">MetaCarta</a> developed the initial version of
OpenLayers and gave it to the public to further the use of geographic
information of all kinds. OpenLayers is
completely free, Open Source JavaScript, released under the BSD License.</p>
<h3>Put a map in your page.</h3>
<p>We've released a Map Viewer Service that lets you put a map in your page easily. Just put this HTML in your page:</p>
<pre>
&lt;iframe src="http://openlayers.org/viewer/"
width="400px" height="200px"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0"&gt;
&lt;/iframe&gt;</pre>
<p>Read more examples in the <a href="QuickTutorial">20-second tutorial</a>. The visual appearance of the MapViewer is not yet stable. If you like it, please join the <a href="EmailLists">users' email list</a> and tell us about your use.</p>
<h3>For Developers!</h3>
<p>OpenLayers is a pure JavaScript library for displaying map data in most
modern web browsers, with no server-side dependencies. OpenLayers implements a
(still-developing) <a href="//trac.openlayers.org/wiki/Documentation">JavaScript
API</a> for building rich web-based geographic applications, similar to the
Google Maps and MSN Virtual Earth APIs, with one important difference --
OpenLayers is Free Software, developed for and by the Open Source software
community.</p>
<p>Furthermore, OpenLayers implements industry-standard methods for geographic
data access, such as the OpenGIS Consortium's Web Mapping Service (WMS) and Web
Feature Service (WFS) protocols. Under the hood, OpenLayers is written in
object-oriented JavaScript, using <a
href="//prototype.conio.net/">Prototype.js</a> and components from the <a
href="//openrico.org/">Rico<a> library. The OpenLayers code base already has
hundreds of <a href="/dev/tests/run-tests.html">unit tests</a>, via the <a
href="http://straytree.com/TestAnotherWay/doc/index.html">Test.AnotherWay</a>
framework.</p>
<p>As a framework, OpenLayers is intended to separate map <i>tools</i> from map
<i>data</i> so that all the tools can operate on all the data sources. This
separation breaks the proprietary silos that earlier GIS revolutions have
taught civilization to avoid. The mapping revolution on the public Web should
benefit from the experience of history.</p>
<h3>Getting the Code</h3>
<p>Releases are made available on the <a href="/download/">downloads</a> page.
Additionally, if you wish to use OpenLayers in a web application, you can
include
<tt>
<a href="http://www.openlayers.org/api/OpenLayers.js">http://www.openlayers.org/api/OpenLayers.js</a>
</tt> in your page, to always get the latest release.</p>
<p> The code is also available in our
<a href="//trac.openlayers.org/wiki/HowToDownload">Subversion repository</a>.
Using Subversion, you can keep up to the absolute bleeding edge of the code.
If you wish to report a bug in the API, and you are able to use Subversion,
please see if the bug has been fixed in Subversion first: OpenLayers is
under rapid development, so things change quickly.
</p>
<p>If you don't have Subversion or don't want to download the code, you can
still try some <a href="/dev/examples/">live examples</a> on
openlayers.org. If you're familiar with JavaScript, try viewing the source
of the examples to get an idea how the OpenLayers library is used.</p>
<p>OpenLayers is still undergoing rapid development, so expect a lot to change
in the next few weeks and months. We need your support! Please check the <a
href="//trac.openlayers.org">wiki</a> for the very latest updates and
documentation, and thank you for taking an interest.</p>
</div>
<script type="text/javascript" src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "World Map",
"http://labs.metacarta.com/wms/vmap0?",
{layers: 'basic'} );
var jpl_wms = new OpenLayers.Layer.KaMap( "Satellite",
"/world/index.php", {g: "satellite", map: "world"});
var dm_wms = new OpenLayers.Layer.WMS( "Canada",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
dm_wms.setVisibility(false);
map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
// -->
</script>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>

View File

@@ -10,20 +10,19 @@
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var ol_wms, ww, ww2;
function init(){
var map = new OpenLayers.Map('map', {'maxResolution': .0703125*4});
var map = new OpenLayers.Map('map', {'maxResolution': .28125, tileSize: new OpenLayers.Size(512, 512)});
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
var ww = new OpenLayers.Layer.WorldWind( "Bathy",
"http://worldwind25.arc.nasa.gov/tile/tile.aspx?", 36, 4,
{T:"bmng.topo.bathy.200406"});
ww.setTileSize(new OpenLayers.Size(512,512));
var ww2 = new OpenLayers.Layer.WorldWind( "LANDSAT",
ww = new OpenLayers.Layer.WorldWind( "Bathy",
"http://worldwind25.arc.nasa.gov/tile/tile.aspx?", 36, 4,
{T:"bmng.topo.bathy.200406"});
ww2 = new OpenLayers.Layer.WorldWind( "LANDSAT",
"http://worldwind25.arc.nasa.gov/tile/tile.aspx", 2.25, 4,
{T:"105"});
ww2.setTileSize(new OpenLayers.Size(512,512));
@@ -37,5 +36,7 @@
<body onload="init()">
<h1>OpenLayers Example</h1>
<div id="map"></div>
<p>This is a demonstration of using Tiled WorldWind layers. WorldWind requires you to define a "LZTD" -- the 3rd param of the constructor -- and the number of zoom levels it supports. When a worldwind layer is not visible at a given tile level, and empty tile is placed there instead. Note that the maxResolution of the map times 512px, must be a multiple of a power of two different from the LZTD -- in this case, .28125 * 512 is 144, which is 36*4, and 2.25*64.</p>
<p>This example has a 'Bathy' layer, visible as you zoom out, and a 'landsat' layer, visible as you zoom in, both visible at zoom level 6.</p>
</body>
</html>

View File

@@ -63,7 +63,7 @@ OpenLayers.Feature.prototype= {
this.lonlat = null;
this.data = null;
if (this.marker != null) {
this.marker.destroy();
this.destroyMarker(this.marker);
this.marker = null;
}
if (this.popup != null) {
@@ -89,6 +89,10 @@ OpenLayers.Feature.prototype= {
return this.marker;
},
destroyMarker: function() {
this.marker.destroy();
},
/**
*
*/

View File

@@ -409,15 +409,19 @@ OpenLayers.Layer.prototype = {
* @type OpenLayers.LonLat
*/
getLonLatFromViewPortPx: function (viewPortPx) {
var size = this.map.getSize();
var center = this.map.getCenter();
var res = this.map.getResolution();
var delta_x = viewPortPx.x - (size.w / 2);
var delta_y = viewPortPx.y - (size.h / 2);
var lonlat = null;
if (viewPortPx != null) {
var size = this.map.getSize();
var center = this.map.getCenter();
var res = this.map.getResolution();
return new OpenLayers.LonLat(center.lon + delta_x * res ,
center.lat - delta_y * res);
var delta_x = viewPortPx.x - (size.w / 2);
var delta_y = viewPortPx.y - (size.h / 2);
lonlat = new OpenLayers.LonLat(center.lon + delta_x * res ,
center.lat - delta_y * res);
}
return lonlat;
},
/**
@@ -428,12 +432,16 @@ OpenLayers.Layer.prototype = {
* @type OpenLayers.Pixel
*/
getViewPortPxFromLonLat: function (lonlat) {
var resolution = this.map.getResolution();
var extent = this.map.getExtent();
return new OpenLayers.Pixel(
Math.round(1/resolution * (lonlat.lon - extent.left)),
Math.round(1/resolution * (extent.top - lonlat.lat))
);
var px = null;
if (lonlat != null) {
var resolution = this.map.getResolution();
var extent = this.map.getExtent();
px = new OpenLayers.Pixel(
Math.round(1/resolution * (lonlat.lon - extent.left)),
Math.round(1/resolution * (extent.top - lonlat.lat))
);
}
return px;
},
/**

View File

@@ -46,19 +46,16 @@ OpenLayers.Layer.WorldWind.prototype =
return new OpenLayers.Tile.Image(this, position, bounds,
url, this.tileSize);
} else {
var tile = new Object();
tile.draw = function() {};
tile.destroy = function() {};
tile.bounds = bounds;
tile.bounds = position;
return tile;
return new OpenLayers.Tile.Image(this, position, bounds,
OpenLayers.Util.getImagesLocation() + "blank.gif",
this.tileSize);
}
},
getZoom: function () {
var zoom = this.map.getZoom();
var extent = this.map.getMaxExtent();
zoom = zoom - Math.log(this.map.maxResolution / (this.lzd/512))/Math.log(2);
zoom = zoom - Math.log(this.maxResolution / (this.lzd/512))/Math.log(2);
return zoom;
},
@@ -71,14 +68,21 @@ OpenLayers.Layer.WorldWind.prototype =
* @type String
*/
getURL: function (bounds) {
var zoom = this.getZoom();
var extent = this.map.getMaxExtent();
var deg = this.lzd/Math.pow(2,this.getZoom());
var x = Math.floor((bounds.left - extent.left)/deg);
var y = Math.floor((bounds.bottom - extent.bottom)/deg);
return this.getFullRequestString(
if (this.map.getResolution() <= (this.lzd/512)
&& this.getZoom() <= this.zoomLevels) {
return this.getFullRequestString(
{ L: zoom,
X: x,
Y: y
});
} else {
return OpenLayers.Util.getImagesLocation() + "blank.gif";
}
},

View File

@@ -438,7 +438,9 @@ OpenLayers.Map.prototype = {
removePopup: function(popup) {
this.popups.remove(popup);
if (popup.div) {
this.layerContainerDiv.removeChild(popup.div);
try { this.layerContainerDiv.removeChild(popup.div); }
catch (e) { } // Popups sometimes apparently get disconnected
// from the layerContainerDiv, and cause complaints.
}
popup.map = null;
},
@@ -475,17 +477,20 @@ OpenLayers.Map.prototype = {
for(var i=0; i < this.layers.length; i++) {
this.layers[i].onMapResize();
}
var center = new OpenLayers.Pixel(newSize.w /2, newSize.h / 2);
var zoom = this.getZoom();
this.zoom = null;
this.setCenter(center, zoom);
// store the new size
this.size = newSize;
// the div might have moved on the page, also
this.events.element.offsets = null;
if (this.baseLayer != null) {
var center = new OpenLayers.Pixel(newSize.w /2, newSize.h / 2);
var centerLL = this.getLonLatFromViewPortPx(center);
var zoom = this.getZoom();
this.zoom = null;
this.setCenter(this.getCenter(), zoom);
}
}
},
@@ -992,11 +997,11 @@ OpenLayers.Map.prototype = {
var dX = -parseInt(this.layerContainerDiv.style.left);
var dY = -parseInt(this.layerContainerDiv.style.top);
layerPx = viewPortPx.add(dX, dY);
if (isNaN(layerPx.x) || isNaN(layerPx.y)) {
layerPx = null;
}
}
if (!isNaN(layerPx.x) && !isNaN(layerPx.y)) {
return layerPx;
}
return null;
return layerPx;
},
//

View File

@@ -30,7 +30,16 @@ OpenLayers.Marker.prototype = {
initialize: function(lonlat, icon) {
if (arguments.length > 0) {
this.lonlat = lonlat;
this.icon = (icon) ? icon : OpenLayers.Marker.defaultIcon();
var newIcon = (icon) ? icon : OpenLayers.Marker.defaultIcon();
if (this.icon == null) {
this.icon = newIcon;
} else {
this.icon.url = newIcon.url;
this.icon.size = newIcon.size;
this.icon.offset = newIcon.offset;
this.icon.calculateOffset = newIcon.calculateOffset;
}
this.events = new OpenLayers.Events(this, this.icon.imageDiv, null);
}
},

View File

@@ -148,6 +148,7 @@ OpenLayers.Util.onImageLoadErrorColor = "pink";
OpenLayers.Util.onImageLoadError = function() {
this.style.backgroundColor = OpenLayers.Util.onImageLoadErrorColor;
this.style.display = "";
};