import AjaxUtils from '../../../utils/AjaxUtils'
|
import { PIPELINE_WMS } from '../../../conf/Constants'
|
|
/**
|
* todo 得考虑一个图层配置了多个 wmsLayers的情况
|
*/
|
class WmsLayerService {
|
constructor (layersConfig) {
|
this.L = window.L
|
this.map = window.map
|
this.popupComp = window.popupComp
|
// wms getfeatureinfo 默认参数
|
this.params = {
|
VERSION: '1.1.1',
|
SERVICE: 'WMS',
|
REQUEST: 'GetFeatureInfo',
|
// bbox: bbox,
|
FORMAT: 'image/png',
|
INFO_FORMAT: 'application/json',
|
TRANSPARENT: true,
|
FEATURE_COUNT: 50,
|
SRS: 'EPSG:4326',
|
EXCEPTIONS: 'application/vnd.ogc.se_inimage'
|
}
|
this.layersConfig = layersConfig
|
// 存放getfeatureinfo的图层组
|
this.featureGroup = this.L.featureGroup({}).addTo(this.map)
|
|
this.layers = []
|
for (var i = 0; i < layersConfig.length; i++) {
|
const config = layersConfig[i]
|
for (var k in config) {
|
if (k === 'wmsLayers') {
|
this.layers.push(config[k])
|
}
|
}
|
}
|
}
|
|
init () {
|
if (this.layers) {
|
this.load(this.layers)
|
this.clickListener()
|
}
|
}
|
|
add (config) {
|
const code = config.code
|
for (var k in this.layersConfig) {
|
if (code === k) {
|
return false
|
}
|
}
|
this.layers.push(config.wmsLayers)
|
this.wmsLayer.setParams({ layers: this.layers.join(',') })
|
}
|
|
remove (config) {
|
const wmsLayers = config.wmsLayers
|
for (var i = 0; i < this.layers.length; i++) {
|
const layerName = this.layers[i]
|
if (wmsLayers === layerName) {
|
this.layers.splice(i, 1)
|
}
|
}
|
this.wmsLayer.setParams({ layers: this.layers.join(',') })
|
}
|
|
load (layers) {
|
this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
|
format: 'image/png', // 返回的数据格式
|
transparent: true,
|
layers: layers.join(',')
|
}).addTo(this.map)
|
}
|
|
clickListener () {
|
window.map.on('click', (e) => {
|
this.featureGroup.clearLayers()
|
var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
|
var size = this.map.getSize()
|
// const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()
|
|
const params = Object.assign({
|
LAYERS: this.layers.join(','),
|
QUERY_LAYERS: this.layers.join(','),
|
WIDTH: size.x,
|
HEIGHT: size.y,
|
X: Math.round(point.x),
|
Y: Math.round(point.y),
|
BBOX: this.map.getBounds().toBBoxString()
|
}, this.params)
|
AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
|
const features = res.data.features
|
/**
|
* {
|
* title: 'New Tab',
|
* name: newTabName,
|
* content: 'New Tab content'
|
* }
|
* @type {*[]}
|
*/
|
const popupDatas = []
|
if (features) {
|
for (var i = 0; i < features.length; i++) {
|
const feature = features[i]
|
const properties = feature.properties
|
this.highlight(feature)
|
// const coordinates = feature.geometry.coordinates
|
popupDatas.push({
|
title: properties.wellname || properties.devicename || properties.name,
|
name: feature.id,
|
content: properties
|
})
|
}
|
}
|
if (popupDatas.length > 0) {
|
var myIcon = this.L.divIcon({ className: 'my-div-icon' })
|
this.L.marker(e.latlng, {
|
icon: myIcon
|
}).addTo(this.featureGroup)
|
.bindPopup((layer) => {
|
this.popupComp.setDatas(popupDatas)
|
this.popupComp.setShow()
|
return this.popupComp.$el
|
}, {
|
className: 's-map-popup',
|
minWidth: 300,
|
closeButton: false,
|
autoClose: false
|
})
|
.openPopup()
|
}
|
})
|
})
|
}
|
|
reverse (feature) {
|
const coordinates = feature.geometry.coordinates
|
var latlng = []
|
for (var j = 0; j < coordinates.length; j++) {
|
const coordinate = coordinates[j]
|
var xy = []
|
for (var k = 0; k < coordinate.length; k++) {
|
const coor = coordinate[k]
|
xy.push(coor.reverse())
|
}
|
latlng.push(xy)
|
}
|
return latlng
|
}
|
|
highlight (feature) {
|
const type = feature.geometry.type
|
if (type === 'MultiLineString') {
|
this.L.polyline(this.reverse(feature)).addTo(this.featureGroup)
|
} else if (type === 'Point') {
|
var myIcon = this.L.divIcon({ className: 'my-div-icon' })
|
this.L.marker(feature.geometry.coordinates.reverse(), {
|
icon: myIcon
|
}).addTo(this.featureGroup)
|
}
|
}
|
}
|
|
export default WmsLayerService
|
