私のアプリには、ルートがありますmap.svelte
これには 2 つの子コンポーネントがMap.svelte
あります。LayerSelector.svelte
Map.svelte
OpenLayersmap
インスタンスを作成します。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
インスタンスを書き込み可能なストアに配置する必要がありますか?