修改管网先tooltip样式

YANGDL

2021-03-04 4d0106c11dba9e86e7d022a61bf625cba1d5cf66

修改管网先tooltip样式

 src/components/helpers/ServiceLayerHelper.js

@@ -141,7 +141,7 @@
          name = layer.feature.properties.name
        }
        return name
      }, { direction: 'bottom', offset: [0, 10] })
      }, { direction: 'bottom', offset: [0, 15], sticky: true })
      .on('mouseover', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type

 src/components/panel/LegendPanel.vue

@@ -1,33 +1,67 @@
<template>
<div class="legend-panel">
  <div class="legend-panel">
    <div class="legend-box" v-if="isShow">
      <div v-for="item in legendList" :key="item.title">
        <div class="legend-title">{{ item.title }}</div>
        <div class="legend-group" v-for="itm in item.details" :key="itm.label">
          <div class="legend-group-icon"></div>
          <div class="legend-group-label">{{ itm.label }}</div>
        </div>
      </div>
    </div>
    <div class="legend-icon unactive" @click="toggle">

  <div  class="legend-icon unactive">
      <i class="el-icon-more-outline"></i>
      <span>图例</span>
    </div>

    <i class="el-icon-more-outline"></i>
    <span >图例</span>
  </div>
</div>
</template>

<script>
export default {
  name: 'LegendPanel'
  name: 'LegendPanel',
  data () {
    return {
      isShow: false,
      legendList: [
        {
          title: '污雨水管网',
          details: [
            {
              icon: '/assets/images/map/三通.png',
              label: '管线'
            }
          ]
        }
      ]
    }
  },
  methods: {
    toggle () {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="less" scoped>

.legend-panel{
.legend-panel {
  position: absolute;
  z-index: 502;
  bottom: .11979rem;
  right: .14583rem;
  z-index: 1000;
  color: white;
  //bottom: .11979rem;
  bottom: 4rem;
  //right: .14583rem;
  right: 20rem;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;

}

</style>