Question

我有一个简单的任务＆＃34;记住，我有一个在QGIS中创建的原始GML / XML，我使用xsl将其转换为html，到目前为止还可以。现在我有一张包含XML数据的表和一张SVG地图（在网上找到），它们彼此相邻。我想要的是当你点击地图的任何区域时，它会突出显示包含信息的表格行。

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <style type="text/css">
            .land
            {
                fill: #CCCCCC;
                fill-opacity: 1;
                stroke:white;
                stroke-opacity: 1;
                stroke-width:1;
                display:block;
            }
            .land:hover
            {
                fill: blue;
                cursor: pointer;
            }
        </style>

        <dr_map projection="mercator" leftLongitude="-72.004173" topLatitude="19.932499" rightLongitude="-68.322347" bottomLatitude="17.470139"></dr_map>

    </defs>
    <g>
        <path id="DO-01" title="Distrito Nacional" class="land" d="M435.2,341.16l0.17,-2.24l2.37,-2.49l-0.13,-5.53l-1.32,-1.8l-5.01,-3.59l-1.32,-2.35l2.77,-1.52v-2.49l1.19,-2.76l1.72,-1.24l2.37,0.97l1.19,1.8l0.66,2.9l2.24,1.11l2.37,3.18l3.3,-1.38l7.65,-1.52l3.17,2.07v1.8l-1.85,3.46l0.3,2.37l0,0l-1.79,-0.25l-2.21,1.63l-4.24,1.57l-2.21,3.01l-2.45,1.25l-6.75,2.07H435.2z"/>

svg文件是这样的（这是因为太长了，但我觉得它提出了一个好主意：

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="processing.xsl" type="text/xsl"?>
<FeatureCollection
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation=""
     xmlns="http://ogr.maptools.org/"
     xmlns:gml="http://www.opengis.net/gml">
  <gml:name>province</gml:name>
  <gml:boundedBy>
    <gml:Box>
      <gml:coord><gml:X>182215.7655999996</gml:X><gml:Y>1933511.9638</gml:Y></gml:coord>
      <gml:coord><gml:X>571429.3273</gml:X><gml:Y>2205216.25</gml:Y></gml:coord>
    </gml:Box>
  </gml:boundedBy>                                                                                                        
  <gml:featureMember>
    <rd id="DO-01">
      <geometryProperty><gml:MultiPolygon srsName="EPSG:32619"><gml:polygonMember><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing><gml:coordinates>397122.65139999986,2050791.921 397142.0132,2050790.208699999 </gml:coordinates></gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></gml:polygonMember></gml:MultiPolygon></geometryProperty>
      <PROV>01</PROV>
      <TOPONIMIA>DISTRITO NACIONAL</TOPONIMIA>
      <Hombres>460903</Hombres>
      <Mujeres>504137</Mujeres>
      <Casos>965040</Casos>
    </rd>
</FeatureCollection>

现在是GML / XML（再次是它的一部分，我消除了坐标的必须）

{{1}}

Answer 1

以下是三个代码段，基于您的代码段，第一个是XSLT样式表，它将XML文档作为主输入文档，SVG文档作为参数，然后使用内联SVG将XML和SVG转换为HTML ，其中SVG路径元素具有onmouseover / onmouseout事件处理程序属性以突出显示相应表行的背景颜色与数据，假设SVG路径元素和输入XML {{1元素具有相应的rd属性，基于这些id属性，元素被突出显示（在XSLT为SVG id添加前缀id之后，以避免碰撞完整的HTML + SVG文档的单个id命名空间：

path

这是XML：

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:gml="http://www.opengis.net/gml"
    xmlns:ogr="http://ogr.maptools.org/"
    xmlns:svg="http://www.w3.org/2000/svg"
    exclude-result-prefixes="gml ogr">

    <xsl:param name="svg-uri" select="'test2017060301.svg'"/>
    <xsl:param name="svg-doc" select="document($svg-uri)"/>

    <xsl:param name="hover-color" select="'#CCC'"/>

    <xsl:param name="svg-width" select="800"/>
    <xsl:param name="svg-height" select="600"/>

    <xsl:param name="id-prefix" select="'path-'"/>

    <xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes" doctype-system="about:legacy-compat"/>

    <xsl:template match="/">
        <html>
            <head>
                <title>Example</title>
                <script>
                    function hover(element, backgroundColor) {
                      element.style.backgroundColor = backgroundColor;
                    }
                    function unhover(element) {
                      element.style.backgroundColor = '';
                    }
                </script>
            </head>

            <body>

                <div>
                    <header> 
                        <h1>Inhabitants</h1>
                    </header>
                </div>

                <div id="container">

                    <div id="map_area">
                        <div id="innermap_area">
                            <xsl:apply-templates select="$svg-doc/*" mode="svg">
                                <xsl:with-param name="width" select="$svg-width"/>
                                <xsl:with-param name="height" select="$svg-width"/>
                            </xsl:apply-templates>
                        </div>
                    </div>

                    <div id="info">
                        <div id="innerinfo">
                            <table>
                                <tr bgcolor="#C3CEC6">
                                    <th>Province name</th>
                                    <th>Total inhabitants</th>          
                                    <th>Female</th>
                                    <th>Male</th>

                                </tr>
                                <xsl:for-each select="//gml:featureMember">
                                    <tr id="{ogr:rd/@id}">
                                        <td><xsl:value-of select="ogr:rd/ogr:TOPONIMIA"/></td>
                                        <td><xsl:value-of select="ogr:rd/ogr:Casos"/></td>                  
                                        <td><xsl:value-of select="ogr:rd/ogr:Mujeres"/></td>
                                        <td><xsl:value-of select="ogr:rd/ogr:Hombres"/></td>
                                    </tr>
                                </xsl:for-each>
                            </table>
                        </div>
                    </div>
                </div>  
                <div><footer> 2017 </footer></div>

            </body>
        </html>
    </xsl:template>

    <xsl:template match="@* | node()" mode="svg">
        <xsl:copy>
            <xsl:apply-templates select="@* | node()" mode="svg"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="svg:svg" mode="svg">
        <xsl:param name="width" select="$svg-width"/>
        <xsl:param name="height" select="$svg-height"/>
        <xsl:copy>
            <xsl:copy-of select="@*"/>
            <xsl:attribute name="width">
                <xsl:value-of select="$width"/>
            </xsl:attribute>
            <xsl:attribute name="height">
                <xsl:value-of select="$height"/>
            </xsl:attribute>
            <xsl:apply-templates mode="svg"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="svg:path" mode="svg">
        <xsl:copy>
            <xsl:copy-of select="@*"/>
            <xsl:attribute name="id">
                <xsl:value-of select="concat($id-prefix, @id)"/>
            </xsl:attribute>
            <xsl:attribute name="onmouseover">hover(document.getElementById('<xsl:value-of select="@id"/>'), '<xsl:value-of select="$hover-color"/>');</xsl:attribute>
            <xsl:attribute name="onmouseout">unhover(document.getElementById('<xsl:value-of select="@id"/>'));</xsl:attribute>
        </xsl:copy>
    </xsl:template>


</xsl:stylesheet>

SVG：

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="test2017060301.xsl" type="text/xsl"?>
<FeatureCollection
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation=""
    xmlns="http://ogr.maptools.org/"
    xmlns:gml="http://www.opengis.net/gml">
    <gml:name>province</gml:name>
    <gml:boundedBy>
        <gml:Box>
            <gml:coord><gml:X>182215.7655999996</gml:X><gml:Y>1933511.9638</gml:Y></gml:coord>
            <gml:coord><gml:X>571429.3273</gml:X><gml:Y>2205216.25</gml:Y></gml:coord>
        </gml:Box>
    </gml:boundedBy>                                                                                                        
    <gml:featureMember>
        <rd id="DO-01">
            <geometryProperty><gml:MultiPolygon srsName="EPSG:32619"><gml:polygonMember><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing><gml:coordinates>397122.65139999986,2050791.921 397142.0132,2050790.208699999 </gml:coordinates></gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></gml:polygonMember></gml:MultiPolygon></geometryProperty>
            <PROV>01</PROV>
            <TOPONIMIA>DISTRITO NACIONAL</TOPONIMIA>
            <Hombres>460903</Hombres>
            <Mujeres>504137</Mujeres>
            <Casos>965040</Casos>
        </rd>
    </gml:featureMember>
</FeatureCollection>

在线示例位于https://martin-honnen.github.io/xslt/2017/test2017060301.xml，适用于Windows 10上的IE，Edge，Chrome和Firefox的单行数据。

将鼠标悬停在svg地图上时突出显示表格

1 个答案: