| | |
| | | */ |
| | | import AjaxUtils from '@/utils/AjaxUtils' |
| | | import store from '@/store' |
| | | import styles from '@/conf/Styles' |
| | | |
| | | class ServiceLayerHelper { |
| | | constructor (options) { |
| | |
| | | this.geojsonArray = {} // 初始的geojson集 |
| | | this.layerConfig = {} |
| | | this.regex = /\{(.+?)\}/g // 匹配{} |
| | | this.popupComp = null |
| | | } |
| | | |
| | | getTileLayer (code) { |
| | |
| | | /** |
| | | * 根据配置文件初始化业务底图 |
| | | */ |
| | | initServiceLayers (layerConfig) { |
| | | initServiceLayers (layerConfig, popupComp) { |
| | | this.layerConfig = layerConfig |
| | | this.popupComp = popupComp |
| | | this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine) |
| | | // this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint) |
| | | this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint) |
| | | } |
| | | |
| | | /** |
| | |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 请求wfs数据 |
| | | * @param url |
| | | * @param item |
| | | */ |
| | | loadGeojsonLayer (url, item) { |
| | | var matches = this.regex.exec(url) |
| | | var matchValue = item[matches[1]] |
| | |
| | | } |
| | | |
| | | /** |
| | | * 加载点数据 |
| | | * @param res |
| | | */ |
| | | loadGeojson (res, layer) { |
| | | * 加载gis server返回的geoson数据到地图中展示 |
| | | * @param res |
| | | */ |
| | | loadGeojson (res, opt) { |
| | | var that = this |
| | | var icon = layer.icon |
| | | var icon = opt.icon |
| | | const featureGroup = that.L.featureGroup().addTo(that.map) |
| | | that.L.geoJSON(res.features, { |
| | | const geojson = that.L.geoJSON(res.features, { |
| | | style: function (feature) { |
| | | return { |
| | | fill: true, |
| | | weight: 2, |
| | | fillColor: '#06cccc', |
| | | color: '#06cccc', |
| | | fillOpacity: 0.2, |
| | | opacity: 0.8, |
| | | dashArray: '10,4', |
| | | dashSpeed: -10 |
| | | 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) { |
| | |
| | | img: { |
| | | // url: 'assets/images/map/marker-icon.png', |
| | | url: '/assets/images/map/' + icon, |
| | | size: [20, 20] |
| | | size: styles.defaultLineStyle.size |
| | | } |
| | | }) |
| | | } |
| | | }).bindPopup(function (layer) { |
| | | }).addTo(featureGroup).bringToFront() |
| | | that.popupComp.setDatas(layer) |
| | | that.popupComp.setShow() |
| | | return that.popupComp.$el |
| | | }, { |
| | | className: 's-map-popup', |
| | | minWidth: 300, |
| | | closeButton: false, |
| | | autoClose: false |
| | | }).bindTooltip(function (layer) { |
| | | console.log(layer) |
| | | return layer.feature.properties.name |
| | | }).on('mouseover', function (e) { |
| | | console.log(e) |
| | | var layer = e.layer |
| | | layer.setStyle({ weight: 8, color: '#00ffff' }) |
| | | }).on('mouseout', function (e) { |
| | | var layer = e.layer |
| | | layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color }) |
| | | }).addTo(featureGroup).tooltip() |
| | | 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 |
| | | } |
| | | |