Question

我正在开发一个门户网站，其中包含多个图层，例如城市，河流，各个地理区域的名称和类似图层。但是我对如何处理Web门户的开发感到困惑。我将尝试简要解释一下这个问题。

有关地图的基本信息： 地图必须是交互式的（缩放功能，弹出框，能够在点击或鼠标悬停时更改元素的属性......）。地图采用SVG格式，必须能够根据需要单独打开和关闭每一层。最重要的是，用户不得看到SVG。这意味着SVG的XML代码不能使用<svg>标签以HTML格式实现，以保护版权和盗窃数据！唯一的解决方案是使用<object>标记在HTML中实现SVG以保持交互性。

第一种方法：在HTML中为每个地图图层嵌入一个SVG 交互是层内（SMIL动画或一些JS库）。单击HTML中创建的按钮，我们可以单独隐藏和显示每个图层/ SVG（Hide_Show是JavaScript函数）。但是当缩放分别合并到每个图层时会出现问题，因为它们完全独立且不能一起缩放。另一个（更大的！）问题是如果几个层具有交互式内容。在这种情况下，HTML顺序中只有一个“在顶部”的图层保持交互性（因为无法访问下面的图层）。

<html>
   <head> ..... </head>
   <body>
        <input type="checkbox" onChange="Hide_Show('river');">
        <input type="checkbox" onChange="Hide_Show('country');">
        <input type="checkbox" onChange="Hide_Show('traffic');">

        <object id="river" data="/Map/river.svg"></object>
        <object id="country" data="/Map/country.svg"></object>
        <object id="traffic" data="/Map/traffic.svg"></object>
   </body>
</html>

第二种方法：在HTML中只嵌入一个包含所有地图图层的SVG 在这种情况下，缩放和交互正常工作，但还有另一个问题。由于SVG必须对用户不可见，因此必须使用<object>标记将其添加到HTML中。主要问题是如何实现，以便在HTML中创建的复选框访问添加了<object>标记的SVG中的DOM，并打开/关闭代表地图图层的SVG代码的某些部分？有可能这样做吗？

<html>
   <head> ..... </head>
   <body>
         <input type="checkbox" onChange="Hide_Show('river');">
         <input type="checkbox" onChange="Hide_Show('country');">
         <input type="checkbox" onChange="Hide_Show('traffic');">

         <object id="full_map" data="/Map.svg"></object>
   </body>
</html>

感谢您提出任何意见。如果有人采用不同的方法，请自觉写作。我对这些想法很开心！

HTML

0 个答案: