Question

我在页面上使用jsf2leaf库来显示地图。为了我的目的，我将source替换为我的项目并更改了组件。

组件：

<cc:interface componentType="mapAdvanced">
    <cc:attribute name="map" type="java.lang.Object" required="true"/>
</cc:interface>

<cc:implementation>
    <h:outputStylesheet name="system/styles/leaflet.css" target="head"/>
    <h:outputScript name="system/scripts/leaflet.js" target="head"/>
    <h:outputStylesheet name="system/styles/leaflet.labelOverlay.css" target="head"/>
    <h:outputStylesheet name="system/styles/markercluster.css" target="head"/>
    <h:outputScript name="system/scripts/markercluster.js" target="head"/>

    <div id="#{cc.clientId}" style="width:#{cc.map.width}; height:#{cc.map.height}"/>
    <c:set var="mapVar" value="map_#{cc.clientId.replaceAll('-','_')}"/>

    <script type="text/javascript">
        var #{mapVar};

        function refreshMap() {
            if (#{mapVar} == null) {
                #{mapVar} = L.map('#{cc.clientId}', {
                    center: [#{cc.map.center.latitude}, #{cc.map.center.longitude}],
                    dragging: #{cc.map.draggingEnabled},
                    zoomControl: #{cc.map.zoomControl},
                    zoom: #{cc.map.zoom}
                });
            }
            for (layer in #{mapVar}.layers) {
                #{mapVar}.removeLayer(layer);
            }

            #{mapVar}.center = [#{cc.map.center.latitude}, #{cc.map.center.longitude}];
            #{mapVar}.dragging = #{cc.map.draggingEnabled};
            #{mapVar}.zoomControl = #{cc.map.zoomControl};
            #{mapVar}.zoom = #{cc.map.zoom};

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                id: 'osm',
                attribution: '#{cc.map.attribution}',
                maxZoom: #{cc.map.maxZoom},
                minZoom: #{cc.map.minZoom}
            }).addTo(#{mapVar});

            //Layers
            <ui:repeat value = "#{cc.map.layers}" var = "layer">
                var layer = #{layer.clusterEnabled}? new L.MarkerClusterGroup({
                    disableClusteringAtZoom: #{layer.clusterDisableAtZoom},
                    maxClusterRadius: #{layer.clusterMaxRadius}
                }) : new L.LayerGroup();

                <ui:repeat value = "#{layer.labels}" var = "label">
                    var options = {
                                offset: null,
                                cssClass: 'leaflet-label-overlay'
                            },
                        txt = new L.LabelOverlay([#{label.position.latitude}, #{label.position.longitude}], 
                                                 '#{label.value}', options);

                    #{mapVar}.addLayer(txt);
                </ui:repeat>
            </ui:repeat >

            layers.addTo(#{mapVar});
            setTimeout(function () {
                #{mapVar}.invalidateSize();
            }, 300);
        }
        refreshMap();
    </script>
</cc:implementation>

还有一页：

<h:form id="view_table">
    <p:panel id="mapa_panel" style="width: 500px; height: 500px;">
        <sys:mapAdvanced id="mapa" map="#{selectionsViewModel.map}" />
    </p:panel>
    <p:commandButton value="Update" type="submit" action="#{selectionsViewModel.update()}" update="view_table-mapa"/>
</h:form>

在selectionsViewModel.update()我更改数据模型并调用refreshMap()以更新地图组件。我检查了浏览器的调试器，地方脚本之间没有区别 - 在div或out div。两个事件都在响应中返回，并在右侧html中发布新数据。但更新后我的组件从页面消失了。

Answer 1

我明白了我的错误。首先，脚本真的应该在div里面，因为外部更新引用了div id。其次，js代码是执行的，但是chrome调试器在某种程度上不会在断点处停止。我将更新地图更改为：

旧：

if (#{mapVar} == null) {
    #{mapVar} = L.map('#{cc.clientId}',
                        {center: [#{cc.map.center.latitude}, #{cc.map.center.longitude}],
                        dragging: #{cc.map.draggingEnabled},
                        zoomControl: #{cc.map.zoomControl},
                        zoom: #{cc.map.zoom}});
}
for (layer in #{mapVar}.layers) {
    #{mapVar}.removeLayer(layer);
}

新：

if (#{mapVar} != null) {
    #{mapVar}.remove();
}

现在，一切正常。

在JSF组件的JS脚本中更新数据模型

1 个答案: