LayerSelector.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div class="change-div" id="change-div">
  3. <div class="change-container-div">
  4. <div class="layer-select-button-div" id="layer-select-button-div" @click="basemapShow = !basemapShow">
  5. <i class="fa fa-map-o" aria-hidden="true" v-if="!basemapShow"></i>
  6. <i class="fa fa-map" aria-hidden="true" v-if="basemapShow"></i>
  7. </div>
  8. <div class="info-select-button-div" id="info-select-button-div" @click="infomapShow = !infomapShow">
  9. <i class="fa fa-commenting-o" aria-hidden="true" v-if="!infomapShow"></i>
  10. <i class="fa fa-commenting" aria-hidden="true" v-if="infomapShow"></i>
  11. </div>
  12. </div>
  13. <div class='basemap-content' id="basemap-content" v-show="basemapShow">
  14. <el-checkbox-group
  15. :min="1"
  16. v-model="checkMapList"
  17. @change="checkedMapsChange"
  18. >
  19. <el-checkbox label="cdut">文化地图</el-checkbox>
  20. <el-checkbox label="tiandi">在线地图</el-checkbox>
  21. </el-checkbox-group>
  22. </div>
  23. <div class='info-content' id="info-content" v-show="infomapShow">
  24. <el-checkbox-group v-model="checkTagList" @change="checkedTagsChange">
  25. <el-checkbox label="noticeLayer">最新通知</el-checkbox>
  26. <el-checkbox label="reportLayer">实时新闻</el-checkbox>
  27. <el-checkbox label="cultureLayer" disabled>校园文化</el-checkbox>
  28. <el-checkbox label="otherLayer" >更多</el-checkbox>
  29. </el-checkbox-group>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. export default {
  35. name: 'LayerSelector',
  36. data: () => ({
  37. // 底图控件 可见性
  38. basemapShow: false,
  39. // 信息控件 可见性
  40. infomapShow: false,
  41. // checkMapList: ['文化地图', '在线地图'],
  42. checkMapList: ['cdut', 'tiandi'],
  43. checkTagList: ['noticeLayer', 'reportLayer', 'cultureLayer', 'otherLayer']
  44. }),
  45. watch: {
  46. basemapShow: function () {
  47. if (this.basemapShow) {
  48. this.infomapShow = false
  49. }
  50. },
  51. infomapShow: function () {
  52. if (this.infomapShow) {
  53. this.basemapShow = false
  54. }
  55. }
  56. },
  57. methods: {
  58. checkedMapsChange () {
  59. this.$emit('getCheckedMap', this.checkMapList)
  60. },
  61. checkedTagsChange () {
  62. this.$emit('getCheckedTag', this.checkTagList)
  63. }
  64. }
  65. }
  66. </script>
  67. <style scoped>
  68. .basemap-item {
  69. padding: 5px;
  70. cursor: pointer;
  71. }
  72. .basemap-text,.online-map-text{
  73. width: 60px;
  74. height: 12px;
  75. }
  76. .basemap-text{
  77. /* color: #007bff; */
  78. /* color: rgb(115, 172,23); */
  79. font-weight: bold;
  80. font-family: "Source Han Sans CN";
  81. }
  82. /*图层与消息按钮样式*/
  83. .info-select-button {
  84. width: 22px;
  85. height: 20px;
  86. }
  87. .info-select-button-div {
  88. width: 22px;
  89. height: 22px;
  90. z-index: 999;
  91. cursor: pointer;
  92. position: absolute;
  93. }
  94. .layer-select-button {
  95. width: 22px;
  96. height: 22px;
  97. }
  98. .layer-select-button-div {
  99. width: 22px;
  100. height: 22px;
  101. z-index: 999;
  102. right: 3px;
  103. cursor: pointer;
  104. position: absolute;
  105. }
  106. .change-container-div {
  107. height:20px;
  108. width: 55px;
  109. margin: auto;
  110. position: absolute;
  111. top: 0;
  112. left: 3px;
  113. bottom: 5px;
  114. right: 0;
  115. }
  116. .change-div {
  117. background-color:transparent;
  118. width:65px;
  119. height: 35px;
  120. z-index: 999;
  121. position: absolute;
  122. right: 10px;
  123. border-radius: 5px;
  124. margin-top: 10px
  125. }
  126. /*图层切换弹出框 和 消息选择弹出框 样式*/
  127. #basemap-content, .info-content {
  128. position: absolute;
  129. font-size: 12px;
  130. z-index: 100;
  131. background: rgb(219, 236, 224);
  132. /* color: rgb(115, 172,23); */
  133. opacity: 0.95;
  134. right: 0px;
  135. margin-top: 40px;
  136. height: 65px;
  137. width:100px;
  138. align-content: center;
  139. margin-top: 35px
  140. }
  141. .info-content {
  142. height: 130px;
  143. /* color: rgb(115, 172,23); */
  144. }
  145. /*设置选项样式*/
  146. /deep/ .el-checkbox {
  147. left:10px;
  148. top:8px;
  149. }
  150. /deep/ .el-checkbox__label {
  151. font-family: "Source Han Sans CN";
  152. color: #212529;
  153. }
  154. </style>