import AjaxUtils from '../../../utils/AjaxUtils'
|
import { WMS_URL } from '../../../conf/Constants'
|
import Popup from '@views/popup/Popup'
|
import WmsLayerList from '../dataset/WmsLayerList'
|
|
/**
|
* 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.wmsLayerList = new WmsLayerList()
|
for (var i = 0; i < layersConfig.length; i++) {
|
const config = layersConfig[i]
|
this.wmsLayerList.addConfig(config)
|
}
|
this.load()
|
}
|
|
init () {
|
this.clickListener()
|
}
|
|
add (config) {
|
this.wmsLayerList.addConfig(config)
|
const layers = this.wmsLayerList.getLayers()
|
const filter = this.wmsLayerList.getFilters()
|
const params = {}
|
if (filter) {
|
params.cql_filter = filter
|
}
|
if (layers) {
|
params.layers = layers
|
}
|
this.wmsLayer.setParams(params)
|
}
|
|
remove (config) {
|
console.log(config)
|
this.wmsLayerList.remove(config.typeName, config.filter)
|
const layers = this.wmsLayerList.getLayers()
|
const filter = this.wmsLayerList.getFilters()
|
const params = { layers: layers }
|
if (filter) {
|
params.cql_filter = filter
|
}
|
this.wmsLayer.setParams(params)
|
}
|
|
load () {
|
const layers = this.wmsLayerList.getLayers()
|
const filter = this.wmsLayerList.getFilters()
|
const params = {
|
format: 'image/png', // 返回的数据格式
|
transparent: true,
|
BBOX: this.map.getBounds().toBBoxString()
|
}
|
if (layers) {
|
params.layers = layers
|
}
|
if (filter.length > 0) {
|
params.cql_filter = filter
|
}
|
this.wmsLayer = this.L.tileLayer.wms(WMS_URL, params).addTo(this.map)
|
}
|
|
clickListener () {
|
window.map.on('click', (e) => {
|
// console.log(e)
|
window.layerFactory.clearHighlight()
|
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 layers = this.wmsLayerList.getLayers()
|
if (layers.length > 0) {
|
const params = Object.assign({
|
LAYERS: layers,
|
QUERY_LAYERS: layers,
|
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(WMS_URL, 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 || properties.pipename,
|
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() */
|
|
if (window.layerFactory.clickSwitch) {
|
window.$layer.open({
|
content: {
|
content: Popup, // 组件
|
data: { // 传递的参数
|
datas: popupDatas
|
}
|
},
|
title: '', // 标题
|
left: e.originalEvent.clientX,
|
top: e.originalEvent.clientY
|
})
|
}
|
// this.popupComp.setDatas(popupDatas)
|
// this.popupComp.setShow()
|
}
|
})
|
}
|
})
|
}
|
|
reverseMultiLine (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
|
}
|
|
reversePolyLine (feature) {
|
const coordinates = feature.geometry.coordinates
|
var latlng = []
|
for (var j = 0; j < coordinates.length; j++) {
|
const coordinate = coordinates[j]
|
latlng.push(coordinate.reverse())
|
}
|
return latlng
|
}
|
|
highlight (feature) {
|
const type = feature.geometry.type
|
if (type === 'MultiLineString') {
|
this.L.polyline(this.reverseMultiLine(feature), { color: 'red' }).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)
|
} else if (type === 'LineString') {
|
this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.featureGroup)
|
}
|
}
|
}
|
|
export default WmsLayerService
|
