修改管网先tooltip样式

YANGDL

2021-03-04 6ffa578934b471302ed9ced5d1813003f8c23cc5

修改管网先tooltip样式

 src/Sgis.js

@@ -9,6 +9,7 @@

import MapConfig from '@/conf/MapConfig'
import DashFlow from '@components/plugin/PathDashFlow'
import CanvasMarkers from '@components/plugin/CanvasMarkers'
let map = null
const L = window.L
const initMap = (div) => {
@@ -23,6 +24,7 @@
  WmtsSupport.init(L) // 扩展，使支持WMTS
  // CustomPopup.init(L) // 自定义弹出框
  DashFlow.DashFlow(L) // 流动线图
  CanvasMarkers.init(L)// 画布图层
  // Leaflet扩展代码

  map = L.map(div, MapConfig.mapOptions)

 src/components/helpers/ServiceLayerHelper.js

@@ -115,7 +115,6 @@
      pointToLayer: function (geoJsonPoint, latlng) {
        return that.L.canvasMarker(latlng,
          {
            radius: 20,
            img: {
              // url: 'assets/images/map/marker-icon.png',
              url: '/assets/images/map/' + icon,
@@ -132,17 +131,47 @@
      minWidth: 300,
      closeButton: false,
      autoClose: false
    }).bindTooltip(function (layer) {
      console.log(layer)
      return layer.feature.properties.name
    }).on('mouseover', function (e) {
      console.log(e)
      var layer = e.layer
    })
      .bindTooltip(function (layer) {
        const nameId = layer.feature.id
        let name = ''
        if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1) {
          name = layer.feature.properties.pointnumber
        } else {
          name = layer.feature.properties.name
        }
        return name
      })
      .on('mouseover', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: 8, color: '#00ffff' })
        } else if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: [25, 25]
            }
          })

          layer.bringToFront()
        }
    }).on('mouseout', function (e) {
      var layer = e.layer
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
    }).addTo(featureGroup).tooltip()
        }
        if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
            }
          })
        }
      }).addTo(featureGroup)
    if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
      geojson.bringToBack()
    } else {

 src/components/panel/LegendPanel.vue

New file
@@ -0,0 +1,33 @@
<template>
<div class="legend-panel">

  <div  class="legend-icon unactive">

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

<script>
export default {
  name: 'LegendPanel'
}
</script>

<style lang="less" scoped>

.legend-panel{
  position: absolute;
  z-index: 502;
  bottom: .11979rem;
  right: .14583rem;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

</style>

 src/views/MapTemplate.vue

@@ -12,6 +12,7 @@
<!--        <top-enterprise-panel></top-enterprise-panel>-->
        <tool-box-panel></tool-box-panel>
      <menu-special></menu-special>
      <legend-panel></legend-panel>
    </div>
</template>

@@ -27,10 +28,12 @@
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'

export default {
  name: 'MapTemplate',
  components: {
    LegendPanel,
    MenuSpecial,
    ToolBoxPanel,
    // TopEnterprisePanel,