/* eslint-disable no-debugger */
|
/**
|
* 创建图层相关的类
|
*/
|
import AjaxUtils from '@/utils/AjaxUtils'
|
import store from '@/store'
|
import styles from '@/conf/Styles'
|
|
class ServiceLayerHelper {
|
constructor (options) {
|
this.map = options.map
|
this.L = window.L
|
this.loadedLayersMap = new Map()
|
this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map)
|
this.tileLayersWMTSArray = [] // 初始的WMTS集
|
this.tileLayersTileArray = [] // 初始的Tile集
|
this.tileLayersWMSArray = [] // 初始的WMS集
|
this.geojsonArray = {} // 初始的geojson集
|
this.layerConfig = {}
|
this.regex = /\{(.+?)\}/g // 匹配{}
|
this.popupComp = null
|
}
|
|
getTileLayer (code) {
|
return this.loadedLayersMap.get(code)
|
}
|
|
/**
|
* 根据配置文件初始化业务底图
|
*/
|
initServiceLayers (layerConfig, popupComp) {
|
this.layerConfig = layerConfig
|
this.popupComp = popupComp
|
this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
|
this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
|
}
|
|
/**
|
* 按配置文件加载三种不同类型的
|
* @param {*} mapConfig
|
* @param {*} isAddToMap
|
*/
|
loadLayers (layerConfig, isAddToMap = true) {
|
console.debug('ServiceLayerHelper加载参数：', layerConfig)
|
for (let i = 0, len = layerConfig.length; i < len; ++i) {
|
const opt = layerConfig[i]
|
if (opt.type === 'wmts') {
|
this.loadWmtsLayer(opt, isAddToMap)
|
this.tileLayersWMTSArray.push(opt)
|
} else if (opt.type === 'wms') {
|
this.loadWmsLayer(opt, isAddToMap)
|
this.tileLayersWMSArray.push(opt)
|
} else if (opt.type === 'tile') {
|
this.loadTileLayer(opt, isAddToMap)
|
this.tileLayersTileArray.push(opt)
|
} else if (opt.type === 'geojson') {
|
this.loadGeojsonLayers(opt)
|
}
|
}
|
}
|
|
loadGeojsonLayers (options) {
|
var url = options.url
|
var layers = options.layers
|
for (var i = 0; i < layers.length; i++) {
|
var layer = layers[i]
|
var checked = layer.checked
|
if (checked) {
|
this.loadGeojsonLayer(url, layer)
|
}
|
}
|
}
|
|
/**
|
* 请求wfs数据
|
* @param url
|
* @param item
|
*/
|
loadGeojsonLayer (url, item) {
|
var matches = this.regex.exec(url)
|
var matchValue = item[matches[1]]
|
var code = item.code
|
var newUrl = url.replace(this.regex, matchValue)
|
var that = this
|
if (!that.geojsonArray[code]) {
|
AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
|
store.commit('setSewersDatas', res)
|
var layer = that.loadGeojson(res, item)
|
that.geojsonArray[code] = layer
|
})
|
}
|
}
|
|
/**
|
* 加载gis server返回的geoson数据到地图中展示
|
* @param res
|
*/
|
loadGeojson (res, opt) {
|
var that = this
|
var icon = opt.icon
|
const featureGroup = that.L.featureGroup().addTo(that.map)
|
const geojson = that.L.geoJSON(res.features, {
|
style: function (feature) {
|
return {
|
fill: styles.defaultLineStyle.fill,
|
weight: styles.defaultLineStyle.weight,
|
fillColor: styles.defaultLineStyle.fillColor,
|
color: styles.defaultLineStyle.color,
|
fillOpacity: styles.defaultLineStyle.fillOpacity,
|
opacity: styles.defaultLineStyle.opacity
|
// dashArray: styles.defaultLineStyle.dashArray,
|
// dashSpeed: styles.defaultLineStyle.dashSpeed
|
}
|
},
|
pointToLayer: function (geoJsonPoint, latlng) {
|
return that.L.canvasMarker(latlng,
|
{
|
img: {
|
// url: 'assets/images/map/marker-icon.png',
|
url: '/assets/images/map/' + icon,
|
size: styles.defaultLineStyle.size
|
}
|
})
|
}
|
}).bindPopup(function (layer) {
|
that.popupComp.setDatas(layer)
|
that.popupComp.setShow()
|
return that.popupComp.$el
|
}, {
|
className: 's-map-popup',
|
minWidth: 300,
|
closeButton: false,
|
autoClose: false
|
})
|
.bindTooltip(function (layer) {
|
const nameId = layer.feature.id
|
let name = ''
|
if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1) {
|
name = layer.feature.properties.pointnumber
|
} else {
|
name = layer.feature.properties.name
|
}
|
return name
|
})
|
.on('mouseover', function (e) {
|
const layer = e.layer
|
const type = e.layer.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()
|
}
|
}).on('mouseout', function (e) {
|
const layer = e.layer
|
const type = e.layer.feature.geometry.type
|
if (type === 'LineString' || type === 'MultiLineString') {
|
layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
|
}
|
if (type === 'Point' || type === 'MultiPoint') {
|
layer.setStyle({
|
img: {
|
url: '/assets/images/map/' + icon,
|
size: styles.defaultLineStyle.size
|
}
|
})
|
}
|
}).addTo(featureGroup)
|
if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
|
geojson.bringToBack()
|
} else {
|
geojson.bringToFront()
|
}
|
return featureGroup
|
}
|
|
removeLayer (item) {
|
var code = item.code
|
var layer = this.geojsonArray[code]
|
if (layer) {
|
this.map.removeLayer(layer)
|
delete this.geojsonArray[code]
|
}
|
}
|
|
/**
|
* 往地图中加入一个WMTS服务
|
* @param {}} options
|
* @param {*} isAddToMap
|
*/
|
loadWmtsLayer (options, isAddToMap = true) {
|
const layer = this.L.tileLayer(options.url, options.option)
|
layer.config = options
|
var checked = options.checked
|
if (checked) {
|
if (isAddToMap) {
|
layer.addTo(this.map)
|
}
|
this.loadedLayersMap.set(options.code, layer)
|
}
|
}
|
|
/**
|
* 往地图中加入一个WMS服务
|
* @param {}} options
|
* @param {*} isAddToMap
|
*/
|
loadWmsLayer (options, isAddToMap = true) {
|
const layer = this.L.tileLayer.wms(options.url, options.option)
|
layer.config = options
|
|
var checked = options.checked
|
if (checked) {
|
if (isAddToMap) {
|
layer.addTo(this.tileLayerWmslayerGroup)
|
}
|
this.loadedLayersMap.set(options.code, layer)
|
}
|
}
|
|
/**
|
* 往地图中加入一个TILE服务
|
* @param {}} options
|
* @param {*} isAddToMap
|
*/
|
loadTileLayer (options, isAddToMap = true) {
|
const layer = this.L.tileLayer(options.url, {
|
layers: options.layers || 'all', // country
|
format: options.format || 'image/png',
|
transparent: options.true || true,
|
crs: options.crs || this.L.CRS.EPSG4326,
|
maxZoom: options.maxZoom || 21,
|
minZoom: options.minZoom || 1,
|
zoomOffset: options.zoomOffset || 0
|
})
|
layer.config = options
|
|
if (isAddToMap) {
|
layer.addTo(this.map)
|
}
|
this.loadedLayersMap.set(options.code, layer)
|
}
|
|
/**
|
* 隐藏服务图层
|
* @param {*} name
|
*/
|
hideTileLayer (code) {
|
if (this.loadedLayersMap) {
|
const tileLayer = this.loadedLayersMap.get(code)
|
this.map.removeLayer(tileLayer)
|
}
|
}
|
|
/**
|
* 展示服务图层
|
* @param {*} name
|
*/
|
showTileLayer (code) {
|
if (this.loadedLayersMap) {
|
const tileLayer = this.loadedLayersMap.get(code)
|
this.map.addLayer(tileLayer)
|
}
|
}
|
|
/**
|
* 得到选中的图层列表
|
* @param mapConfig
|
* @returns {[]}
|
*/
|
getCheckedLayers (serviceLayers) {
|
var checkedLayers = []
|
for (var i = 0; i < serviceLayers.length; i++) {
|
var serviceLayer = serviceLayers[i]
|
var layers = serviceLayer.layers
|
for (var j = 0; j < layers.length; j++) {
|
var layer = layers[j]
|
var checked = layer.checked
|
if (checked) {
|
checkedLayers.push(layer)
|
}
|
}
|
}
|
return checkedLayers
|
}
|
|
/**
|
* 获取所有的TILE服务图层
|
*/
|
getTileLayers () {
|
return this.tileLayersTileArray
|
}
|
|
/**
|
* 获取所有的WMTS服务图层
|
*/
|
getWmtsLayers () {
|
return this.tileLayersWMTSArray
|
}
|
|
/**
|
* 获取所有的WMS服务图层
|
*/
|
getWmsLayers () {
|
return this.tileLayersWMSArray
|
}
|
|
/**
|
* 根据线的选择，得到点的可选择图层数据
|
*/
|
getFiltersGroup () {
|
|
}
|
|
/**
|
* 通过code查找WMS的服务配置
|
* @param {} code wms服务配置的code
|
*/
|
getWMSConfig (code) {
|
const mc = this.mapConfig
|
for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
|
if (code === mc.mapConfig.ServiceLayers[i].code || mc.mapConfig.ServiceLayers[i].type === 'wms') {
|
return mc.mapConfig.ServiceLayers[i]
|
}
|
}
|
return null
|
}
|
}
|
|
export default ServiceLayerHelper
|
