在Svelte中使用Flubber.js显示GeoJSON形状时出错

6ju8rftf 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(89)

更新：我已经包含了REPL with the code and data here。

我试图使用Svelte和Flubber来重新创建demo example，它显示了变形的geojson形状。我不喜欢使用D3，并找到了一个example，它向我展示了如何使用tweened进行插值。
我的topo.json包含数据，上传here。
这是我到目前为止所拥有的：

<script>
   import { interpolate } from 'flubber';
  import { feature } from 'topojson';
  import { tweened } from 'svelte/motion';
  import * as eases from 'svelte/easing';
  import wards from '$lib/Wards/shapes/map.topo.json';

  const shape = tweened(undefined, {
    interpolate,
    easing: eases.cubicInOut,
    duration: 400,
  });

  let places = feature(wards, wards.objects.states).features.map(function (d) {
    return d.geometry.coordinates[0];
  });

  // Convert the polygon coordinates to a string format
  places = places.map(function (d) {
    return d.map(function (d) {
      return d.join(',');
    });
  });
  let selected = 0;
  $: $shape = places[selected];
</script>

{#each Object.keys(places) as key}
  <button
     class:selected="{selected === key}"
     on:click="{() => (selected = key)}"
   >
  {key}
  </button>
{/each}

<main>
   <svg viewBox="0 0 960 500">
      <path d="{$shape}"></path>
   </svg>
</main>

当我运行此命令时，我在控制台中得到以下错误：

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "77.4618079999067…".

Uncaught TypeError: All shapes must be supplied as arrays of [x, y] points or an SVG path string (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).
Example valid ways of supplying a shape would be:
[[0, 0], [10, 0], [10, 10]]
"M0,0 L10,0 L10,10Z"

我做错了什么？我怀疑它与插值函数有关，但我不确定是什么。我是否需要将点数组转换成类似于传统SVG路径（"M0,0 L10,0 L10,10Z"）的东西？

JSON

来源：https://stackoverflow.com/questions/76545853/error-displaying-geojson-shapes-with-flubber-js-in-svelte

1条答案

按热度按时间

fhg3lkii1#

下面是一个带有固定代码的REPL：https://svelte.dev/repl/6f98e177b5bf416e8a9c269a37b08d7d?version=4.0.0
为了后代，这里是固定的内容：

<script>
  import flubber from 'flubber';
  import { feature } from 'topojson';
  import { tweened } from 'svelte/motion';
  import * as eases from 'svelte/easing';
  import wards from './wards.topo.json';

  const shape = tweened(undefined, {
    interpolate: flubber.interpolate,
    easing: eases.cubicInOut,
    duration: 400,
  });

  let places = feature(wards, wards.objects.collection).features.map(function (
    d
  ) {
    return d.geometry.coordinates[0];
  });

  // for each place, // Convert the polygon coordinates to a string format
  places = places.map(function (d) {
    const points = d[0].map((p, i) => {
      const x = p[0].toFixed(4), y = p[1].toFixed(4)
      if (i == 0) return `M${x},${y}`
      return `L${x},${y}`
    });
    return points.join(" ") + "Z";
  });

  let selected = 0;
  $: $shape = s;
</script>

{#each Object.keys(places) as key}
  <button
    class:selected="{selected === key}"
    on:click="{() => (selected = key)}"
  >
    {key}
  </button>
{/each}

<main>
  <svg viewBox="77 12 2 2">
    <path d={$shape}></path>
  </svg>
</main>

<style>
  svg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  path {
    fill: #0074d9;
  }

  button {
    margin: 0 0.5em 0 0;
  }

  .selected {
    background-color: #333;
    color: white;
  }
</style>

赞(0）回复(0）举报 2023-06-25

我来回答

在Svelte中使用Flubber.js显示GeoJSON形状时出错

1条答案

相关问题

热门标签

最新问答