import { QueryStoragePlaceListByCompanyAndName } from '@/api/request'
|
// 展示图片
|
|
import defaultImg from '../../../../public/assets/images/map/solidwaste/voc.png'
|
import setting from '../../../../public/assets/images/map/solidwaste/gf_green.png'
|
|
// 底图业务展示点
|
class AddSolidWasteHelper {
|
constructor (options) {
|
this.map = options.map
|
this.L = window.L
|
this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
|
this.SolidWastePopup = null
|
this.L.sgis = this.L.sgis || this.L
|
this.solidWasteMarkersLabels = []
|
this.pulseHeighLightMarker = null
|
}
|
|
// 请求数据 data 为参数， 请求后台数据时 携带data参数
|
requestData (data) {
|
QueryStoragePlaceListByCompanyAndName(data).then(res => {
|
// console.log(res)
|
this.DrawTheSolidWasteContent(res.Result.DataInfo)
|
}).catch(err => {
|
console.log(err)
|
})
|
}
|
|
// 根据获取数据 画出 内容
|
DrawTheSolidWasteContent (data) {
|
// 图标样式扩展
|
var SolidWasteIcon = this.SolidWasteIcon()
|
|
// //加载数据前如果存在图层组 那么清除掉
|
if (this.SolidWasteLayerGroup) {
|
this.SolidWasteLayerGroup.clearLayers()
|
}
|
for (let i = 0; i < data.length; i++) {
|
// 经纬度 位置
|
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]
|
|
// 图标展示
|
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 })
|
// 划过出现 展示数据
|
marker.bindTooltip(data[i].Name, {
|
permanent: true,
|
offset: [0, -16],
|
direction: 'top',
|
className: ''
|
})
|
// 点击 事件
|
marker.on('click', (e) => {
|
try {
|
console.log(e.target.getLatLng())
|
this.setPanTo(e.target.getLatLng(), 200)
|
this.EffectOfPulse(e.target.getLatLng())
|
this.SolidWastePopup.setData(data[i], 'gufei')
|
return this.SolidWastePopup.$el
|
} catch (error) {
|
console.log(error)
|
}
|
})
|
// 设置内容添加到图层
|
this.SolidWasteLayerGroup.addLayer(marker)
|
}
|
}
|
}
|
|
// panTo
|
setPanTo (pos, value) {
|
var position = pos
|
position = this.map.latLngToLayerPoint(position)
|
position.y += value
|
position = this.map.layerPointToLatLng(position)
|
// this.map.setView(position)
|
this.map.flyTo(position)
|
// this.map.panTo(position)
|
}
|
|
// 固废点击进行的 内容的设置
|
SetSolidWasteContent (config, containerPopup) {
|
this.SolidWastePopup = containerPopup
|
}
|
|
// 图标样式扩展 => 光圈 图标脉冲
|
SolidWasteIcon () {
|
return this.L.Icon.extend({
|
options: {
|
iconSize: [50, 50],
|
iconAnchor: [25, 25]
|
}
|
})
|
}
|
|
// 根据类型返回图片加载url
|
SolidWasteIconUrl (determineValueOne, determineValueTwo, position) {
|
var EffectOfChange
|
if (determineValueOne === 1 || determineValueTwo === 1) {
|
EffectOfChange = defaultImg
|
this.EffectOfPulse(position, this.solidWasteMarkersLabels, this.SolidWasteLayerGroup)
|
} else {
|
EffectOfChange = setting
|
}
|
return EffectOfChange
|
}
|
|
// 脉冲效果设置实现
|
EffectOfPulse (position, markers, layerGroup) {
|
// 区分直接执行 和判断执行的不同区别
|
// var differentColor = ''
|
// if (markers) {
|
// differentColor = '#ff0000'
|
// } else {
|
// differentColor = '#98FB98'
|
// }
|
// // 坐标数据：报警传进来的是数组 / 点击传进来的是object
|
// var FinalPosition = position instanceof Array ? {
|
// lat: position[0],
|
// lng: position[1]
|
// } : position
|
// // 插件 效果实现
|
// var pulsingIcon = this.L.icon.pulse({
|
// iconSize: [20, 20],
|
// color: differentColor,
|
// fillColor: ''
|
// })
|
// if (markers) {
|
// // 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)
|
// this.pulseHeighLightMarker = picGroupMarker.addTo(this.SolidWasteLayerGroup)
|
// this.PulseCountSetting()
|
// }
|
}
|
|
// 对图标脉冲 进行set设置 // 高亮图层
|
PulseCountSetting () {
|
var HeightLightTime = 5
|
var PulseNumber = 5
|
const pulseinterver = setInterval((e) => {
|
if (PulseNumber > 0) {
|
PulseNumber--
|
} else {
|
this.pulseClear(pulseinterver)
|
PulseNumber = HeightLightTime
|
}
|
}, 1000)
|
}
|
|
// 清除 图层
|
pulseClear (pulseinterver) {
|
clearInterval(pulseinterver)
|
pulseinterver = null
|
|
if (this.SolidWasteLayerGroup) {
|
// this.SolidWasteLayerGroup.clearLayers()
|
} else {
|
this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
|
}
|
if ((this.pulseHeighLightMarker)) {
|
this.pulseHeighLightMarker.remove()
|
}
|
}
|
}
|
|
export default AddSolidWasteHelper
|
