1

私のアプリには、ルートがありますmap.svelte

これには 2 つの子コンポーネントがMap.svelteあります。LayerSelector.svelte

Map.svelteOpenLayersmapインスタンスを作成します。LayerSelector.svelteこのインスタンスにアクセスする必要があります。

mapインスタンスを宣言しmap.svelteて2つのコンポーネントにバインドしていますが、アクセスできないようです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);
});

LayerSelector.svelte:

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

どこが間違っているのでしょうか?OpenLayersmapインスタンスを書き込み可能なストアに配置する必要がありますか?

4

1 に答える 1