[OpenLayers-Dev] no TMS layer support in overviewmap?
ellehauge.net
mail at ellehauge.net
Wed Nov 23 05:08:00 EST 2011
Skipped content of type multipart/alternative-------------- next part --------------
// Get proper CSS file just once:
//AOP.getCss([AOP.cssDir+'AOP.css']);
/**
* AOPlugin (abbreviated AOP).
* @options: Anonymous object overwriting default properties of the AOP instance.
*/
function AOPlugin (options) {
OpenLayers.ImgPath='/i/grontmij/3rdparty/openlayers/img/';
this.count=AOP.getId();
this.mapDivId = null;
this.baseLayers = null;
this.mapCenter = null;
this.mapZoom = null;
this.wmsLayers = null;
this.selection = null;
this.selectOnLayer = null;
this.buttonPanel = new OpenLayers.Control.Panel({displayClass: 'customEditingToolbar'});
this.toolHandlers = {}; // Contains AOPtoolHandlers which link to specific tools.
this.tools = []; // Array of tools - added by each toolHandlers when they are clicked first time.
this.themes = []; // A theme is a collection of layers with info about which datasources / vector layers to query even if the rendered layer is WMS.
this.datasources = []; // Array of datasources (e.g. URLs) such as WMS, TMS, WFS etc.
this.features = []; // Array of featuretypes availabe for editing, snapping etc.
this.editableFeatures = {}; // Currently used by the AOPaddFeatureTool.
this.toolsDir = AOP.toolsDir;
this.jsDir = AOP.jsDir;
this.startExtent = new OpenLayers.Bounds (94614.08, 470284.48, 120069.44, 490444.48);
// Overwrite and add all properties from options argument:
for(var key in options){
this[key] = options[key];
}
this.events = new AOPevents(['activate','deactivate']);
// The dialogs property keeps track of the app's dialogs and gives them position and z-index:
this.dialogs = {};
this.dialogs.list = [];
this.dialogs.baseZindex = 200;
this.dialogs.lastPosition = {left: '7em', top: '1em'};
this.dialogs.getPosition = function(){
var left = (parseInt(this.lastPosition.left)+1) + 'em';
var top = (parseInt(this.lastPosition.top)+1) + 'em';
this.lastPosition = {left: left, top: top};
return this.lastPosition;
};
this.dialogs.addDialog = function(newDialog){
var _this=this;
this.list.push(newDialog);
newDialog.setPosition(this.getPosition());
var focus = function(){ _this.bringToFront(newDialog); };
newDialog.events.bind('show', focus);
newDialog.events.bind('focus', focus);
};
this.dialogs.bringToFront = function(frontDialog){
var _this=this;
$.each(this.list, function(i,dialog){
dialog.setZindex( _this.baseZindex+i );
});
frontDialog.setZindex(this.baseZindex + this.list.length);
};
OpenLayers.ProxyHost= '/cgi-bin/proxy.cgi?url='; // Do we use this?
this.initMap();
this.addDefaultBaseLayers();
this.apexStringAddThemes();
this.addUserLayers();
this.addStandardControls();
if (!this.map.getCenter()) {
this.map.zoomToExtent(this.startExtent);
}
}; //AOPlugin
AOPlugin.prototype.getVisibleVectorLayers = function(){
var vectorLayers=this.map.getLayersByClass('OpenLayers.Layer.Vector');
var arr=[];
$.each(vectorLayers, function(idx,layer){
if(layer.visibility){ arr.push(layer); }
});
return arr;
};
/**
* Voegt de standaard controls toe aan de kaart op basis van een input parameter.
* @param pSender De klasse die deze functie aanroept, dit moet de klasse zijn die de kaart (map) beheerd.
* @param pSelectedControls Array met standaard controls welke getoond moeten worden (PanZoomBar;LayerSwitcher;OverviewMap)
*/
AOPlugin.prototype.addStandardControls = function() {
var controls = [];
var layerSwitcherControl = new OpenLayers.Control.LayerSwitcher();
layerSwitcherControl.id = 'LayerSwitcher_'+this.count;
controls.push(layerSwitcherControl);
controls.push(new OpenLayers.Control.PanZoomBar());
controls.push(
new OpenLayers.Control.OverviewMap({
layers : [ this.map.getLayer('AOPoverviewLayer') ]
//, minRatio : 64
//, maxRatio : 128
})
);
controls.push(new OpenLayers.Control.MousePosition());
controls.push(new OpenLayers.Control.MouseDefaults());
controls.push(new OpenLayers.Control.Permalink());
this.map.addControls(controls);
// Controls in this.buttonPanel:
var navigationControl = new OpenLayers.Control.Navigation({ displayClass: 'olControlPan' , title: 'Pan/Zoom' });
this.map.addControls(navigationControl);
//this.buttonPanel.defaultControl = navigationControl;
this.map.addControl(this.buttonPanel);
$('.baseLbl').text('Achtergrond');
$('.dataLbl').text('Lagen');
}; //addStandardControls
/**
* Maakt een map-object met default instellingen voor extent, resolutie en zoomlevels
* @param pSender De klasse die deze functie aanroept, dit moet de klasse zijn die de region id weet.
*/
AOPlugin.prototype.initMap = function() {
this.map = new OpenLayers.Map(this.mapDivId+'_olmap', {
//maxExtent: new OpenLayers.Bounds(97500, 469600, 118600, 489800)
maxExtent: new OpenLayers.Bounds (80340.8, 456978.88, 131251.52, 497352.64)
//, resolutions: [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.8, 2, 3, 7, 15, 30]
, resolutions: [53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21] // Inspired by BRT TMS service
, maxResolution: 30.00
, minResolution: 0.20
, numZoomLevels: 20
, units: 'm'
, projection: new OpenLayers.Projection('EPSG:28992')
, displayProjection: new OpenLayers.Projection('EPSG:28992')
, controls: []
//, allOverlays : true
, Z_INDEX_BASE : {
BaseLayer : 1 ,
Control : 90 ,
Feature : 50 ,
Overlay : 20 ,
Popup : 100
}
});
};
/**
* Attach an default base layers to the map.
*/
AOPlugin.prototype.addDefaultBaseLayers = function() {
var matrixIds = [];
for(var i=0; i<15; ++i) { matrixIds[i]='EPSG:28992:'+i }
var resolutions = [3440.64, 1720.32, 860.16, 430.08, 215.04, 107.52, 53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21]
var brtLayer = new OpenLayers.Layer.TMS(
'BRT'
, 'http://geodata.nationaalgeoregister.nl/tiles/service/tms/'
, { layername: 'brtachtergrondkaart'
, isBaseLayer: true
, displayInLayerSwitcher: true
, type: 'png8'
, style: '_null'
, matrixSet: 'EPSG:28992'
, matrixIds: matrixIds
, tileOrigin: new OpenLayers.LonLat(-285401.92,22598.08)
, serverResolutions: resolutions
, tileFulExtent: new OpenLayers.Bounds (-285401.92, 22598.08, 595401.9199999999, 903401.9199999999)
}
);
brtLayer.id='AOPbrtLayer';
var overviewLayer = brtLayer.clone();
overviewLayer.displayInLayerSwitcher=false;
overviewLayer.name='Overview Layer';
overviewLayer.id='AOPoverviewLayer';
overviewLayer.resolutions = [53.76, 26.88]
var emptyBaseLayer = new OpenLayers.Layer( 'Geen' , {
visibility: false ,
isBaseLayer: true ,
displayInLayerSwitcher: true
});
this.map.addLayers([brtLayer, overviewLayer, emptyBaseLayer]);
this.map.setLayerIndex(overviewLayer, 0);
this.map.setLayerIndex(emptyBaseLayer, 1);
this.map.setLayerIndex(brtLayer, 2);
};
/**
* Add user layers to the map.
*/
AOPlugin.prototype.addUserLayers = function() {
// User layer - for temporary geometries shared between tools.
// Create styles and layer for user objects:
var userLayerStyleMap = new OpenLayers.StyleMap({
'select': new OpenLayers.Style({
graphicName: 'circle' ,
pointRadius: 3 ,
fillOpacity: 0.6 ,
fillColor: '#006666' , //grontmij blauw
strokeColor: '#000033' ,
strokeWidth: 3
}) ,
'default': new OpenLayers.Style({
graphicName: 'circle' ,
pointRadius: 3 ,
fillOpacity: 0.6 ,
fillColor: '#FF9933' , //grontmij rood
strokeColor: '#FF0000' ,
strokeWidth: 3
})
});
this.userLayer = new OpenLayers.Layer.Vector( 'User Layer' , { //id: AOPlugin.ID_SELECTIONLAYER,
styleMap: userLayerStyleMap ,
visibility: true ,
isBaseLayer: false ,
displayInLayerSwitcher: false
});
// For invisible features - e.g. for snapping.
// Create styles and layer for invisible features - e.g. for snapping etc:
var invisibleLayerStyleMap = new OpenLayers.StyleMap({
'default': new OpenLayers.Style({
'fillColor' : '#FF0000'
, 'fillOpacity' : 0.1
, 'strokeColor' : '#FF0000'
, 'strokeWidth' : 1
, 'strokeOpacity' : 0.6
, 'pointRadius' : 1
}) ,
'select': new OpenLayers.Style({
'fillColor' : '#FF0000'
, 'fillOpacity' : 0.1
, 'strokeColor' : '#FF0000'
, 'strokeWidth' : 1
, 'strokeOpacity' : 0.6
, 'pointRadius' : 1
})
});
this.invisibleLayer = new OpenLayers.Layer.Vector('Invisible Layer', {
styleMap: invisibleLayerStyleMap ,
visibility: true ,
isBaseLayer: false ,
displayInLayerSwitcher: false
});
this.map.addLayers([ this.invisibleLayer, this.userLayer]); // this.workingLayer,
}; //addUserLayers
/**
* @themeOptions {Object}: AOPtheme options as argument.
* Returns the theme object.
*/
AOPlugin.prototype.addTheme = function(themeOptions){
var themeObj = new AOPtheme(themeOptions);
themeObj.parentObject=this;
this.themes.push(themeObj);
this.map.addLayer(themeObj.layers.wms);
if(themeObj.visible) {
themeObj.show();
}
return themeObj;
};
/**
* @themeArr {Array}: An array of theme options as arguement.
* Returns an array of theme objects.
*/
AOPlugin.prototype.addThemes = function(themeArr){
var arr = [];
for (var l=themeArr.length, i=0; i<l; i++){
arr.push( this.addTheme(themeArr[i]) );
}
return arr;
};
/**
* This method adds themes from the Apex configuration parameters.
*/
AOPlugin.prototype.apexStringAddThemes = function(){
var _this=this;
// Loop through themeStrings and add the themes:
var addThemes = function(themeStrArr, isBaseLayer, isEditable) {
$.each(themeStrArr, function(i, str) {
var themeArray = str.split('|');
var themeOptions =
{ name : themeArray[3] ,
isBaseLayer : isBaseLayer ,
dataSources : {
wms :
{ url : themeArray[2] ,
layers : themeArray[3] ,
format : 'image/png' ,
transparent : true
} ,
wfs : false
} ,
namespace : themeArray[0] ,
gemeente : themeArray[1]
};
var theme = _this.addTheme(themeOptions);
if(isEditable) {
var key=themeArray[3].toLowerCase();
_this.editableFeatures[key] = {
name : themeArray[3] ,
geometryTypes : AOP.Geom.getGeometryTypeFromServiceName(key) ,
layer : theme.layers.wms
};
}
}); // Loop through themeStrings and add the themes
};
var featureThemeStrings = this.wmsLayers.split(';');
if ($.trim(this.wmsLayers)!='' && featureThemeStrings.length>0)
{ addThemes(featureThemeStrings, false, true); }
//var baseThemeStrings = this.baseLayers.split(';');
//'http://bor.grontmij.nl/haarlemmermeer|haarlemmermeer|http://borat01.geoinfo.grontmij.net:8080/geoserver/wms|Wegvakonderdelen'
//addThemes(baseThemeStrings, true, false);
};
/**
* This function deactivates tools registered in the this.tools array.
* @args {Object}: Containing the options below.
* @force {Boolean}: If provided and true, all tools will be deactivated. Otherwise only tools
* with the property toolConflict=true will be deactivated.
* @exceptTool {toolInstance}: If a tool is provided, the given tool will not be deactivated.
*/
AOPlugin.prototype.deactivateTools = function(args) {
// Set method options and default values:
var options = {}; options.force = false; options.exceptTool = null;
// Override options default values with argument values:
for(var key in args){ options[key]=args[key]; }
// Loop through this.tools and deactivate each one if it is not passed in as
// option.exceptTool and if options.force is false:
$.each(this.tools , function(i,tool){
if(tool!=options.exceptTool) {
if(tool.toolConflict || options.force) { tool.deactivate(); }
}
});
};
/**
* @handlerOptions {Object}: AOPtoolHandler options as argument.
*/
AOPlugin.prototype.addTool = function(handlerOptions) {
var _this=this;
var toolHandler = new AOPtoolHandler(handlerOptions);
this.toolHandlers[toolHandler.id]=toolHandler;
toolHandler.parentObject=this;
AOP.getCss(toolHandler.cssFiles);
// If the toolHandler has a button, add it to the panel and assign a handler to it.
// If there is no button, just load the javascript files and run the 'toolInit' directly.
if(toolHandler.button){
this.buttonPanel.addControls([toolHandler.button]);
toolHandler.buttonDiv=$('.'+toolHandler.displayClass+'ItemInactive')[0];
// This handler must be run only the first time the button is clicked.
var firstClick = function(event){
event.data={}; event.data.toolHandler=toolHandler;
require(toolHandler.jsFiles, function(){
eval(toolHandler.toolInit);
});
$(toolHandler.buttonDiv).unbind('click', firstClick);
};
$(toolHandler.buttonDiv).bind('click', firstClick);
} else {
require(toolHandler.jsFiles, function(){
eval(toolHandler.toolInit);
});
}
};
/**
* @handlerArr {Array}: An array of AOPtoolHandler options as argument.
*/
AOPlugin.prototype.addTools = function(handlerArr) {
for(var l=handlerArr.length, i=0; i<l; i++){
this.addTool(handlerArr[i]);
}
}
/**
* AOPtoolHandler Class.
* @options {Object} is an anonymous object overwriting the default properties of the AOPtoolHandler instance.
* As a minimum supply the following properties in @options:
* @id {String}: Valid JS object property name. You will find a reference to the toolHandler in the
* AOP instance, e.g. "myAOP.tools.<myPassedInId>". Value must be unique!
* @jsFiles {Array} of {String}s: JS filenames on which the tool depends, name include suffix (e.g. .js),
* by default in the AOP.jsDir directory. If other directory, pass in "dir" parameter.
* These JS files will be loaded only first time the button is clicked and only if they have
* not already been loaded.
* @cssFiles {Array} of {String}s: CSS filenames on which the tool depends. Will only load
* first time, but will load whether or not the same file has been loaded before.
* @title {String}: Title/tooltip to display on button hover. The CSS file may be nessecary to
* render the button. Otherwise it is more effeciant to load it from the JS file.
* @displayClass {String}: Valid css class name for the button. MUST BE UNIQE! Two buttons may
* never have the same displayClass! This is due to a flaw in OpenLayers which produces buttons
* without unique id's. Hence, the only way to grab a button with jQuery is by class name.
* @toolInit {String}: Initial javescript expression to be called to instantiate the tool and add
* it to the map. This is the function which will be called
* when the button is clicked and the file is loaded. It will have
* one argument {Event} which carries a reference to the toolHandler and the AOP instance with
* "event.data.toolHandler" and "event.data.toolHandler.parentObject". Make sure that you
* add your tool object to "event.data.toolHandler.tool" once it is initialised in the
* tool's @toolInit function.
* See AOPsampleTool.js for an example.
*/
function AOPtoolHandler(options){
this.parentObject = null;
this.count=AOP.getId();
this.id='tool_'+this.count;
this.title='Sample Tool';
this.fileName='AOPsampleTool.js';
this.jsFiles=[];
this.cssFiles=[];
this.dir=AOP.toolsDir;
this.displayClass='AOPdefaultTool';
this.toolInit = null;
this.tool = null;
this.button = true;
// Overwrite properties with argument properties:
for(var key in options){
this[key] = options[key];
}
for(var l=this.jsFiles.length, i=0; i<l; i++){
this.jsFiles[i]=this.dir+this.jsFiles[i];
}
for(var l=this.cssFiles.length, i=0; i<l; i++){
this.cssFiles[i]=this.dir+this.cssFiles[i];
}
this.buttonArgs = {
displayClass: this.displayClass ,
title: this.title
};
if(this.button) { this.button = new OpenLayers.Control.Button(this.buttonArgs); }
}
/**
* This method registers the new tool when it is loaded. Additionally, it adds a
* handler to deactivate all other tools, when a tool is activated.
* NB: All tools must have an events property with minimum AOPevents(['activate','deactivate']),
* they must all have a deactivate() method and they must trigger the 'activate' event
* when activated.
*/
AOPtoolHandler.prototype.addTool = function(toolInstance){
var _this=this;
this.tool=toolInstance;
this.parentObject.tools.push(toolInstance);
if(toolInstance.toolConflict){
this.tool.events.bind('activate', function(){
_this.parentObject.deactivateTools({exceptTool:_this.tool});
});
}
};
More information about the Dev
mailing list