文

chenzeping

2021-03-29 58737013341e2363b39a33fea150f72ebd37cfc1

文

 package.json

@@ -28,6 +28,7 @@
    "leaflet.markercluster": "^1.4.1",
    "lodash": "^4.17.10",
    "nprogress": "^0.2.0",
    "qs": "^6.10.1",
    "rbush": "^3.0.1",
    "screenfull": "^3.3.3",
    "style-resources-loader": "^1.4.1",

 src/Sgis.js

@@ -16,6 +16,7 @@
import './components/plugin/Editable' // 标绘操作
import './components/plugin/MagicMarker' // 动画Marker
import './assets/css/map/magic.min.css' // 动画Marker css
import '@/components/plugin/magicMarker.css'
import '@components/plugin/pulse/Pulse' // marker 外圈波
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css


 src/api/request.js

@@ -1,9 +1,10 @@
import $http from '@utils/axios'
import Qs from 'qs'

// // 固废接口
// export const requestSolidWaste = (url, data = {}) => {
//   return $http.post('./static/SolidWaste.json', data)
// }
export const requestSolidWaste = (url) => {
  return $http.get('./static/SolidWaste.json')
export const QueryStoragePlaceListByCompanyAndName = (data = {}) => {
  return $http.post('/EPInterface/DataService/EPMapService.asmx/QueryStoragePlaceListByCompanyAndName', Qs.stringify(data), {
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

 src/components/BaseNav/PublicBounced/PublicBounced.vue

New file
@@ -0,0 +1,80 @@
<template>
  <div class="public-bounced" v-show="flag">
    <div class="popup_title">{{ displayContent.Name }}</div>
    <div class="popup_bottom">
      <button @click="closePopup">确定</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PublicBounced',
  data () {
    return {
      displayContent: [],
      flag: false
    }
  },
  methods: {
    setData (data) {
      this.displayContent = data
      this.flag = true
    },
    closePopup () {
      this.flag = false
    }
  }
}
</script>

<style scoped>
.public-bounced {
  width: 80%;
  z-index: 499;
  position: absolute;
  top: 15%;
  left: 10%;
  background-color: rgba(128, 128, 128, 0.507);
  padding: 1%;
  border-radius: 20px;
  margin: 10% auto;
}

.popup_title {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
}

.popup_center {
  padding: 10%;
  font-size: 20px;
}

.popup_bottom {
  display: flex;
  justify-content: space-around;
}

button {
  width: 25%;
  height: 20%;
  padding: 2%;
  border: 1px solid gray;
  border-radius: 10px;
}

button:nth-child(1) {
  background-color: orangered;
  color: white;
  font-size: 20px;
}

button:nth-child(2) {
  background-color: gray;
  color: black;
  font-size: 20px;
}
</style>

 src/components/BaseNav/SolidWaste/Popup.vue

New file
@@ -0,0 +1,111 @@
<template>
  <div class="box" @click.stop="clo_box">
    <div class="popup_content">
      <div class="popup_title">{{ this.title }}</div>
      <div class="popup_center">
        <div v-if="this.content_text">{{ this.content_text }}</div>
        <slot></slot>
      </div>
      <div class="popup_bottom">
        <button @click="popup_sub">确定{{ displayContent.Name }}</button>
        <button @click="popup_clo">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SolidContent',
  data () {
    return {
      displayContent: []
    }
  },
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    content_text: {
      type: String,
      default: ''
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 点击确定事件
    popup_sub () {
      this.$emit('popup_sub')
    },
    // 点击了取消事件
    popup_clo () {
      this.$emit('popup_clo')
    },
    // 点击了弹出框以外区域
    clo_box (e) {
      if (e.target._prevClass === 'box') {
        this.$emit('clo_box')
      }
    }
  }
}
</script>

<style scoped>
.box {
  width: 80%;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 25%;
  background-color: rgba(128, 128, 128, 0.507);
}

.popup_content {
  background-color: white;
  padding: 1%;
  border-radius: 20px;
  width: 40%;
  margin: 10% auto;
}

.popup_title {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
}

.popup_center {
  padding: 10%;
  font-size: 20px;
}

.popup_bottom {
  display: flex;
  justify-content: space-around;
}

button {
  width: 25%;
  height: 20%;
  padding: 2%;
  border: 1px solid gray;
  border-radius: 10px;
}

button:nth-child(1) {
  background-color: orangered;
  color: white;
  font-size: 20px;
}

button:nth-child(2) {
  background-color: gray;
  color: black;
  font-size: 20px;
}
</style>

 src/components/BaseNav/SolidWaste/SolidContent.vue

@@ -1,53 +1,82 @@
<template>
  <div class="solid-content">
    <div class="content-left">
      <span>{{ displayContent.StoragePlaceName }}</span>
    </div>
    <div class="content-right">
      <SolidWasteTable :displayContent="displayContent"></SolidWasteTable>
  <div class="public-bounced" v-show="flag">
    <div class="popup_title">{{ displayContent.Name }}</div>
    <div class="popup_bottom">
      <button @click="closePopup">确定</button>
      <button @click="closePopup">取消</button>
    </div>
  </div>
</template>

<script>

import SolidWasteTable from '@components/BaseNav/SolidWaste/SolidWasteTable'
import '@components/BaseNav/SolidWaste/directive'

export default {
  name: 'SolidContent',
  components: { SolidWasteTable },
  data () {
    return {
      displayContent: []
      displayContent: [],
      flag: false
    }
  },
  methods: {
    setDate (data) {
      // console.log(data)
    setData (data) {
      this.displayContent = data
      this.flag = true
    },
    closePopup () {
      this.flag = false
    }
  }
}
</script>

<style lang="less" scoped>
span {
  font-size: 22px;
  color: red;
<style scoped>
.public-bounced {
  width: 80%;
  z-index: 499;
  position: absolute;
  top: 15%;
  left: 10%;
  background-color: rgba(128, 128, 128, 0.507);
  padding: 1%;
  border-radius: 20px;
  margin: 10% auto;
}

.solid-content {
  width: 100%;
.popup_title {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
}

.popup_center {
  padding: 10%;
  font-size: 20px;
}

.popup_bottom {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

  .content-left {
    width: 35%;
  }
button {
  width: 25%;
  height: 20%;
  padding: 2%;
  border: 1px solid gray;
  border-radius: 10px;
}

  .content-right {
    width: 60%;
  }
button:nth-child(1) {
  background-color: orangered;
  color: white;
  font-size: 20px;
}

button:nth-child(2) {
  background-color: gray;
  color: black;
  font-size: 20px;
}
</style>

 src/components/BaseNav/SolidWaste/SolidWaste.js

@@ -1,4 +1,4 @@
import { requestSolidWaste } from '@/api/request'
import { QueryStoragePlaceListByCompanyAndName } from '@/api/request'
// 展示图片
import defaultImg from '@assets/images/map-pages/basenav/solidwaste/voc.png'
import Setting from '@assets/images/map-pages/basenav/solidwaste/gf_green.png'
@@ -16,9 +16,9 @@
  }

  // 请求数据 data 为参数， 请求后台数据时 携带data参数
  requestData () {
    requestSolidWaste().then(res => {
      // console.log(res)
  requestData (data) {
    QueryStoragePlaceListByCompanyAndName(data).then(res => {
      console.log(res)
      this.DrawTheSolidWasteContent(res.Result.DataInfo)
    }).catch(err => {
      console.log(err)
@@ -36,51 +36,44 @@
    }
    for (let i = 0; i < data.length; i++) {
      // 经纬度 位置
      const positionX = data[i].positionX
      const positionY = data[i].positionY
      const positionX = data[i].Latitude
      const positionY = data[i].Longitude

      // 判断 经纬度位置信息是否存在
      // if (positionX != null && positionY != null) {
      // 用于 判断 => 判断是否展示脉冲效果 => temp(临时)
      const determineValueOne = data[i].LongDayWarning
      var determineValueTwo = data[i].StorageQty
      const positionArea = [positionX, positionY]
      if (positionX != null && positionY != null) {
        // 用于 判断 => 判断是否展示脉冲效果 => temp(临时)
        const determineValueOne = data[i].LongDayWarning
        var determineValueTwo = data[i].StorageQty
        const positionArea = [positionX, positionY]

      // 图标展示
      var iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
      var Icon = new SolidWasteIcon({ iconUrl: iconUrl })
      // var url = Icon.options.iconUrl
        // 图标展示
        var iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
        var Icon = new SolidWasteIcon({ iconUrl: iconUrl })
        // var url = Icon.options.iconUrl

      const marker = this.L.marker([positionX, positionY], { icon: Icon })
        const marker = this.L.marker([positionX, positionY], { icon: Icon })

      marker.bindPopup(() => {
        return this.SolidWastePopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 600,
        closeButton: true,
        autoClose: false
      })
      // 划过出现 展示数据
      marker.bindTooltip(data[i].StoragePlaceName, {
        permanent: true,
        offset: [0, -16],
        direction: 'top',
        className: ''
      })
      // 点击 事件
      marker.on('click', (e) => {
        try {
          // console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.SolidWastePopup.setDate(data[i])
        } catch (error) {
          console.log(error)
        }
      })
      // 设置内容添加到图层
      this.SolidWasteLayerGroup.addLayer(marker)
      // }
        // 划过出现 展示数据
        marker.bindTooltip(data[i].Name, {
          permanent: true,
          offset: [0, 16],
          direction: 'bottom',
          className: ''
        })
        // 点击 事件
        marker.on('click', (e) => {
          try {
            // console.log(e)
            this.EffectOfPulse(e.target.getLatLng())
            this.SolidWastePopup.setData(data[i])
            return this.SolidWastePopup.$el
          } catch (error) {
            console.log(error)
          }
        })
        // 设置内容添加到图层
        this.SolidWasteLayerGroup.addLayer(marker)
      }
    }
  }

@@ -132,8 +125,8 @@
      fillColor: ''
    })
    if (markers) {
      markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
      this.L.layerGroup(markers).addLayer(layerGroup)
      // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
      // this.L.layerGroup(markers).addLayer(layerGroup)
    } else {
      var picGroupMarker = new this.L.FeatureGroup()
      this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
@@ -146,7 +139,8 @@
  PulseCountSetting () {
    var HeightLightTime = 5
    var PulseNumber = 5
    const pulseinterver = setInterval(() => {
    const pulseinterver = setInterval((e) => {
      console.log(e)
      if (PulseNumber > 0) {
        PulseNumber--
      } else {

 src/components/BaseNav/WireSurface/index.js

New file
@@ -0,0 +1,23 @@

// 引入用于处理接口数据获取的方法
import { getDataInitWireSurface } from '@src/api/request'

class initWireSurface {
  constructor (options) {
    this.map = options.map
    this.L = window.L
    this.initWireSurfaceMap = new Map()
    this.initWireSurfacePopup = this.L.layerGroup().addTo(this.map)
  }

  // 获取页面线/面数据
  getDataInitWireSurface () {
    getDataInitWireSurface().then(res => {
      console.log(res)
    }).catch(error => {
      console.log(error)
    })
  }
}

export default initWireSurface

 src/components/plugin/MagicMarker.js

@@ -1,49 +1,27 @@
const init = (L) => {
  (function (window) {
    console.log(window)
    const setOptions = function (obj, options) {
      for (const i in options) {
        obj[i] = options[i]
      }
      return obj
/* eslint-disable */
!(function (i) {
  var c = function (i, c) {
    for (var n in c) i[n] = c[n]
    return i
  }
  L.Icon.Magic = function (i) {
    if (i.iconUrl) {
      var n = { html: '<div class=\'magicDiv\'><div class=\'magictime ' + i.magic + '\'>' + i.html + '<img id=\'migic\' src=\'' + i.iconUrl + '\'/></div></div>' }
    } else {
      var n = { html: '<div class=\'magicDiv\'><div class=\'magictime ' + i.magic + '\'>' + i.html + '</div></div>' }
    }
    L.Icon.Magic = function (options) {
      let opts
      if (options.iconUrl) {
        opts = {
          html: "<div class='magicDiv'><div class='magictime " + options.magic + "'><img id='migic' src='" + options.iconUrl + "'/></div></div>"
          // className: 'magicDiv',
        }
      } else {
        opts = {
          html: "<div class='magicDiv'><div class='magictime " + options.magic + "'>" + options.html + '</div></div>'
          // className: 'magicDiv',
        }
      }
      delete options.html
      const magicIconOpts = setOptions(opts, options)
      // console.log(magicIconOpts)
      const magicIcon = L.divIcon(magicIconOpts)
      return magicIcon
    delete i.html
    var a = c(n, i)
    console.log(a)
    var r = L.divIcon(a)
    return r
  }, L.icon.magic = function (i) {
    return new L.Icon.Magic(i)
  }, L.Marker.Magic = L.Marker.extend({
    initialize: function (i, c) {
      c.icon = L.icon.magic(c), L.Marker.prototype.initialize.call(this, i, c)
    }

    L.icon.magic = function (options) {
      return new L.Icon.Magic(options)
    }

    L.Marker.Magic = L.Marker.extend({
      initialize: function (latlng, options) {
        options.icon = L.icon.magic(options)
        L.Marker.prototype.initialize.call(this, latlng, options)
      }
    })

    L.marker.magic = function (latlng, options) {
      return new L.Marker.Magic(latlng, options)
    }
  })(window)
}

export default {
  init
}
  }), L.marker.magic = function (i, c) {
    return new L.Marker.Magic(i, c)
  }
}(window))

 src/conf/MapConfig.js

@@ -2,6 +2,7 @@
import TDT from './TDT'
import { LayerSewersLine, LayerSewersPoint } from './LayerSewers'
import { LayerWasteWater } from './LayerWasteWater'

const curWwwPath = window.document.location.href
const pathname = window.document.location.pathname
const pos = curWwwPath.indexOf(pathname)
@@ -22,7 +23,7 @@
  minZoom: 3,
  maxZoom: 18,
  // center: [26, 104],
  center: [32.224016189575195, 118.77070426940918],
  center: [38.828558921813965, 117.41676807403564],
  zoom: 14,
  worldCopyJump: true,
  inertia: true,
@@ -38,7 +39,10 @@
  // defaultBasemapCode: 'tianditu_img', // 默认显示 地图类型
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: { LayerSewersLine: [LayerSewersLine, LayerWasteWater], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置
  Layers: {
    LayerSewersLine: [LayerSewersLine, LayerWasteWater],
    layerSewersPoint: LayerSewersPoint
  } // 污雨水图层配置
}

/**

 src/utils/axios.js

@@ -83,7 +83,8 @@

// 创建axios实例
const Service = axios.create({
  timeout: 1000
  timeout: 1000,
  baseURL: 'http://10.246.162.140:8080/'
})

const CancelToken = axios.CancelToken

 src/views/MapTemplate.vue

@@ -17,7 +17,7 @@
    <enterprise></enterprise>
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>
    <SolidContent ref="SolidWastePopup"></SolidContent>
    <PublicBounced ref="PublicBounced"></PublicBounced>
  </div>
</template>

@@ -36,9 +36,10 @@
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
import SolidContent from '@components/BaseNav/SolidWaste/SolidContent'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
// 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'

export default {
  name: 'MapTemplate',
@@ -54,10 +55,11 @@
    LcServiceLayer,
    Popup,
    summarySheets,
    SolidContent
    PublicBounced
  },
  data () {
    return {
      // isShowBtn: false,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -77,9 +79,16 @@
  },
  methods: {
    ChangeState () {
      const data = {
        companyId: 3900100145,
        userCode: 'wenchun.deng',
        name: '',
        marginWarr: '',
        longDayWarr: ''
      }
      const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
      AddSolidWaste.requestData()
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
      AddSolidWaste.requestData(data)
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.PublicBounced)
    },
    isShowHidden () {
      this.isShowBtn = !this.isShowBtn
@@ -108,7 +117,7 @@
      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.config)

      this.ChangeState()
      // this.ChangeState()

      this.saveMapStatus()
      // this.setMapObj(this.mapObj)