2011-06-09 50 views
2

只是我複製了http://openlayers.org/dev/examples/getfeatureinfo-control.html的示例代碼。openlayers GetFeatureInfo請求示例+虛擬地球/谷歌

我用geoserver來運行它,並且所有的東西都像互聯網版本一樣正常工作,現在我試圖用虛擬地球地圖來改變政治基礎層。

由於虛擬地球和谷歌地圖的性質,我已經設置球形墨卡託爲真,但之後,高亮功能不再工作。

我想我發現問題在哪裏,我創建的矢量和其餘的圖層和開放層不知道如何合併它們之間存在不同的投影。 有沒有辦法將我的矢量圖從(我認爲)epsg:4326轉換爲epsg:900913(球形墨卡託)?

下面我的代碼:

<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> 
+1

爲什麼當你不使用Google地圖數據時,你的EPSG矢量圖層爲900913? – 2011-06-10 07:55:29

回答

0

我不知道你有什麼問題。

<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數據似乎並不正確,除了水,它映射與Virtual Earth地圖確定。

我的問題是,如果我從服務頁面的服務器請求FeatureInfo,代理會報告錯誤。