From cb85033879c74f34925a303402c1ad3e4a8646f2 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期一, 10 五月 2021 17:03:54 +0800 Subject: [PATCH] 搜索更换为geoserver wfs,图层顺序,弹窗定位等 --- src/components/LayerController/service/LayerFactory.js | 288 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 225 insertions(+), 63 deletions(-) diff --git a/src/components/LayerController/service/LayerFactory.js b/src/components/LayerController/service/LayerFactory.js index d12719b..f781247 100644 --- a/src/components/LayerController/service/LayerFactory.js +++ b/src/components/LayerController/service/LayerFactory.js @@ -1,89 +1,251 @@ import WfsLayerService from './WfsLayerService' -import BusiLayerService from './BusiLayerService' +import { clone } from '../../../utils/utils' +import { logicMapper, SERVICE_TYPE } from '../../../conf/Constants' import WmsLayerService from './WmsLayerService' +/** + * init 鍙垵濮嬪寲涓�娆� + * start 姣忔璋冪敤鍥惧眰鏄剧ずshow()鏃讹紝閮戒細璋冪敤 + * destory 姣忔璋冪敤鍥惧眰闅愯棌hide()鏃讹紝閮戒細璋冪敤 + * + */ class LayerFactory { constructor (options) { this.L = options.L this.map = window.map this.layers = {} + this.layersLogic = {} + this.minZoomLayers = {} + this.wmsLayers = [] + this.clickSwitch = true // 鍥惧眰鐐瑰嚮寮圭獥寮�鍏� } init (layerConfig) { + this.initConfig(layerConfig) + // wms鏈嶅姟鍙渶瑕佸垵濮嬪寲涓�娆� + this.wmsLayerService = new WmsLayerService(this.wmsLayers) + this.wmsLayerService.init() + } + + initConfig (layerConfig) { // 1. 閬嶅巻layer config - for (var i = 0, l = layerConfig.length; i < l; i++) { - var config = layerConfig[i] - var layers = config.layers - layers && this.init(config.layers) + if (layerConfig) { + for (var i = 0; i < layerConfig.length; i++) { + var config = layerConfig[i] + var layers = config.layers + var childLayer = config.childLayer + var checked = config.checked + /* if (config.groupName) { + const wmsGroupLayerService = new WmsGroupLayerService(config) + wmsGroupLayerService.init() + continue + } */ + layers && this.init(config.layers) + childLayer && this.init(config.childLayer) - var checked = config.checked - checked && this.load(config) + this.initMinZoom(config) + this.loadLogic(config) + checked && this.show(config) + } } } - load (config) { + initMinZoom (config) { + const minZoom = parseInt(config.minZoom) + if (minZoom) { + var configs = this.minZoomLayers[minZoom] + if (configs) { + configs[configs.length] = config + } else { + configs = [config] + } + this.minZoomLayers[minZoom] = configs + } + } + + loadLogic (config) { var code = config.code - var wfs = config.wfs - var wms = config.wms - var url = config.url - // 鍒ゆ柇鏄惁宸茬粡鍔犺浇杩囷紝鍔犺浇杩囧氨 鐩存帴寰楀埌瀵硅薄璋冪敤 鏄剧ず鍑芥暟 - var layer = this.layers[code] - if (!layer) { - layer = this.L.featureGroup({}).addTo(this.map) - // 2. 鍒ゆ柇绫诲瀷 - if (wfs) { - // 3. 瀹炰緥鍖栧叿浣搒ervice - var wfsLayerService = new WfsLayerService(config) - wfsLayerService.init(layer) - this.setZIndex(layer) + var type = config.type + + const file = logicMapper[code] + var logic = this.layersLogic[code] + if (!logic) { + if (file) { + var BusiLayer = require('../logic/' + file) + logic = new BusiLayer() + } else if (type === SERVICE_TYPE.WFS) { + logic = new WfsLayerService(config) + } else if (type === SERVICE_TYPE.WMS) { + var layer = {} + layer[config.code] = config + this.wmsLayers.push(layer) } - if (wms) { - var wmsLayerService = new WmsLayerService(config) - wmsLayerService.init(layer) - } - // 璇锋眰涓氬姟鏁版嵁鎺ュ彛 - if (url) { - var busiLayerService = new BusiLayerService(config) - busiLayerService.init(layer) - } - layer ? (this.layers[code] = layer) : console.log('LayerFactory锛歯ewLayer is null锛宲lease check !!!') - } else { - this.show(code) } - } - - 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) - } - - toggle (code) { - + this.layersLogic[code] = logic + return logic } /** - * 璁剧疆index,绾垮湪鏈�涓嬮潰锛岀偣鍦ㄤ笂闈� - * @param layerGroup 鍥惧眰缁� - */ - setZIndex (layerGroup) { - var layers = layerGroup.getLayers() - if (layers.length > 0) { - var layer = layers[0] - if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) { - layerGroup.bringToBack() - } else { - layerGroup.bringToFront() + * 1. 鍏堣皟鐢ㄥ鐞嗛�昏緫鐨� initLayer 锛屽鏋滄病鏈� 灏卞垱寤轰竴涓� featureGroup + * 2. 濡傛灉瀛樺湪浜嬩欢閫昏緫鐨勮瘽锛岀粦瀹歵ooltip,click浜嬩欢 + * 3. 灏唋ayer娣诲姞鍒癿ap + * 4. 杩斿洖layer + * @param config + * @returns layer + */ + addLayer (config) { + var code = config.code + var logic = this.loadLogic(config) + var layer = (logic && logic.initLayer && logic.initLayer((this.L))) || this.L.featureGroup({}) + + if (logic.bindTooltip) { + // 鍏ㄥ眬tips浣嶇疆 + layer.bindTooltip(logic.bindTooltip, { direction: 'top', offset: [0, -15], sticky: false }) + } + // 璋冪敤click浜嬩欢 + if (logic.clickListener) { + layer.on('click', logic.clickListener) + } + layer.addTo(this.map) + this.layers[code] = layer + return layer + } + + /** + * 濡傛灉 瀛樺湪宸茬粡鍔犺浇浜嗙殑瀵硅薄锛屽氨鐩存帴鍔犲埌map + * 濡傛灉 涓嶅瓨鍦ㄥ垯 璋冪敤 addLayer 鍙� 閫昏緫绫荤殑init 杩涜鍒濆鍖栨搷浣� + * 濡傛灉 瀛樺湪start鍑芥暟锛屽垯璋冪敤 + * @param config + */ + show (config) { + var index = config.index + var layer = this.layers[config.code] + var logic = this.loadLogic(config) + if (layer) { + if (!this.map.hasLayer(layer)) { + index && layer.setZIndex(index) + layer.addTo(this.map) } + } else { + logic && logic.init(this.addLayer(config), this.L) + } + logic && logic.start && logic.start() + this.wmsLayerService && this.wmsLayerService.add(config) + } + + hide (config) { + const code = config.code + const layer = this.layers[code] + layer && this.map.removeLayer(layer) + const logic = this.loadLogic(config) + logic && logic.destory && logic.destory() + this.wmsLayerService && this.wmsLayerService.remove(config) + } + + /** + * 鎺у埗鏄剧ず鐨勭骇鍒� + * @param layerConfig + */ + initEvent (layerConfig) { + // this.map.on('zoomend ', () => this.toggleByZoom()) + } + + toggleByZoom () { + const zoom = this.map.getZoom() + for (var k in this.minZoomLayers) { + const configs = this.minZoomLayers[k] + for (var j in configs) { + const config = configs[j] + const checked = config.checked + // console.log(zoom) + // console.log(k) + if (checked && zoom > k) { + this.show(config) + } else if (checked && zoom < k) { + this.hide(config) + } + } + } + } + + /** + * + * 鏍规嵁浼犵殑 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 + var coordinate = coordinates[parseInt(coordinates.length / 2)][0] + if (coordinate.length > 2) { + point = [coordinate[0], coordinate[1]] + } + break + case 'LineString': + var lineString = feature.geometry.coordinates + point = lineString[parseInt(lineString.length / 2)][0] + break + } + console.log(point) + window.map.flyTo(point.reverse(), 17) + 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) + }) } } } -- Gitblit v1.8.0