Вы должны просто напрямую изменить свой экземпляр data.
Для ясности я сделаю так, как если бы вы импортировали из файла geojson.js как data2.Вызов одного и того же может быть причиной вашего замешательства.
import { data as data2, EventBus2 } from '../assets/geojson/sample-geojson.js';
Причина, по которой видимость слоев GeoJSON не изменяется динамически, заключается в том, что вы правильно инициализируете свои свойства экземпляра data и day, используя информациюот вашего data2, но это не связывает их динамически с будущими модификациями в data2.
Поэтому самый простой подход - переключить свойства вашего экземпляра data и day в ваших "mapDay"прослушиватель событий вместо информации в data2.
EventBus2.$on('mapDay', pickerValue => {
switch (pickerValue) {
case data2.today.id:
this.yesterday.day = true;
this.today.day = false;
break;
case data2.dun.id:
this.yesterday.day = false;
this.today.day = true;
break;
}
});
Вы также можете переключать свои data и data2, если вы хотите, чтобы data2 также синхронизировались, например, если выиспользуйте его в другом компоненте.Обратите внимание, что такая стратегия была бы хрупкой, поскольку изменение data2 в этом другом компоненте не имело бы здесь никакого эффекта.
С другой стороны, вы могли бы упростить логику переключения видимости, просто сохранив свой pickerValue вваш экземпляр data и сравните его с вашим geojson.id в :visible выражении привязки атрибута: :visible="pickerValue === yesterday.geojson.id"
Пример кода:
Vue.component('map-view-2', {
template: '#map-view-2',
components: {
'l-map': Vue2Leaflet.LMap,
'l-tile-layer': Vue2Leaflet.LTileLayer,
'l-geo-json': Vue2Leaflet.LGeoJson,
},
data() {
return {
pickerValue: '0520',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
yesterday: {
geojson: data2.yesterday,
},
today: {
geojson: data2.today,
},
};
},
mounted() {
this.$root.$on('mapDay', pickerValue => {
this.pickerValue = pickerValue;
});
},
});
// Dummy DatePicker component for the sake of the demo.
Vue.component('date-picker', {
template: '#datepicker',
methods: {
handleInputChange(event) {
this.$root.$emit('mapDay', event.target.value);
},
},
});
const data2 = {
today: {
"type": "FeatureCollection",
"id": "0520",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.34, 48.86] // Left
},
}],
},
yesterday: {
"type": "FeatureCollection",
"id": "0519",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.35, 48.86] // Right
},
}],
},
};
new Vue({
el: '#app',
});
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/vue2-leaflet@1.0.2/dist/vue2-leaflet.js"></script>
<template id="map-view-2">
<div id="MapView2">
<l-map :zoom="11" style="height: 100px;" :center="[48.86, 2.35]">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-geo-json :visible="pickerValue === yesterday.geojson.id" :geojson="yesterday.geojson"></l-geo-json>
<l-geo-json :visible="pickerValue === today.geojson.id" :geojson="today.geojson"></l-geo-json>
</l-map>
</div>
</template>
<template id="datepicker">
<fieldset @change="handleInputChange">
<legend>Choose a date</legend>
<input type="radio" name="date" value="0520" id="today" checked />
<label for="today">Today 0520</label>
<input type="radio" name="date" value="0519" id="yesterday" />
<label for="yesterday">Yesterday 0519</label>
<input type="radio" name="date" value="none" id="none" />
<label for="none">None</label>
</fieldset>
</template>
<div id="app">
<map-view-2></map-view-2>
<date-picker></date-picker>
</div>
Более модульный подход будет представлять данные pickerValue как prop, так что вы будете изменять их непосредственно на уровне родительского (например, приложения),вместо того, чтобы слушать ваше "mapDay" событие:
Vue.component('map-view-2', {
template: '#map-view-2',
components: {
'l-map': Vue2Leaflet.LMap,
'l-tile-layer': Vue2Leaflet.LTileLayer,
'l-geo-json': Vue2Leaflet.LGeoJson,
},
props: {
// Receive the value directly from parent component / App.
pickerValue: {
type: String,
default: '0520',
},
},
data() {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
yesterday: {
geojson: data2.yesterday,
},
today: {
geojson: data2.today,
},
};
},
});
// Dummy DatePicker component for the sake of the demo.
Vue.component('date-picker', {
template: '#datepicker',
props: {
value: {
type: String,
default: '0520',
},
},
methods: {
handleInputChange(event) {
// https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
this.$emit('input', event.target.value);
},
},
});
const data2 = {
today: {
"type": "FeatureCollection",
"id": "0520",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.34, 48.86] // Left
},
}],
},
yesterday: {
"type": "FeatureCollection",
"id": "0519",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.35, 48.86] // Right
},
}],
},
};
new Vue({
el: '#app',
data() {
return {
pickerValue: '0519', // This value rules child components default value.
};
},
});
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/vue2-leaflet@1.0.2/dist/vue2-leaflet.js"></script>
<template id="map-view-2">
<div id="MapView2">
<l-map :zoom="11" style="height: 100px;" :center="[48.86, 2.35]">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-geo-json :visible="pickerValue === yesterday.geojson.id" :geojson="yesterday.geojson"></l-geo-json>
<l-geo-json :visible="pickerValue === today.geojson.id" :geojson="today.geojson"></l-geo-json>
</l-map>
</div>
</template>
<template id="datepicker">
<fieldset @change="handleInputChange">
<legend>Choose a date</legend>
<input type="radio" name="date" value="0520" id="today" :checked="value === '0520'" />
<label for="today">Today 0520</label>
<input type="radio" name="date" value="0519" id="yesterday" :checked="value === '0519'" />
<label for="yesterday">Yesterday 0519</label>
<input type="radio" name="date" value="none" id="none" :checked="value === 'none'" />
<label for="none">None</label>
</fieldset>
</template>
<div id="app">
<map-view-2 :picker-value="pickerValue"></map-view-2>
<date-picker v-model="pickerValue"></date-picker>
</div>
Все это, как говорится, если ваша работа только для прототипа дизайна, даже не демонстрируя свои навыки программирования, то даже Vue, хотя уже довольно простой,может быть излишним для вашей задачи.