[OpenLayers-Trac] Re: [OpenLayers] #2945: Using SelectFeature and
GetFeatureinfo controls together
OpenLayers
trac-20090302 at openlayers.org
Mon Nov 29 02:49:46 EST 2010
#2945: Using SelectFeature and GetFeatureinfo controls together
-------------------------------------------------------------+--------------
Reporter: thunderlion | Owner: tschaub
Type: bug | Status: new
Priority: minor | Milestone: 2.11 Release
Component: Handler.Feature | Version: 2.9
Keywords: GetFeatureInfo SelectFeature Handler.Click.down | State:
-------------------------------------------------------------+--------------
Comment(by thunderlion):
My example:
{{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="js/proj4js/proj4js-compressed.js"
type="text/javascript"></script>
<script src="js/OpenLayers/lib/OpenLayers.js"
type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>EPSG:4326</title>
<style>
html, body {
height:100%;
margin:0;
overflow:hidden;
padding:0;
}
body {
background:none repeat scroll 0 0 #e0f0d0;
color:#000000;
font:0.8em Arial, Helvetica, sans-serif;
margin:0;
padding:0;
position:relative;
z-index:0;
}
* {
font-size:100%;
margin:0;
}
.page_content {
overflow:hidden;
position:fixed;
height: 100%;
width:100%;
z-index:1;
}
.page_content_inner {
height:100%;
width:100%;
background-color: #e0f0d0;
z-index: 0;
}
.page_map {
position:relative;
height: 90%;
background-color: #eeeeee;
border: solid 1px #c4c4c4;
}
.olControlPanel .olControlNavigationItemActive {
background-color: orange;
background-image: url("style/img/pan_on.png");
}
.olControlPanel .olControlNavigationItemInactive {
background-color: blue;
background-image: url("style/img/pan_off.png");
}.olControlPanel .olControlWMSGetFeatureInfoItemActive{
background-color: blue;
background-image:
url("style/img/get_info_tool_on.png");
}
.olControlPanel .olControlWMSGetFeatureInfoItemInactive{
background-color: blue;
background-image:
url("style/img/get_info_tool_off.png");
}
</style>
<script language="JavaScript" type="text/javascript">
var map;
var layer, highlightLayer, featureLayer;
var DEFAULT_POSITION = new
OpenLayers.LonLat(37.622975,55.746071);
var MAX_EXTENT = new OpenLayers.Bounds(37,55.4,38,56.1);
var select_feature, feature_info;
function init(){
map = new OpenLayers.Map({
div: 'map',
theme:
'style/openlayers.css?rnd='+Math.floor(Math.random() * 10000000),
controls: [new
OpenLayers.Control.Navigation(),new OpenLayers.Control.PanZoomBar(),new
OpenLayers.Control.MousePosition()],
projection: new
OpenLayers.Projection('EPSG:4326'),
maxExtent: MAX_EXTENT
});
window.onunload = function (){
map.unloadDestroy();};
layer = new OpenLayers.Layer.WMS( 'My Layer',
'http://localhost/gis/proxy2.php',
{
format: 'aggpng24',
map:
'/ms4w/Apache/htdocs/map/EGKO_shp.map',
layers: 'ADDRESS'
},
{
buffer: 0,
gutter: 0,
transitionEffect: true,
maxExtent: MAX_EXTENT,
scales:
[400000,200000,100000,60000,30000,10000,5000,2000,1000,500],
projection: new
OpenLayers.Projection('EPSG:4326')
}
);
highlightLayer = new
OpenLayers.Layer.Vector("Highlighted Features", {
displayInLayerSwitcher: false,
isBaseLayer: false
}
);
featureLayer = new
OpenLayers.Layer.Vector("Features", {
displayInLayerSwitcher: false,
isBaseLayer: false,
styleMap: new OpenLayers.StyleMap({
pointRadius: "4",
fillColor: "#666666"
})
}
);
map.addLayers([layer,featureLayer,highlightLayer]);
featureLayer.events.on({
"featureselected": function(event) {
alert('selected');
},
"featureunselected": function(event) {
alert('unselected');
}
});
var feature = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(DEFAULT_POSITION.lon,DEFAULT_POSITION.lat));
featureLayer.addFeatures([feature]);
select_feature = new
OpenLayers.Control.SelectFeature(featureLayer);
map.addControl(select_feature);
select_feature.activate();
var NavigationStyle = {
title: "Map move",
displayClass: 'olControlNavigation',
documentDrag: true
};
feature_info = new
OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost/gis/proxy2.php',
title: 'Identify features by clicking',
layers: [layer],
queryVisible: true,
infoFormat: 'gml',
vendorParams: {map:
'/ms4w/Apache/htdocs/map/EGKO_shp.map'},
title: "Building info",
displayClass: 'olControlWMSGetFeatureInfo'
});
feature_info.events.register("getfeatureinfo",
this, showInfo);
feature_info.deactivate();
var panel = new OpenLayers.Control.Panel();
panel.addControls([
feature_info,
new
OpenLayers.Control.DragPan(NavigationStyle)
]);
panel.defaultControl =
panel.controls[panel.controls.length - 1];
map.addControl(panel);
map.setCenter(DEFAULT_POSITION,4);
}
function showInfo(evt) {
if (evt.features && evt.features.length) {
highlightLayer.destroyFeatures();
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
}else highlightLayer.destroyFeatures();
}
</script>
</head>
<body onload="init();">
<div id="page">
<div class="page_content">
<div class="page_content_inner">
<div id="map" class="page_map"></div>
</div>
</div>
</body>
</html>
}}}
While I was prepared this exanple, I've noticed that the problem appeares
when I put WMSGetFeatureInfo control into OpenLayers.Control.Panel.
So, this example works:
{{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="js/proj4js/proj4js-compressed.js"
type="text/javascript"></script>
<script src="js/OpenLayers/lib/OpenLayers.js"
type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>EPSG:4326</title>
<style>
html, body {
height:100%;
margin:0;
overflow:hidden;
padding:0;
}
body {
background:none repeat scroll 0 0 #e0f0d0;
color:#000000;
font:0.8em Arial, Helvetica, sans-serif;
margin:0;
padding:0;
position:relative;
z-index:0;
}
* {
font-size:100%;
margin:0;
}
.page_content {
overflow:hidden;
position:fixed;
height: 100%;
width:100%;
z-index:1;
}
.page_content_inner {
height:100%;
width:100%;
background-color: #e0f0d0;
z-index: 0;
}
.page_map {
position:relative;
height: 90%;
background-color: #eeeeee;
border: solid 1px #c4c4c4;
}
</style>
<script language="JavaScript" type="text/javascript">
var map;
var layer, highlightLayer, featureLayer;
var DEFAULT_POSITION = new
OpenLayers.LonLat(37.622975,55.746071);
var MAX_EXTENT = new OpenLayers.Bounds(37,55.4,38,56.1);
var select_feature, feature_info;
function init(){
map = new OpenLayers.Map({
div: 'map',
theme:
'style/openlayers.css?rnd='+Math.floor(Math.random() * 10000000),
controls: [new
OpenLayers.Control.Navigation(),new OpenLayers.Control.PanZoomBar(),new
OpenLayers.Control.MousePosition()],
projection: new
OpenLayers.Projection('EPSG:4326'),
maxExtent: MAX_EXTENT
});
window.onunload = function (){
map.unloadDestroy();};
layer = new OpenLayers.Layer.WMS( 'ˠ,
'http://localhost/gis/proxy2.php',
{
format: 'aggpng24',
map:
'/ms4w/Apache/htdocs/map/EGKO_shp.map',
layers: 'ADDRESS'
},
{
buffer: 0,
gutter: 0,
transitionEffect: true,
maxExtent: MAX_EXTENT,
scales:
[400000,200000,100000,60000,30000,10000,5000,2000,1000,500],
projection: new
OpenLayers.Projection('EPSG:4326')
}
);
highlightLayer = new
OpenLayers.Layer.Vector("Highlighted Features", {
displayInLayerSwitcher: false,
isBaseLayer: false
}
);
featureLayer = new
OpenLayers.Layer.Vector("Features", {
displayInLayerSwitcher: false,
isBaseLayer: false,
styleMap: new OpenLayers.StyleMap({
pointRadius: "4",
fillColor: "#666666"
})
}
);
map.addLayers([layer,featureLayer,highlightLayer]);
featureLayer.events.on({
"featureselected": function(event) {
alert('selected');
},
"featureunselected": function(event) {
alert('unselected');
}
});
var feature = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(DEFAULT_POSITION.lon,DEFAULT_POSITION.lat));
featureLayer.addFeatures([feature]);
select_feature = new
OpenLayers.Control.SelectFeature(featureLayer);
map.addControl(select_feature);
select_feature.activate();
feature_info = new
OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost/gis/proxy2.php',
title: 'Identify features by clicking',
layers: [layer],
queryVisible: true,
infoFormat: 'gml',
vendorParams: {map:
'/ms4w/Apache/htdocs/map/EGKO_shp.map'}
});
feature_info.events.register("getfeatureinfo",
this, showInfo);
map.addControl(feature_info);
feature_info.deactivate();
map.setCenter(DEFAULT_POSITION,4);
}
function showInfo(evt) {
if (evt.features && evt.features.length) {
highlightLayer.destroyFeatures();
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
}else highlightLayer.destroyFeatures();
}
function toggleWMSGetFeatureInfo(){
if(feature_info.active){
highlightLayer.destroyFeatures();
feature_info.deactivate();
}
else
feature_info.activate();
}
</script>
</head>
<body onload="init();">
<div id="page">
<div class="page_content">
<div class="page_content_inner">
<div id="map" class="page_map"></div>
<div>
<input type='radio' name='tool'
onclick='toggleWMSGetFeatureInfo();' checked='checked' />Off<br />
<input type='radio' name='tool'
onclick='toggleWMSGetFeatureInfo();' />On
</div>
</div>
</div>
</body>
</html>
}}}
--
Ticket URL: <http://trac.openlayers.org/ticket/2945#comment:4>
OpenLayers <http://openlayers.org/>
A free AJAX map viewer
More information about the Trac
mailing list