Javascript 从其他组件切换地图图层可见性

首先，我是一名设计专业的学生，我使用Vue.js为我的高级项目制作原型。所以这不是真正的工作项目。只是一些日记应用程序的原型

我的问题是，我构建了一个具有平铺层的地图组件

在平铺层上，我渲染了一个GeoJSON文件，它有两个坐标对象

我还有一个datepicker组件，它通过EventBus发出值

我的目标是：当datepicker发出特定值时，关闭一个

，然后打开另一个

有一个参数，该参数为

：可见，可显示或隐藏<代码>：可见

从GeoJSON对象获取参数

datepicker

为更改GeoJSON参数发出一些布尔值。GeoJSON参数会更改，但不会在地图中呈现

我认为，这是因为没有重新渲染贴图组件

我的地图组件如下所示：

<template>
  <div v-if="refresh" id="MapView2">
    <i class="material-icons geoLocate" v-on:click="geoLoc">location_searching</i>
    <l-map :zoom="zoom" :options="{ zoomControl: false }" class="map" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-geo-json :visible="yesterday.day" :geojson="bus.geojson" :options="bus.options"></l-geo-json>
      <l-geo-json :visible="today.day" :geojson="today.geojson" :options="today.options"></l-geo-json>
    </l-map>
  </div>
</template>

<script>
import Vue from 'vue';
import Leaflet from 'leaflet';
import L from 'leaflet';
import { LMap, LTileLayer, LGeoJson } from 'vue2-leaflet';
import PopupContent from './GeoJson2Popup';
import { data, EventBus2 } from '../assets/geojson/sample-geojson.js';


export default {
  name: 'MapView2',
  components: {
    LMap,
    LTileLayer,
    LGeoJson,
  },
  data(){
    return {
      zoom: 13,
      center: {
        lat: '',
        lng: '',
      },
      url:'https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=...',
      attribution: '',
      yesterday: {
        geojson: data.yesterday,
        day: data.yesterday.visible,
        options: {
          onEachFeature: onEachFeature,
          color: "#45B8FF",
          fillOpacity: 0.8
        }
      },
      today: {
        geojson: data.today,
        day: data.today.visible,
        options: {
          onEachFeature: onEachFeature,
          color: "#45B8FF",
          fillOpacity: 0.8
        }
      },
    }
  },
  methods: {
    geoLoc() {
      navigator.geolocation.getCurrentPosition(position => {
        this.position = position.coords;
        this.center.lat = position.coords.latitude
        this.center.lng = position.coords.longitude
        this.zoom = 25
        console.log(position.coords)
      })
    }
  },
  beforeCreate() {
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(position => {
        this.isLoading = false
        this.position = position.coords;
        this.center.lat = position.coords.latitude
        this.center.lng = position.coords.longitude
        console.log(position.coords)
      })
    }
  },
  mounted() {
    EventBus2.$on('mapDay', pickerValue => {
      switch (pickerValue) {
        case data.today.id:
        data.yesterday.visible = true;
        data.today.visible = false;
        break;
        case data.yesterday.id:
        data.yesterday.visible = false;
        data.today.visible = true;
        break;
      }
    });
  },
};
</script>

如您所见，日期选择器以

MMDD

格式发出一些值。Switch语句通过

id

检查GeoJSON数据中的值。如果匹配，请更改

visible

属性。当datepicker发出时，它实际上发生了更改

但它不会在地图中渲染（GeoJSON层不会相应地更改可见性）

---

我该怎么做？我应该使用

手表

或类似的东西吗？如果是，我如何使用它？

您只需直接更改实例

数据即可

为了清楚起见，我将像从
geojson.js
文件导入
data2
一样进行操作。把两者都称为同一个可能是你感到困惑的一个原因

从“../assets/geojson/sample geojson.js”导入{data as data2，EventBus2}；

GeoJSON层可见性没有动态更改的原因是，您使用
data2
中的信息正确初始化了实例
data
和
day
属性，但这不会将它们动态绑定到
data2
中的未来修改

因此，最简单的方法是在
“mapDay”
事件侦听器中切换实例
数据
和
日期
属性，而不是
数据2中的信息

EventBus2.$on（'mapDay'，pickerValue=>{
开关（选择器值）{
案例数据2.today.id：
这是昨天的事；
this.today.day=假；
打破
案例数据2.dun.id：
this.昨日.day=假；
this.today.day=true；
打破
}
});

您还可以切换
数据
和
数据2
，以防
数据2
也同步，例如，如果您在另一个组件中使用它。请注意，这样的策略很脆弱，因为在另一个组件中更改
data2
，在这里没有效果

另一方面，您可以简化可见性切换逻辑，只需将
pickerValue
存储在实例
数据中，并将其与
中的
geojson.id
进行比较：visible
属性绑定表达式：
：visible=“pickerValue===昨日.geojson.id”

代码示例：


Vue.component（'map-view-2'{
模板：“#地图视图-2”，
组成部分：{
“l-map”：Vue2lapper.LMap，
“l-tile-layer”：Vue2layer.LTileLayer，
“l-geo-json”：Vue2slaple.LGeoJson，
},
数据（）{
返回{
pickerValue:'0520'，
url:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
属性：“©；参与者”，
昨天：{
geojson:data2.0昨天，
},
今天：{
geojson:data2.today，
},
};
},
安装的（）{
此.$root.$on（'mapDay'，pickerValue=>{
this.pickerValue=pickerValue；
});
},
});
//为了演示，使用了虚拟的日期选择器组件。
Vue.组件（'日期选择器'{
模板：“#日期选择器”，
方法：{
handleInputChange（事件）{
这是.$root.$emit（'mapDay'，event.target.value）；
},
},
});
常数数据2={
今天：{
“类型”：“FeatureCollection”，
“id”：“0520”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[2.34,48.86]//左
},
}],
},
昨天：{
“类型”：“FeatureCollection”，
“id”：“0519”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[2.35,48.86]//右
},
}],
},
};
新Vue({
el:“#应用程序”，
});

选择一个日期
今天0520
昨天5点19分
没有一个
查看组件中的geojson·l-geo-json·当值更改时，应该进行刷新yourself@jacky如何实现手表部分。事实上，我不是一个开发人员，我只是一个困惑的设计学生，有一个明确的截止日期：/起初，我没有得到你的答案，但当我第二次阅读你的答案时，我意识到我在这个问题上写错了geojson.js。我编辑了它，也许有一个变化，你可以再看看我的问题。很抱歉，我浪费了你的时间。顺便说一句，我实现了你的答案，但我得到了
引用错误：数据未定义
，一些
属性或方法“foo”未在实例上定义，而是在渲染过程中被引用。
错误。如果确实将导入重命名为
data2
，显然，您也需要在初始化中重命名：
geojson:data2。昨天，我犯了一个巨大的错误。但是
case.data.dun.id
应该是
case.data.day.id:
我现在改了，但是我真的很惭愧。很抱歉。我正在简化组件，以便在stackoverflow中询问答案。但有时变量名称会令人困惑。这次我忘了这个，对不起。
    import Vue from 'vue';
    export const EventBus2 = new Vue();
    export const data = {
      today: {
        "type": "FeatureCollection",
        "id": "0520",
        "visible": false,
        "features": [ // geojson features and coordinates ]
      },

      yesterday: {
        "type": "FeatureCollection",
        "id": "0520",
        "visible": false,
        "features": [ // geojson features and coordinates ]
      }
  }