openlayers GetFeatureInfo 请求示例 +虚拟地球/谷歌

发布于 2024-11-15 05:01:10 字数 5054 浏览 4 评论 0原文

我只是从 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

流云如水 2024-11-22 05:01:10

我不确定你遇到了什么问题。

<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>

然后

function load() {
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            numZoomLevels: 22,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                             20037508, 20037508.34)
        };

    var veroad = new OpenLayers.Layer.VirtualEarth(
            "Bing",
            {isBaseLayer: true, 'sphericalMercator': true}
        );

那些 WMS 数据似乎不正确,除了水,它与虚拟地球地图映射正常。

我的问题是,如果我从与提供页面的服务器不同的服务器请求功能信息,代理会报告错误。

I am not sure what problem you are having.

<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>

also

function load() {
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            numZoomLevels: 22,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                             20037508, 20037508.34)
        };

Then,

    var veroad = new OpenLayers.Layer.VirtualEarth(
            "Bing",
            {isBaseLayer: true, 'sphericalMercator': true}
        );

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文