个人中心
gpt4 book ai didi

javascript - Google map 上的 Openlayers WMS getfeatureinfo 问题

转载 作者：塔克拉玛干 更新时间：2023-11-02 23:05:35 27 4
gpt4 key购买 nike

我正在尝试在 Google map 上渲染 WMS 图层，它的工作正常，但 getfeatureinfo 事件除外。当我打开 Geoserver 并尝试单击 WMS 功能时，我可以获得功能信息。但是在我的页面中，我可以看到空的弹出窗口。我认为问题出在 Google map 投影上。

代码:

function init(){
    var gmap = new OpenLayers.Layer.Google("Google Streets", {
    visibility: false});
    var options = {
        controls : [],
        units : "m",
        numZoomLevels : 22,
        maxResolution : 156543.0339,
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,
                20037508.34, 20037508.34)
    };
    var map = new OpenLayers.Map('map', options);
    var layer1 = new OpenLayers.Layer.WMS("Layer1 - Tiled",      
     "http://localhost:8090/geoserver/Layers/wms", {
                layers : "Layer1",
                transparent : "true",
                format : "image/png",
                srs : 'EPSG:4326', 
                zoomOffset : 3,
            }, {
                isBaseLayer : false
            });
    map.addLayer(gmap);
    map.addLayer(layer1);
    info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: 'http://localhost:8090/geoserver/Layers/wms', 
        title: 'Identify features by clicking',
        layers: [layer1],
        infoFormat: 'text/html',
        queryVisible: true,
        eventListeners: {
            getfeatureinfo: function(event) {
                map.addPopup(new OpenLayers.Popup.FramedCloud(
                    "chicken", 
                    map.getLonLatFromPixel(event.xy),
                    null,
                    event.text,
                    null,
                    true
                ));
            }
        }
    });
    map.addControl(info);
    info.activate();
    map.setCenter(new OpenLayers.LonLat(-104.949, 40.924).transform(
    new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),5);
     map.addControl(new OpenLayers.Control.Navigation());
}

<body onload="init()">
 <div style="visibility: visible; height: 100%;" id="map"></div>
</body>

对于谷歌地图 (EPSG:900913) 和 WMS 图层 (EPSG:4326)，有没有办法获取特征信息？我需要更改代码吗？请分享您的宝贵想法。

帮助将不胜感激:)

最佳答案 

function fromLatLngToPoint(latLng, map) {
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
    var scale = Math.pow(2, map.getZoom());
    var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
    return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
}


function getRadius(zoom) {
    var radius_px = 0.40/2
    var constMetersDegress = 1000; // TODO Verifiy

    //zoom <-> m/px = http://timwhitlock.info/blog/2010/04/google-maps-zoom-scales/
    var scaled_zooms = { 
        22: 0.02,
        21: 0.04,
        20: 0.09,
        19: 0.19,
        18: 0.37,
        17: 0.74,
        16: 1.48,
        15: 3,
        14: 6,
        13: 12,
        12: 24,
        11: 48,
        10: 95,
        9: 190,
        8: 378,
        7: 752,
        6: 1485,
        5: 2909,
        4: 5540,
        3: 10064,
        2: 16355,
        1: 21282,
        0: 30000
    }

    var radius_meters = radius_px * scaled_zooms[zoom];
    var radius_degrees = radius_meters / constMetersDegress;
    return radius_degrees;
}



function getFeatureInfoURL(latLng){
    var lat = parseFloat(latLng.lat());
    var lng = parseFloat(latLng.lng());

    //console.info('------------------------------')
    var radius_degrees = getRadius(map.getZoom());
    var buffer_sw_y_dd = lat-radius_degrees
    var buffer_sw_x_dd = lng-radius_degrees
    var buffer_ne_y_dd = lat+radius_degrees
    var buffer_ne_x_dd = lng+radius_degrees
    //console.info('bbox dd',buffer_sw_x_dd+','+buffer_sw_y_dd+','+buffer_ne_x_dd+','+buffer_ne_y_dd)

    var buffer_sw_dd = new google.maps.LatLng( buffer_sw_y_dd, buffer_sw_x_dd )//decimal degrees
    var buffer_ne_dd = new google.maps.LatLng( buffer_ne_y_dd, buffer_ne_x_dd )//decimal degrees

    var buffer_sw_px = fromLatLngToPoint(buffer_sw_dd, map);//pixels
    var buffer_ne_px = fromLatLngToPoint(buffer_ne_dd, map);//pixels
    //console.info('buffer_sw_px',buffer_sw_px,'buffer_ne_px',buffer_ne_px)

    var buffer_width_px = ( Math.abs( buffer_ne_px.x - buffer_sw_px.x ) ).toFixed(0);
    var buffer_height_px = ( Math.abs( buffer_ne_px.y - buffer_sw_px.y ) ).toFixed(0);
    //console.info('buffer_width_px',buffer_width_px, 'buffer_height_px',buffer_height_px)

    var center_x_px = (buffer_width_px / 2).toFixed(0);
    var center_y_px = (buffer_height_px / 2).toFixed(0);
    //console.info('center_x_px',center_x_px,'center_y_px',center_y_px)
    //console.info('------------------------------')


    var url = this.baseUrl;
    url +='&SERVICE=WMS';
    url +='&VERSION=1.1.0';
    url +='&REQUEST=GetFeatureInfo';
    url +='&TRANSPARENT=true';
    url +='&QUERY_LAYERS='+layerName;
    url +='&STYLES';
    url +='&LAYERS='+layerName;
    url +='&INFO_FORMAT=text/html';
    url +='&SRS=EPSG:4326';
    url +='&FEATURE_COUNT=10';
    url +='&WIDTH='+buffer_width_px;
    url +='&HEIGHT='+buffer_height_px;
    url +='&Y='+center_y_px;
    url +='&X='+center_x_px;
    url +='&BBOX='+buffer_sw_x_dd+','+buffer_sw_y_dd+','+buffer_ne_x_dd+','+buffer_ne_y_dd;


    return url;
};

希望对你有帮助

关于javascript - Google map 上的 Openlayers WMS getfeatureinfo 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23857569/

27 4 0
文章推荐： android - 使用错误调用操作码的 Dalvik 转换
文章推荐： c++ - static_cast void* char* 与 static_cast void** char**
文章推荐： android - phonegap-plugin-facebook-connect : no callback function after FB. 登录
文章推荐： c++ - std::greater 未在 MSVC2012 中定义
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com