Question

我有一个从shapefile创建的SVG，让我们说~100个城市。我还预先计算了这些城市之间的最短旅行路径。当您点击任意两个城市时，我想显示它们之间的最短路径。问题是我有至少10,000-30,000条路径，具体取决于我拥有的城市数量（城市数量选择2）。此外，路径被分割成不同的类型（例如，道路与高速公路），因此甚至超过城市的数量选择2条路径。

SVG可以是几个到100 MB的任何位置，具体取决于我对SVG的详细程度和优化。所以我不是在问如何优化SVG，我对是否可以重新思考当前的方法感兴趣。现在我只是将所有路径放在SVG中并将它们设置为隐藏，并在选择两个城市时更改属性。我想知道我是否不能将路径存储在其他文件中并使用脚本以交互方式将它们注入SVG，因此它们只是按需加载。最终的游戏是有一个很好的交互式地图，用于在一台机器上展示想法，所以我并不是完全有必要为服务器端原因进行优化。

有没有人可以指出我的想法或读物？我很想到这些问题，并且对所接受的智慧持开放态度。

Answer 1

我不是将所有可能的路径都放在SVG中，而是将它们分成单个节点到节点的连接，并存储哪个路径使用选择逻辑中的哪个连接。这样，您将大量减少SVG元素的数量，能够以更好的可压缩格式存储最短路径数据。

Answer 2

我和我的学生做了一些可以回答你问题的事情，关于添加动态更多的svg路径。它可以在HTML文档中完成，还有几行Javascript。

主svg直接包含在html中，但只有最小的功能：

<body>
  <svg>
    <g id="fullg">
    <rect ...>
    <!-- additional data will be inserted here later -->
    </g>
  </svg>

更多数据，例如几个

<path id="name1" d="path_data1">
...

存储在json文件中，如下所示：

{ "items": [
   {"id":"name1", "d":"path_data1..."},
   {"id":"name2, "d":"..."},
   ... ] }

然后使用几行javascript：通过ajax获取json数据，解析并构建尽可能多的
```
<g><path ...></g>
```
必要的行。

将您的行添加到svg :( 已更新：使用svg名称空间）

var g = document.querySelector("#fullg"),
    ng = document.createElementNS("http://www.w3.org/2000/svg", 'g'),
    np = document.createElementNS("http://www.w3.org/2000/svg", 'path');
ng.setAttribute("id","the_name_for_that_g");
np.setAttribute("id","the_name_for_that_path");
np.setAttribute("d","the_d_data_for_that_path");
ng.appendChild(np);
g.appendChild(ng);

为具有多个路径的地图设计优化的SVG

2 个答案: