使用JSF和.xhtml文件运行开放图层 [英] Running open layer with JSF and .xhtml file

问题描述

我制作了一个jsf项目，并从 http://docs.openlayers.org /library/introduction.html ，但作为一个xhtml文件，这将不会运行，并将作为一个html文件运行。如何使用jsf和.xhtml运行它。它使用html运行。

 <？xml version =1.0encoding =UTF-8？> 
 <！ -  
要更改此模板，请选择工具|模板
并在编辑器中打开模板。 
  - > 
<！DOCTYPE html> 
< html xmlns =http://www.w3.org/1999/xhtmlxmlns：h =http://java.sun.com/jsf/html> 
< h：头> 
< script src =http://openlayers.org/api/OpenLayers.js>< / script> 
 
< / h：head> 
< h：body> 
< div style =width：100％; height：100％id =map>< / div> 
< script defer =defertype =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，
 { 
图层：水深，land_fn，park，drain_fn，drainage+ 
prov_bound，fedlimit，rail，road，popplace，
透明：true，
格式：image / png
}，
 {isBaseLayer：false} 
）; 
 map.addLayers（[wms，dm_wms]）; 
 map.zoomToMaxExtent（）; 
< / script> 
< / h：body> 
< / html> 
  

浏览器使用firebug的结果：

 < HEAD> 
< body> 
< div style =width：100％; height：100％;id =mapclass =olMap> 
< div id =OpenLayers.Map_2_OpenLayers_ViewPortstyle =position：relative; overflow-x：hidden; overflow-y：hidden; width：100％; height：100％;class =olMapViewport olControlDragPanActive olControlZoomBoxActive olControlPinchZoomActive olControlNavigationActive> 
< div id =OpenLayers.Map_2_eventsstyle =position：absolute; width：100％; height：100％; z-index：999;> 
< div id =OpenLayers.Control.PanZoom_5style =position：absolute; left：4px; top：4px; z-index：1004;class =olControlPanZoom olControlNoSelectunselectable =on> ; 
< div id =OpenLayers.Control.ArgParser_6style =position：absolute; z-index：1004;class =olControlArgParser olControlNoSelectunselectable =on/> 
< div id =OpenLayers.Control.Attribution_7style =position：absolute; z-index：1004;class =olControlAttribution olControlNoSelectunselectable =on/> 
< / div> 
< / div> 
< script defer =defertype =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，
 { 
图层：水深，land_fn，park，drain_fn，drainage+ 
prov_bound，fedlimit，rail，road，popplace，
透明：true，
格式：image / png
}，
 {isBaseLayer：false} 
）; 
 map.addLayers（[wms，dm_wms]）; 
 map.zoomToMaxExtent（）; 
< / script> 
< / body> 
< script src =chrome-extension：//bmagokdooijbeehmkpknfglimnifench/googleChrome.js/> 
< / html> 
  

解决方案

您正在执行JavaScript代码。这意味着JavaScript代码在webbrowser遇到特定代码行时立即执行。此时，HTML DOM树中不存在< div id =map> ！浏览器即从上到下解析并执行HTML / JS代码。 在< div id =map> c $ c>已创建并添加到HTML DOM树中。您可以通过以下方式实现：
$ b

1. 移动< script> < div id =map> ：

   
   $ b之后，在标记中将标记为 $ b

    < h：head> 
   < script src =http://openlayers.org/api/OpenLayers.js>< / script> 
   < / h：头> 
   < 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> 
     




2. 使用 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：头> 
     

这个问题与JSF或XHTML无关。这只是基本的HTML / JS。

I made a jsf project and have the following example from http://docs.openlayers.org/library/introduction.html but as a xhtml file this wouldn't run and as a html file it would run. How to run it with jsf and .xhtml. It runs with html though.

     <?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>

Result at browser using firebug:

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

解决方案

You're executing JavaScript code inline. This means that the JavaScript code is immediately executed as the webbrowser encounters the particular code line. At that point, the <div id="map"> does not exist in the HTML DOM tree yet! The browser namely parses and executes HTML/JS code from top to bottom.

You need to execute that JavaScript code after the <div id="map"> has been created and added to the HTML DOM tree. You could achieve it the following ways:

1. Move the <script> block in the markup to after the <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>
   

2. Use window.onload to execute the code only when the browser is finished creating the HTML DOM tree.

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

This problem is not related to JSF or XHTML. It's just basic HTML/JS.

这篇关于使用JSF和.xhtml文件运行开放图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！