/**
|
* 加载wfs服务图层
|
*/
|
import { STYLES } from '../../../conf/Constants'
|
import AjaxUtils from '../../../utils/AjaxUtils'
|
import { setZIndex } from '../../../utils/utils'
|
|
class WfsLayerService {
|
constructor (config) {
|
this.config = config
|
this.params = {
|
version: '1.0.0',
|
REQUEST: 'getfeature',
|
OUTPUTFORMAT: 'json'
|
// maxFeatures: 20000
|
}
|
this.popupComp = window.popupComp
|
this.L = window.L
|
this.map = window.map
|
this.regex = /\{(.+?)\}/g // 匹配{}
|
}
|
|
init (layer) {
|
this.layer = layer
|
const wfsUrl = this.config.wfs
|
if (wfsUrl) {
|
this.loadData(wfsUrl)
|
}
|
}
|
|
loadData (wfsUrl) {
|
AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => {
|
this.draw(res.data.features)
|
})
|
}
|
|
draw (features) {
|
if (features && features.length > 0) {
|
const icon = this.config.icon
|
const styles = this.config.styles
|
Object.assign(STYLES, styles)
|
const geojsonLayer = this.L.geoJSON(features, {
|
style: function (feature) {
|
return {
|
fill: STYLES.FILL,
|
weight: STYLES.WEIGHT,
|
fillColor: STYLES.FILL_COLOR,
|
color: STYLES.COLOR,
|
fillOpacity: STYLES.FILL_OPACITY,
|
opacity: STYLES.OPACITY
|
// dashArray: STYLES.DASH_ARRAY,
|
// dashSpeed: STYLES.DASH_SPPED
|
}
|
},
|
pointToLayer: (geoJsonPoint, latlng) => {
|
return this.L.canvasMarker(latlng,
|
{
|
img: {
|
// url: 'assets/images/map/marker-icon.png',
|
url: '/assets/images/map/' + icon,
|
size: STYLES.ICON_SIZE
|
}
|
})
|
},
|
onEachFeature: (feature, layer) => {
|
const popupDatas = []
|
const properties = feature.properties
|
popupDatas.push({
|
title: properties.wellname || properties.devicename || properties.name,
|
name: feature.id,
|
content: properties
|
})
|
layer.bindPopup((layer) => {
|
this.popupComp.setDatas(popupDatas)
|
this.popupComp.setShow()
|
return this.popupComp.$el
|
}, {
|
className: 's-map-popup',
|
minWidth: 300,
|
closeButton: false,
|
autoClose: false
|
})
|
.bindTooltip((layer) => this.tooltipListener(layer), { direction: 'bottom', offset: [0, 15], sticky: true })
|
.on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer))
|
}
|
}).addTo(this.layer)
|
setZIndex(geojsonLayer)
|
}
|
}
|
|
mouseOverListener (e, layer) {
|
const icon = this.config.icon
|
const type = e.target.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()
|
}
|
}
|
|
mouseOutListener (e, layer) {
|
const icon = this.config.icon
|
const type = e.target.feature.geometry.type
|
if (type === 'LineString' || type === 'MultiLineString') {
|
layer.setStyle({ weight: STYLES.WEIGHT, color: STYLES.COLOR })
|
}
|
if (type === 'Point' || type === 'MultiPoint') {
|
layer.setStyle({
|
img: {
|
url: '/assets/images/map/' + icon,
|
size: STYLES.ICON_SIZE
|
}
|
})
|
}
|
}
|
|
tooltipListener (layer) {
|
const nameId = layer.feature.id
|
let name = ''
|
if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
|
name = layer.feature.properties.pointnumber
|
} else {
|
name = layer.feature.properties.name
|
}
|
if (name === undefined) {
|
name = ''
|
}
|
return name
|
}
|
}
|
|
export default WfsLayerService
|
