openlayers GetFeatureInfo 请求示例 +虚拟地球/谷歌
我只是从 http://openlayers.org/dev/examples/getfeatureinfo- 复制了示例代码control.html。
我使用 geoserver 来运行它,一切都像互联网版本一样正常工作,现在我尝试用虚拟地球地图更改政治基础层。
由于虚拟地球和谷歌地图的性质,我已将球形墨卡托设置为 true,但此后突出显示功能不再起作用。
我想我发现了问题所在,我正在创建的向量与其余层之间存在不同的投影,并且 openlayers 不知道如何合并它们。 有没有办法将我的矢量图层从(我认为)epsg:4326 转换为 epsg:900913(sherical Mercator)?
下面是我的代码:
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style>
.opmap
{
height:500px;
width:550px;
}
/* The map and the location bar */
#map {
clear: both;
position: relative;
width: 400px;
height: 450px;
border: 1px solid black;
}
.mypopuphtml{
padding-left:5px;
padding-top:0px;
padding-bottom:0px;
padding-right:5px;
font-family:Arial;
font-size:8pt;
background-color:white;
}
</style>
<script defer="defer" type="text/javascript">
var map, infocontrols, water, highlightlayer;
function load() {
var options = {
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
//maxExtent: new OpenLayers.Bounds(11.1373,46.6196,11.2117,46.6919),
numZoomLevels: 19,
units: 'degrees',
projection: new OpenLayers.Projection("EPSG:4326"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
};
map = new OpenLayers.Map('map', options);
/*
var political = new OpenLayers.Layer.WMS("State Boundaries",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
{isBaseLayer: true}
);
*/
// setup tiled layer
var blConfig = {'sphericalMercator': true};
var ve = new OpenLayers.Layer.VirtualEarth( "Bing", blConfig);
var roads = new OpenLayers.Layer.WMS("Roads",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
var cities = new OpenLayers.Layer.WMS("Cities",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
water = new OpenLayers.Layer.WMS("Bodies of Water",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:900913")
}
);
infoControls = {
click: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms',
title: 'Identify features by clicking',
layers: [water],
queryVisible: true
}),
hover: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms',
title: 'Identify features by clicking',
layers: [water],
hover: true,
// defining a custom format options here
formatOptions: {
typeName: 'water_bodies',
featureNS: 'http://www.openplans.org/topp'
},
queryVisible: true
})
}
//map.addLayers([political, roads, cities, water, highlightLayer]);
map.addLayers([ve, roads, cities, water, highlightLayer]);
for (var i in infoControls) {
infoControls[i].events.register("getfeatureinfo", this, showInfo);
map.addControl(infoControls[i]);
}
map.addControl(new OpenLayers.Control.LayerSwitcher());
infoControls.click.activate();
map.zoomToMaxExtent();
}
function showInfo(evt) {
if (evt.features && evt.features.length) {
highlightLayer.destroyFeatures();
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
} else {
$('responseText').innerHTML = evt.text;
}
}
function toggleControl(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function toggleFormat(element) {
for (var key in infoControls) {
var control = infoControls[key];
control.infoFormat = element.value;
}
}
function toggleLayers(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == 'Specified') {
control.layers = [water];
} else {
control.layers = null;
}
}
}
// function toggle(key
</script>
Simply I copied the example code from http://openlayers.org/dev/examples/getfeatureinfo-control.html.
I used geoserver to run it and everything is working properly like the internet version, now I tried to change the political baselayer with a virtual earth map.
Due to the nature of virtual earth and google map, I've set spherical mercator to true but after that the highlight feature doesn't work anymore.
I think I spotted where is the the problem, there are differents projection between the vector I'm creating and the rest of the layers and openlayers doesn't know how to merge them.
Is there a way to transform my vector layer from (I think) epsg:4326 to epsg:900913 (sherical mercator)?
Below my code:
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style>
.opmap
{
height:500px;
width:550px;
}
/* The map and the location bar */
#map {
clear: both;
position: relative;
width: 400px;
height: 450px;
border: 1px solid black;
}
.mypopuphtml{
padding-left:5px;
padding-top:0px;
padding-bottom:0px;
padding-right:5px;
font-family:Arial;
font-size:8pt;
background-color:white;
}
</style>
<script defer="defer" type="text/javascript">
var map, infocontrols, water, highlightlayer;
function load() {
var options = {
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
//maxExtent: new OpenLayers.Bounds(11.1373,46.6196,11.2117,46.6919),
numZoomLevels: 19,
units: 'degrees',
projection: new OpenLayers.Projection("EPSG:4326"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
};
map = new OpenLayers.Map('map', options);
/*
var political = new OpenLayers.Layer.WMS("State Boundaries",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
{isBaseLayer: true}
);
*/
// setup tiled layer
var blConfig = {'sphericalMercator': true};
var ve = new OpenLayers.Layer.VirtualEarth( "Bing", blConfig);
var roads = new OpenLayers.Layer.WMS("Roads",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
var cities = new OpenLayers.Layer.WMS("Cities",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
water = new OpenLayers.Layer.WMS("Bodies of Water",
"http://localhost:8080/geoserver/wms",
{'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
isBaseLayer: false,
projection: new OpenLayers.Projection("EPSG:900913")
}
);
infoControls = {
click: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms',
title: 'Identify features by clicking',
layers: [water],
queryVisible: true
}),
hover: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/wms',
title: 'Identify features by clicking',
layers: [water],
hover: true,
// defining a custom format options here
formatOptions: {
typeName: 'water_bodies',
featureNS: 'http://www.openplans.org/topp'
},
queryVisible: true
})
}
//map.addLayers([political, roads, cities, water, highlightLayer]);
map.addLayers([ve, roads, cities, water, highlightLayer]);
for (var i in infoControls) {
infoControls[i].events.register("getfeatureinfo", this, showInfo);
map.addControl(infoControls[i]);
}
map.addControl(new OpenLayers.Control.LayerSwitcher());
infoControls.click.activate();
map.zoomToMaxExtent();
}
function showInfo(evt) {
if (evt.features && evt.features.length) {
highlightLayer.destroyFeatures();
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
} else {
$('responseText').innerHTML = evt.text;
}
}
function toggleControl(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function toggleFormat(element) {
for (var key in infoControls) {
var control = infoControls[key];
control.infoFormat = element.value;
}
}
function toggleLayers(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == 'Specified') {
control.layers = [water];
} else {
control.layers = null;
}
}
}
// function toggle(key
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不确定你遇到了什么问题。
然后
,
那些 WMS 数据似乎不正确,除了水,它与虚拟地球地图映射正常。
我的问题是,如果我从与提供页面的服务器不同的服务器请求功能信息,代理会报告错误。
I am not sure what problem you are having.
also
Then,
Those WMS data do not seem to be correct, except for the water, which maps OK with Virtual Earth map.
My problem is that the Proxy reports errors if I request FeatureInfo from a server different from the one which served the page.