JSFと.xhtmlファイルでオープンレイヤーを実行

私はjsfプロジェクトを作成し、http://docs.openlayers.org/library/introduction.htmlから次の例を持っていますが、これはxhtmlファイルとして実行されず、htmlファイルとして実行されます。 jsfと.xhtmlを使って実行する方法。それはhtmlでも実行されます。放火犯を使用してブラウザでJSFと.xhtmlファイルでオープンレイヤーを実行

 <?xml version="1.0" encoding="UTF-8"?> 
<!-- 
To change this template, choose Tools | Templates 
and open the template in the editor. 
--> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> 
    <h:head> 
     <script src="http://openlayers.org/api/OpenLayers.js"></script> 

    </h:head> 
    <h:body> 
     <div style="width:100%; height:100%" id="map"></div> 
     <script defer="defer" type="text/javascript"> 
     var map = new OpenLayers.Map('map'); 
     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); 
     var dm_wms = new OpenLayers.Layer.WMS(
      "Canadian Data", 
      "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", 
      { 
       layers: "bathymetry,land_fn,park,drain_fn,drainage," + 
         "prov_bound,fedlimit,rail,road,popplace", 
       transparent: "true", 
       format: "image/png" 
      }, 
      {isBaseLayer: false} 
     ); 
     map.addLayers([wms, dm_wms]); 
     map.zoomToMaxExtent(); 
     </script> 
    </h:body> 
</html>

結果：

<head> 
<body> 
<div style="width: 100%; height: 100%; " id="map" class="olMap"> 
<div id="OpenLayers.Map_2_OpenLayers_ViewPort" style="position: relative; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; " class="olMapViewport olControlDragPanActive olControlZoomBoxActive olControlPinchZoomActive olControlNavigationActive"> 
<div id="OpenLayers.Map_2_events" style="position: absolute; width: 100%; height: 100%; z-index: 999; "> 
<div id="OpenLayers.Control.PanZoom_5" style="position: absolute; left: 4px; top: 4px; z-index: 1004; " class="olControlPanZoom olControlNoSelect" unselectable="on"> 
<div id="OpenLayers.Control.ArgParser_6" style="position: absolute; z-index: 1004; " class="olControlArgParser olControlNoSelect" unselectable="on"/> 
<div id="OpenLayers.Control.Attribution_7" style="position: absolute; z-index: 1004; " class="olControlAttribution olControlNoSelect" unselectable="on"/> 
</div> 
</div> 
<script defer="defer" type="text/javascript"> 

var map = new OpenLayers.Map('map'); 
     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); 
     var dm_wms = new OpenLayers.Layer.WMS(
      "Canadian Data", 
      "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", 
      { 
       layers: "bathymetry,land_fn,park,drain_fn,drainage," + 
         "prov_bound,fedlimit,rail,road,popplace", 
       transparent: "true", 
       format: "image/png" 
      }, 
      {isBaseLayer: false} 
     ); 
     map.addLayers([wms, dm_wms]); 
     map.zoomToMaxExtent(); 
</script> 
</body> 
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/> 
</html>

出典

2012-05-01 kinkajou

JavaScriptコードをインラインで実行しています。これは、Webブラウザが特定のコード行に遭遇すると、JavaScriptコードがであり、すぐにが実行されることを意味します。その時点で、<div id="map">はまだHTML DOMツリーには存在しません！ブラウザは、上から下へHTML/JSコードを解析して実行します。

の後にそのJavaScriptコードを実行して、<div id="map">が作成され、HTML DOMツリーに追加されている必要があります。

移動にマークアップで<script>ブロック<div id="map">後：

<h:head> <script src="http://openlayers.org/api/OpenLayers.js"></script> </h:head> <body> <div style="width:100%; height:100%" id="map"></div> <script type="text/javascript"> var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); </script> </body>

使用window.onloadは、ブラウザが作成完了しただけでコードを実行するには、次の方法、それを達成できますHTML DOMツリー

<h:head> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> window.onload = function() { var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); }; </script> </h:head>

この問題は、JSFやXHTMLとは関係ありません。基本的なHTML/JSです。

出典

2012-05-01 13:12:14 BalusC

非常に非常に非常に良い答え:)ありがとう、なぜHTMLとxhtmlのコードの実行の違いは？ – kinkajou

JSF/FaceletsはWebサーバーで実行され、HTML/JSを生成し、Webブラウザで実行されます。物理的に全く異なる2つの環境で、HTTPによって接続されています。 – BalusC

私は、あなたが変更したコードをテストしました。それは、htmlの同じコードがjsfタグなしのマップを生成している間、マップを生成しません。私は火かき棒を使って変更を見ることができます。スクリプトは正常に実行されましたが、マップは表示されませんでしたか？ – kinkajou

は、私は同じ問題をint実行しますが、私のextentiongはの.jspxました。私はこれを試してみたいです。

<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"> 

<head> 
<script src="http://piturralhpxp:1983/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
    //<![CDATA[ 
      var map; 
      etc .... 
      //]]> 
     </script> 
     </head> 
     <f:view>   
     <body onload="init()"> 

     </body> 
</f:view> 
</html>

出典

2012-05-01 10:43:58 IturPablo

@lturPabloは私のために働いていませんでした:( – kinkajou

@BalusCが正しい。 OpenLayersのバグのようです。 <！DOCTYPE html >宣言が追加されたときにJSFページがクラッシュする

私はそれを削除し、とにかくうまくいった。私はそれがベストプラクティスではないことを認識していますが、これを達成するために私が見つけた唯一の方法です。試してみる。

出典

2012-05-29 14:35:08 elcocolio

JSFと.xhtmlファイルでオープンレイヤーを実行

答えて

関連する問題