使用 JSF 和 .xhtml 文件运行开放层答案

【问题标题】：Running open layer with JSF and .xhtml file使用 JSF 和 .xhtml 文件运行开放层
【发布时间】：2012-05-01 09:38:19
【问题描述】：

我创建了一个 jsf 项目，并从http://docs.openlayers.org/library/introduction.html 获得了以下示例，但作为 xhtml 文件，它不会运行，而作为 html 文件，它会运行。如何使用 jsf 和 .xhtml 运行它。但它使用 html 运行。

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

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

【问题讨论】：

标签： javascript html jsf-2 xhtml openlayers

【解决方案1】：

您正在内联执行 JavaScript 代码。这意味着当网络浏览器遇到特定代码行时，JavaScript 代码会立即执行。那时，<div id="map"> 还不存在于 HTML DOM 树中！浏览器即从上到下解析和执行 HTML/JS 代码。

您需要在<div id="map"> 创建并添加到HTML DOM 树之后执行该JavaScript 代码。您可以通过以下方式实现它：

将标记中的 <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>

只有在浏览器完成创建 HTML DOM 树时，才使用window.onload 执行代码。

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

【讨论】：

谢谢你非常非常非常好的回答 :) 那么为什么 html 和 xhtml 中的代码执行不同？
JSF/Facelets 在 webserver 中运行并生成 HTML/JS，然后在 webbrowser 中运行。这是两个物理上完全不同的环境，通过 HTTP 连接。
我测试了您要求的更改代码，它不会生成地图，而 html 中的相同代码会生成没有 jsf 标记的地图。我可以看到使用萤火虫的变化。脚本已成功运行，但没有地图可见？
似乎是 OpenLayers 中的一个错误。我检查了他们的教程，复制粘贴了他们的complete HTML example 并且它有效。一旦我在顶部添加了 <!DOCTYPE html> 行，它就会中断。因此，仍然不是 JSF 特定的问题，它只是一个 HTML 代码生成器 :) 我建议创建一个新问题并专注于 OpenLayers+Doctype 问题（暂时忽略 JSF 故事）。从 OpenLayers/HTML 专家那里得到答案后，将代码转换为 JSF，以便它准确生成所需的 HTML。
不客气。请注意，OpenLayers 自己的示例与我回答中的第一个建议完全匹配。也许尝试更密切地关注教程？ :)

【解决方案2】：

我遇到了同样的问题，但我的扩展名是 .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>

【讨论】：

【解决方案3】：

@BalusC 是对的。似乎是 OpenLayers 中的一个错误。添加声明时 JSF 页面崩溃。

我删除了它，但它仍然运行良好。我知道这不是最佳做法，但这是我发现完成这项工作的唯一方法。试一试。

【讨论】：