| | |
| | | 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 |
| | |
| | | init (layerConfig) { |
| | | // 1. 遍历layer config |
| | | if (layerConfig) { |
| | | for (var i = 0, l = layerConfig.length; i < l; i++) { |
| | | for (var i = 0; i < layerConfig.length; i++) { |
| | | var config = layerConfig[i] |
| | | var layers = config.layers |
| | | var childLayer = 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) |
| | | } |
| | | } |
| | | } |
| | |
| | | var wfs = config.wfs |
| | | var wms = config.wms |
| | | var url = config.url |
| | | var checked = config.checked |
| | | // 判断是否已经加载过,加载过就 直接得到对象调用 显示函数 |
| | | var layer = this.layers[code] |
| | | if (!layer) { |
| | | layer = this.L.featureGroup({}).addTo(this.map) |
| | | // 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) |
| | | } |
| | | if (wms) { |
| | | } else if (wms) { |
| | | var wmsLayerService = new WmsLayerService(config) |
| | | wmsLayerService.init(layer) |
| | | } |
| | | // 请求业务数据接口 |
| | | if (url) { |
| | | } else if (url) { |
| | | var busiLayerService = new BusiLayerService(config) |
| | | busiLayerService.init(layer) |
| | | } |
| | | layer ? (this.layers[code] = layer) : console.log('LayerFactory:newLayer is null,please check !!!') |
| | | } else { |
| | | this.show(code) |
| | | } |
| | | var eventLayerService = new EventLayerService(config) |
| | | eventLayerService.init() |
| | | } |
| | | |
| | | show (config) { |
| | |
| | | hide (config) { |
| | | var layer = this.layers[config.code] |
| | | layer && this.map.removeLayer(layer) |
| | | // this.load(config) |
| | | } |
| | | |
| | | toggle (code) { |
| | |
| | | } |
| | | |
| | | /** |
| | | * todo 这里无效,貌似是因为geojson加载到地图也是个layergroup |
| | | * |
| | | * 设置index,线在最下面,点在上面 |
| | | * @param layerGroup 图层组 |
| | | * 根据传的 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.getLayers()) |
| | | } else { |
| | | if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) { |
| | | layer.bringToBack() |
| | | layer.bringToBack && layer.bringToBack() |
| | | } else { |
| | | layer.bringToFront() |
| | | layer.bringToFront && layer.bringToFront() |
| | | } |
| | | } |
| | | } |