0

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

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

有没有人可以指出我的任何想法或读物？我对思考这类问题还很陌生，并且对必须存在的公认智慧持开放态度。

4

2 回答 2

0

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

于 2013-03-06T16:54:28.690 回答
0

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

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

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

  2. 更多数据，例如几个

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

    存储在这样的 json 文件中：

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

  3. 然后用几行 javascript: get json data via ajax, parse, and build as many

    <g><path ...></g>

    根据需要行。

  4. 将您的行添加到 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);
于 2017-03-06T16:29:31.033 回答