| | |
| | | // 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: 'bottom', |
| | | offset: [0, -16], |
| | | direction: 'top', |
| | | className: '' |
| | | }) |
| | | // 点击 事件 |
| | | marker.on('click', (e) => { |
| | | try { |
| | | console.log(e) |
| | | // console.log(e) |
| | | // console.log(this.map.getCenter()) |
| | | // console.log(this.map.setCenter([e.target.getLatLng().lat, e.target.getLatLng().lng])) |
| | | // this.map.flyTo([e.target.getLatLng().lat, e.target.getLatLng().lng]) |
| | | // this.map.panTo([e.target.getLatLng().lat, e.target.getLatLng().lng], 100) |
| | | this.setPanTo(e.target.getLatLng(), 250) |
| | | this.EffectOfPulse(e.target.getLatLng()) |
| | | this.SolidWastePopup.setData(data[i]) |
| | | // 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) |
| | | } |
| | | |
| | | // 固废点击进行的 内容的设置 |
| | |
| | | |
| | | // 脉冲效果设置实现 |
| | | 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() |
| | | } |
| | | // 区分直接执行 和判断执行的不同区别 |
| | | // 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设置 // 高亮图层 |
| | |
| | | var HeightLightTime = 5 |
| | | var PulseNumber = 5 |
| | | const pulseinterver = setInterval((e) => { |
| | | console.log(e) |
| | | if (PulseNumber > 0) { |
| | | PulseNumber-- |
| | | } else { |