<template>
  <div
    v-show="legenOpened"
    class="widgets_maplegend_img"
    style="position: absolute; bottom: 47px; left: 2px; z-index: 999; height: 60%"
  >
    <img id="legendImg" src="./images/legendicon.png" style="height: 100%" />
    <span class="close"><i class="el-icon-close" @click="mapLegend(false)"></i></span>
  </div>
</template>
<script>
export default {
  name: 'Legend',
  computed: {
    legenOpened() {
      return this.$store.state.cesiumMap.mapLegendOpen
    }
  },
  methods: {
    /**
     * 该方法用于开关图例
     * @param open 开/关
     */
    mapLegend(open) {
      this.$store.dispatch('cesiumMap/mapLegendStatus', open)
    }
  }
}
</script>
<style lang="scss" scoped>
.widgets_maplegend_img {
  span {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
  }
  span:hover {
    color: #3e3e3e;
  }
}
</style>