Bring in Tim Schaub's "Graphic" layer as "Layer.Image" (since in the future,
'graphic' may mean something different, like SVG graphic). Tests, docs, example, and library change. Thanks, Tim! git-svn-id: http://svn.openlayers.org/trunk/openlayers@1712 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
@@ -1,7 +1,7 @@
|
||||
#!/bin/sh
|
||||
|
||||
rm ../doc/reference.html
|
||||
CLASSES="Map Layer Layer.HTTPRequest Layer.Grid Layer.WMS Layer.KaMap Layer.EventPane Layer.Google Layer.VirtualEarth Layer.Markers Layer.Text Layer.GeoRSS Layer.Boxes Icon Marker Marker.Box Tile Tile.Image Tile.WFS Control Control.LayerSwitcher Control.MouseDefaults Control.MousePosition Control.MouseToolbar Control.OverviewMap Control.PanZoom Control.PanZoomBar Control.Permalink Control.Scale LonLat Size Pixel Bounds Util Ajax"
|
||||
CLASSES="Map Layer Layer.Image Layer.HTTPRequest Layer.Grid Layer.WMS Layer.KaMap Layer.EventPane Layer.Google Layer.VirtualEarth Layer.Markers Layer.Text Layer.GeoRSS Layer.Boxes Icon Marker Marker.Box Tile Tile.Image Tile.WFS Control Control.LayerSwitcher Control.MouseDefaults Control.MousePosition Control.MouseToolbar Control.OverviewMap Control.PanZoom Control.PanZoomBar Control.Permalink Control.Scale LonLat Size Pixel Bounds Util Ajax"
|
||||
echo "<html>
|
||||
<head>
|
||||
<title>OpenLayers Class Reference Documentation</title>
|
||||
|
||||
51
examples/image-layer.html
Normal file
51
examples/image-layer.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
p {
|
||||
width: 512px;
|
||||
}
|
||||
#map {
|
||||
width: 512px;
|
||||
height: 256px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
function init(){
|
||||
var map = new OpenLayers.Map('map');
|
||||
|
||||
var options = {maxResolution: 'auto', numZoomLevels: 3};
|
||||
|
||||
var graphic = new OpenLayers.Layer.Image(
|
||||
'City Lights',
|
||||
'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
|
||||
new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
|
||||
new OpenLayers.Size(580, 288),
|
||||
options);
|
||||
|
||||
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
|
||||
"http://wms.jpl.nasa.gov/wms.cgi",
|
||||
{layers: "modis,global_mosaic"}, options);
|
||||
|
||||
map.addLayers([graphic, jpl_wms]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
// -->
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>OpenLayers Image Layer Example</h1>
|
||||
<div id="map"></div>
|
||||
<p>
|
||||
The "City Lights" layer above is created from a single web accessible
|
||||
image. If you construct it without any resolution related options,
|
||||
the layer will be given a single resolution based on the extent/size.
|
||||
Otherwise, it behaves much like a regular layer. This is primarily
|
||||
intended to be used in an overview map - where another layer type
|
||||
might not make a good overview.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -65,6 +65,7 @@ if (typeof(_OPENLAYERS_SFL_) == "undefined") {
|
||||
"OpenLayers/Feature/WFS.js",
|
||||
"OpenLayers/Tile/Image.js",
|
||||
"OpenLayers/Tile/WFS.js",
|
||||
"OpenLayers/Layer/Image.js",
|
||||
"OpenLayers/Layer/EventPane.js",
|
||||
"OpenLayers/Layer/FixedZoomLevels.js",
|
||||
"OpenLayers/Layer/Google.js",
|
||||
|
||||
184
lib/OpenLayers/Layer/Image.js
Normal file
184
lib/OpenLayers/Layer/Image.js
Normal file
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* @fileoverview Image Layer
|
||||
* @author Tim Schaub
|
||||
*/
|
||||
|
||||
/**
|
||||
* @class
|
||||
*
|
||||
* @requires OpenLayers/Layer.js
|
||||
*/
|
||||
OpenLayers.Layer.Image = OpenLayers.Class.create();
|
||||
OpenLayers.Layer.Image.prototype =
|
||||
OpenLayers.Class.inherit(OpenLayers.Layer, {
|
||||
|
||||
/** @type String */
|
||||
name: null,
|
||||
|
||||
/** @type String */
|
||||
url: null,
|
||||
|
||||
/** @type OpenLayers.Bounds */
|
||||
extent: null,
|
||||
|
||||
/** @type OpenLayers.Size */
|
||||
size: null,
|
||||
|
||||
/** @type Object */
|
||||
options: null,
|
||||
|
||||
/** @type OpenLayers.Tile.Image */
|
||||
tile: null,
|
||||
|
||||
/**
|
||||
* The ratio of height/width represented by a single pixel in the graphic
|
||||
*
|
||||
* @type Float */
|
||||
aspectRatio: null,
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @param {String} name
|
||||
* @param {String} url Relative or absolute path to the image
|
||||
* @param {OpenLayers.Bounds} extent The extent represented by the image
|
||||
* @param {OpenLayers.Size} size The size (in pixels) of the image
|
||||
* @param {Object} options Hashtable of extra options to tag onto the layer
|
||||
*/
|
||||
initialize: function(name, url, extent, size, options) {
|
||||
this.url = url;
|
||||
this.extent = extent;
|
||||
this.size = size;
|
||||
this.aspectRatio = (this.extent.getHeight() / this.size.h) /
|
||||
(this.extent.getWidth() / this.size.w);
|
||||
OpenLayers.Layer.prototype.initialize.apply(this, [name, options]);
|
||||
|
||||
// unless explicitly set in options, the layer will be a base layer
|
||||
if((options == null) || (options.isBaseLayer == null)) {
|
||||
this.isBaseLayer = true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
destroy: function() {
|
||||
this.tile.destroy();
|
||||
this.tile = null;
|
||||
OpenLayers.Layer.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Object} obj
|
||||
*
|
||||
* @returns An exact clone of this OpenLayers.Layer.Image
|
||||
* @type OpenLayers.Layer.Image
|
||||
*/
|
||||
clone: function(obj) {
|
||||
|
||||
if(obj == null) {
|
||||
obj = new OpenLayers.Layer.Image(this.name,
|
||||
this.url,
|
||||
this.extent,
|
||||
this.size,
|
||||
this.options);
|
||||
}
|
||||
|
||||
//get all additions from superclasses
|
||||
obj = OpenLayers.Layer.prototype.clone.apply(this, [obj]);
|
||||
|
||||
// copy/set any non-init, non-simple values here
|
||||
|
||||
return obj;
|
||||
},
|
||||
|
||||
/**
|
||||
* This is a bad method to have here. It would be nicer to be able
|
||||
* to ask Layer directly.
|
||||
*/
|
||||
shouldCalcResolutions: function() {
|
||||
var props = new Array(
|
||||
'scales', 'resolutions',
|
||||
'maxScale', 'minScale',
|
||||
'maxResolution', 'minResolution',
|
||||
'minExtent', 'maxExtent',
|
||||
'numZoomLevels', 'maxZoomLevel'
|
||||
);
|
||||
for(var i=0; i < props.length; i++) {
|
||||
var property = props[i];
|
||||
if(this.options[property] != null) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Map} map
|
||||
*/
|
||||
setMap: function(map) {
|
||||
// If nothing to do with resolutions has been set, assume a single
|
||||
// resolution determined by extent/size
|
||||
if(this.shouldCalcResolutions()) {
|
||||
this.options.resolutions = [this.extent.getWidth() / this.size.w];
|
||||
}
|
||||
OpenLayers.Layer.prototype.setMap.apply(this, arguments);
|
||||
},
|
||||
|
||||
/** When zooming or first rendering, create a new tile for the image.
|
||||
*
|
||||
* @param {OpenLayers.Bounds} bounds
|
||||
* @param {Boolean} zoomChanged
|
||||
* @param {Boolean} dragging
|
||||
*/
|
||||
moveTo:function(bounds, zoomChanged, dragging) {
|
||||
OpenLayers.Layer.prototype.moveTo.apply(this, arguments);
|
||||
|
||||
var firstRendering = (this.tile == null);
|
||||
|
||||
if(zoomChanged || firstRendering) {
|
||||
|
||||
//clear out the old tile
|
||||
if(this.tile) {
|
||||
this.tile.destroy();
|
||||
this.tile = null;
|
||||
}
|
||||
|
||||
//determine new tile bounds
|
||||
var tileBounds = this.extent.clone();
|
||||
|
||||
//determine new tile size
|
||||
var tileWidth = this.extent.getWidth() / this.map.getResolution();
|
||||
var tileHeight = this.extent.getHeight() /
|
||||
(this.map.getResolution() * this.aspectRatio);
|
||||
var tileSize = new OpenLayers.Size(tileWidth, tileHeight);
|
||||
|
||||
//determine new position (upper left corner of new bounds)
|
||||
var ul = new OpenLayers.LonLat(tileBounds.left, tileBounds.top);
|
||||
var pos = this.map.getLayerPxFromLonLat(ul);
|
||||
|
||||
this.tile = new OpenLayers.Tile.Image(this, pos, tileBounds,
|
||||
this.url, tileSize);
|
||||
this.tile.draw();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {String} newUrl
|
||||
*/
|
||||
setUrl: function(newUrl) {
|
||||
this.url = newUrl;
|
||||
this.moveTo();
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {OpenLayers.Bounds} bounds
|
||||
*/
|
||||
getURL: function(bounds) {
|
||||
return this.url;
|
||||
},
|
||||
|
||||
/** @final @type String */
|
||||
CLASS_NAME: "OpenLayers.Layer.Image"
|
||||
});
|
||||
@@ -11,6 +11,7 @@
|
||||
<li>test_Events.html</li>
|
||||
<li>test_Util.html</li>
|
||||
<li>test_Layer.html</li>
|
||||
<li>test_Layer_Image.html</li>
|
||||
<li>test_Layer_EventPane.html</li>
|
||||
<li>test_Layer_FixedZoomLevels.html</li>
|
||||
<li>test_Layer_HTTPRequest.html</li>
|
||||
|
||||
96
tests/test_Layer_Image.html
Normal file
96
tests/test_Layer_Image.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript"><!--
|
||||
var layer;
|
||||
|
||||
function test_01_Layer_Image_constructor (t) {
|
||||
t.plan( 13 );
|
||||
|
||||
var options = { chicken: 151, foo: "bar", projection: "none" };
|
||||
var layer = new OpenLayers.Layer.Image('Test Layer',
|
||||
'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
|
||||
new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
|
||||
new OpenLayers.Size(580, 288), options);
|
||||
|
||||
t.ok( layer instanceof OpenLayers.Layer.Image, "new OpenLayers.Layer.Image returns object" );
|
||||
t.eq( layer.CLASS_NAME, "OpenLayers.Layer.Image", "CLASS_NAME variable set correctly");
|
||||
|
||||
t.eq( layer.name, "Test Layer", "layer.name is correct" );
|
||||
t.ok( layer.id != null, "Layer is given an id");
|
||||
t.ok( layer.projection, "none", "default layer projection correctly set");
|
||||
t.ok( ((layer.chicken == 151) && (layer.foo == "bar")), "layer.options correctly set to Layer Object" );
|
||||
t.ok( ((layer.options["chicken"] == 151) && (layer.options["foo"] == "bar")), "layer.options correctly backed up" );
|
||||
|
||||
options.chicken = 552;
|
||||
|
||||
t.eq( layer.options["chicken"], 151 , "layer.options correctly made fresh copy" );
|
||||
|
||||
t.eq( layer.isBaseLayer, true, "Default img layer is base layer" );
|
||||
|
||||
layer = new OpenLayers.Layer.Image('Test Layer',
|
||||
'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
|
||||
new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
|
||||
new OpenLayers.Size(580, 288));
|
||||
t.ok( layer instanceof OpenLayers.Layer.Image, "new OpenLayers.Layer.Image returns object" );
|
||||
t.eq( layer.name, "Test Layer", "layer.name is correct" );
|
||||
t.ok( layer.projection == null, "default layer projection correctly set");
|
||||
t.ok( layer.options instanceof Object, "layer.options correctly initialized as a non-null Object" );
|
||||
}
|
||||
|
||||
function test_50_Layer_Image_tileTests (t) {
|
||||
t.plan(4);
|
||||
var map = new OpenLayers.Map('map');
|
||||
|
||||
layer = new OpenLayers.Layer.Image('Test Layer',
|
||||
'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
|
||||
new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
|
||||
new OpenLayers.Size(580, 288));
|
||||
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
t.eq(layer.tile.position.x,-40, "Tile x positioned correctly at maxextent");
|
||||
t.eq(layer.tile.position.y,107, "Tile y positioned correctly at maxextent");
|
||||
t.eq(layer.tile.imgDiv.src, "http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif", "URL is correct");
|
||||
map.zoomIn();
|
||||
t.eq(layer.tile.imgDiv.src, "http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif", "URL is correct");
|
||||
}
|
||||
/******
|
||||
*
|
||||
*
|
||||
* HERE IS WHERE SOME TESTS SHOULD BE PUT TO CHECK ON THE LONLAT-PX TRANSLATION
|
||||
* FUNCTIONS AND RESOLUTION AND GETEXTENT GETZOOMLEVEL, ETC
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
function test_99_Layer_Image_destroy (t) {
|
||||
t.plan( 4 );
|
||||
|
||||
var map = new OpenLayers.Map('map');
|
||||
|
||||
layer = new OpenLayers.Layer.Image('Test Layer',
|
||||
'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
|
||||
new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
|
||||
new OpenLayers.Size(580, 288));
|
||||
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
layer.destroy();
|
||||
|
||||
t.eq( layer.name, null, "layer.name is null after destroy" );
|
||||
t.eq( layer.div, null, "layer.div is null after destroy" );
|
||||
t.eq( layer.map, null, "layer.map is null after destroy" );
|
||||
t.eq( layer.options, null, "layer.options is null after destroy" );
|
||||
|
||||
}
|
||||
// -->
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="width:500px;height:500px"></div>
|
||||
<div id="map2" style="width:100px;height:100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user