1

在我的应用程序中，我有一条路线map.svelte

这有两个子组件：Map.svelte和LayerSelector.svelte

Map.svelte创建一个 OpenLayersmap实例。LayerSelector.svelte需要访问这个实例。

我正在声明map实例map.svelte并将其绑定到两个组件，但似乎无法访问它LayerSelector.svelte

map.svelte：

<script>
  import Map from '../components/Map.svelte';
  import MapLayerSelectorDialog from '../components/LayerSelector.svelte';
  let map;
</script>

<div class="map" id="map">
 <Map organisation={organisation} meta={meta} 
  showBackControl="true" showEditControl="true" showSearchControl="true"
  bind:map={map}
  on:mapready={initLayerSelector(map)}
  on:map-back={back=goBack}
  on:featureselected={featureSelected}
  on:togglelayerselector={toggleLayerSelector}
  on:togglemapsearch={toggleMapSearch}
  on:togglemapeditcontrol={toggleMapEdit}
 />
</div>

<MapLayerSelectorDialog bind:showDialog={showLayerSelectorDialog}
  bind:meta = {meta}
  bind:map={map}>
</MapLayerSelectorDialog>

Map.svelte：

export let map = null;
...
onMount(async () => {
  map = await initMap ('map', organisation, meta, startCoords);
});
...

initMap.js

export async function initMap (div, organisation, meta, startCoords) {
  var map = new Map({
    target: div, //'map',
    view: new View({
      center: fromLonLat ([1330601.87, 7916443.12]),
      zoom: 12,
    }),
  });
  addLayers (map, meta);
});

层选择器.svelte：

<script>
export let map
</script>
{#each map.getLayers() as layer}
  <p>{layer.get('name')}</p>
{/each}

我可能哪里出错了？我是否需要将 OpenLayersmap实例放在可写存储中？

4

1 回答 1

2

就其本身而言，您的代码应该可以工作。您可以像您正在做的那样将变量双向绑定到两个单独的子组件，然后让其中一个初始化它。

我创建了一个REPL 来说明它是可能的。

当您说您无法访问该变量时，您是什么意思？你得到一个意外的值或错误？

我怀疑您遇到的问题是map运行undefined前的一小段时间onMount。如果未设置，LayerSelector则会抛出错误。map

如果这是问题，用map.getLayers()eg替换map ? map.getLayers() : []将解决它。

也就是说，有很多双向绑定会导致数据流不明确。我会考虑初始化变量，map.svelte然后简单地将其传递给其他组件以简化数据流。

于 2021-10-09T18:32:04.727 回答