Javascript HTML中具有多层SVG的交互式地图_Javascript_Html_Svg_Maps_Layer

Javascript HTML中具有多层SVG的交互式地图

javascript html svg maps

Javascript HTML中具有多层SVG的交互式地图,javascript,html,svg,maps,layer,Javascript,Html,Svg,Maps,Layer,我正在开发一个包含多个层次的地图的门户网站，例如城市、河流、不同地理区域的名称和类似的地图。但是，对于如何开发web门户，我有一个两难的选择。我将试着简要地解释这个问题有关地图的基本信息：地图必须是交互式的（缩放功能、弹出框、鼠标单击或悬停时更改元素属性的功能…）。地图采用SVG格式，必须能够根据需要分别打开和关闭每个图层。最重要的是，SVG不能对用户可见。这意味着SVG的XML代码不得使用标记在HTML中实现，以保护版权和数据被盗！唯一的解决方案是在HTML中使用标记实现SVG，以保持交互

我正在开发一个包含多个层次的地图的门户网站，例如城市、河流、不同地理区域的名称和类似的地图。但是，对于如何开发web门户，我有一个两难的选择。我将试着简要地解释这个问题

有关地图的基本信息： 地图必须是交互式的（缩放功能、弹出框、鼠标单击或悬停时更改元素属性的功能…）。地图采用SVG格式，必须能够根据需要分别打开和关闭每个图层。最重要的是，SVG不能对用户可见。这意味着SVG的XML代码不得使用

标记在HTML中实现，以保护版权和数据被盗！唯一的解决方案是在HTML中使用

标记实现SVG，以保持交互性

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


.....

第二种方法：在HTML中只嵌入一个SVG和所有地图层 在这种情况下，缩放和交互性工作正常，但还有另一个问题。因为SVG不能对用户可见，所以必须使用

标记将其添加到HTML中。主要问题是如何实现，以便在HTML中创建的复选框访问添加了
标记的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>


.....

谢谢你的评论。如果有人有不同的方法，请随意写。我愿意接受各种想法

获取对象元素（document.getElementById（“full_map”）.contentDocument的contentDocument，然后访问其内容以隐藏/显示它们。非常感谢！这正是我所缺少的！为什么SVG作为文件被（或）元素中的SVG访问要比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>