import WfsLayerService from './WfsLayerService'
|
import BusiLayerService from './BusiLayerService'
|
import WmsLayerService from './WmsLayerService'
|
import EventLayerService from './EventLayerService'
|
import { clone } from '../../../utils/utils'
|
class LayerFactory {
|
constructor (options) {
|
this.L = options.L
|
this.map = window.map
|
this.layers = {}
|
}
|
|
init (layerConfig) {
|
// 1. 遍历layer config
|
if (layerConfig) {
|
for (var i = 0; i < layerConfig.length; i++) {
|
var config = layerConfig[i]
|
var layers = config.layers
|
var childLayer = config.childLayer
|
layers && this.init(config.layers)
|
childLayer && this.init(config.childLayer)
|
|
var checked = config.checked
|
checked && this.load(config)
|
checked && this.toggleZoomByConfig(config)
|
}
|
}
|
}
|
|
/**
|
* 控制显示的级别
|
* @param layerConfig
|
*/
|
initEvent (layerConfig) {
|
this.map.on('zoomend ', (e) => this.toggleZoomByLayer(layerConfig))
|
}
|
|
toggleZoomByLayer (layerConfig) {
|
var config = layerConfig
|
if (Array.isArray(layerConfig)) {
|
for (var i = 0, l = layerConfig.length; i < l; i++) {
|
config = layerConfig[i]
|
var layers = config.layers
|
var childLayer = config.childLayer
|
layers && this.toggleZoomByLayer(layers)
|
childLayer && this.toggleZoomByLayer(childLayer)
|
this.toggleZoomByConfig(config)
|
}
|
} else {
|
this.toggleZoomByConfig(layerConfig)
|
}
|
}
|
|
toggleZoomByConfig (config) {
|
const zoom = this.map.getZoom()
|
var checked = config.checked
|
if (checked && config.minZoom) {
|
if (zoom > config.minZoom) {
|
this.show(config)
|
} else {
|
this.hide(config)
|
}
|
}
|
}
|
|
load (config) {
|
var code = config.code
|
var wfs = config.wfs
|
var wms = config.wms
|
var url = config.url
|
var checked = config.checked
|
// 判断是否已经加载过，加载过就 直接得到对象调用 显示函数
|
var layer = this.layers[code]
|
// todo if是不是太多了
|
if (checked) {
|
if ((wfs || wms || url)) {
|
if (layer) {
|
this.show(code)
|
} else {
|
layer = this.L.featureGroup({}).addTo(this.map)
|
this.layers[code] = layer
|
}
|
}
|
// 2. 判断类型
|
if (wfs) {
|
// 3. 实例化具体service
|
var wfsLayerService = new WfsLayerService(config)
|
wfsLayerService.init(layer)
|
this.setZIndex(layer)
|
} else if (wms) {
|
var wmsLayerService = new WmsLayerService(config)
|
wmsLayerService.init(layer)
|
} else if (url) {
|
var busiLayerService = new BusiLayerService(config)
|
busiLayerService.init(layer)
|
}
|
}
|
var eventLayerService = new EventLayerService(config)
|
eventLayerService.init()
|
}
|
|
show (config) {
|
var layer = this.layers[config.code]
|
if (layer) {
|
layer.addTo(this.map)
|
this.setZIndex(layer)
|
} else {
|
this.load(config)
|
}
|
}
|
|
hide (config) {
|
var layer = this.layers[config.code]
|
layer && this.map.removeLayer(layer)
|
// this.load(config)
|
}
|
|
toggle (code) {
|
|
}
|
|
/**
|
*
|
* 根据传的 feature对象定位
|
* @param code
|
* @param feature
|
*/
|
flyByFeature (feature, code) {
|
const type = feature.geometry.type
|
var point = []
|
switch (type) {
|
case 'Point':
|
point = clone(feature.geometry.coordinates)
|
break
|
case 'MultiLineString':
|
var coordinates = feature.geometry.coordinates
|
point = clone(coordinates[parseInt(coordinates.length / 2)][0])
|
break
|
}
|
window.map.flyTo(point.reverse(), 15)
|
code && this.openPopup(code, feature.id)
|
}
|
|
openPopup (layerId, id) {
|
const layer = this.layers[layerId]
|
|
if (layer.eachLayer) {
|
layer.eachLayer(function (layer) {
|
const layers = layer.getLayers()
|
for (var i = 0; i < layers.length; i++) {
|
const lay = layers[i]
|
const feature = lay.feature
|
lay.closePopup()
|
if (feature.id === id) {
|
lay.openPopup()
|
break
|
}
|
}
|
})
|
}
|
/* for (var k in this.layers) {
|
var layerGroup = this.layers[k]
|
layerGroup.eachLayer(function (layer) {
|
console.log(layer)
|
console.log(layer.getAttribution())
|
})
|
var layers = layerGroup.getLayers()
|
if (layers) {
|
for (var m = 0; m < layers.length; m++) {
|
var layer = layers[m]
|
console.log(layer)
|
console.log(layer.getLayerId(val.id))
|
/!* var feature = layer.feature
|
if (feature.id === layerId) {
|
this.map.flyToBounds(bound)
|
return layer
|
} *!/
|
}
|
}
|
} */
|
return null
|
}
|
|
findLayerById (layer, id) {
|
const layers = layer.getLayers
|
if (layers) {
|
this.findLayerById(layer.getLayers(), id)
|
} else {
|
layer.eachLayer(function (layer) {
|
console.log(layer)
|
})
|
}
|
}
|
|
/**
|
* todo 这里无效，貌似是因为geojson加载到地图也是个layergroup
|
*
|
* 设置index,线在最下面，点在上面
|
* @param layerGroup 图层组
|
*/
|
setZIndex (layer) {
|
if (Array.isArray(layer)) {
|
for (var i = 0; i < layer.length; i++) {
|
this.setZIndex(layer[i])
|
}
|
} else {
|
if (layer.getLayers) {
|
this.setZIndex(layer.getLayers())
|
} else {
|
if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
|
layer.bringToBack && layer.bringToBack()
|
} else {
|
layer.bringToFront && layer.bringToFront()
|
}
|
}
|
}
|
}
|
}
|
|
export default LayerFactory
|
