import { pulseEffect } from '../../utils/utils'
|
import Popup from '@views/popup/Popup'
|
import { LAYERPROPS, LAYERS } from '../../conf/Constants'
|
|
/**
|
* 整合定位、高亮、弹窗
|
* @param feature geojson
|
* @param config 图层的config
|
*/
|
export const locate = function (feature, config, filter) {
|
fitBounds(feature)
|
highlight(feature, config.icon)
|
const centerPoint = getCenterPoint(feature)
|
const params = { LAYERS: config.layerGroup || config.typeName, QUERY_LAYERS: config.layerGroup || config.typeName }
|
const filters = []
|
if (config.filter) {
|
filters[filters.length] = config.filter
|
}
|
if (filter) {
|
filters[filters.length] = filter
|
}
|
if (filters.length > 0) {
|
params.CQL_FILTER = filters.join(' AND ')
|
}
|
console.log(centerPoint)
|
loadPointWfs(centerPoint, params)
|
}
|
|
/**
|
* 加载点范围的wfs数据并弹窗
|
* @param latlng 点的经纬度坐标
|
* @param params
|
*/
|
export const loadPointWfs = function (latlng, params) {
|
setTimeout(() => {
|
window.mapManager.loadWfsDatas(latlng, params).then((res) => {
|
openPropsPopup(latlng, res.features)
|
})
|
}, 1000)
|
}
|
/**
|
* 根据传的 feature对象定位，
|
* @param code
|
* @param feature
|
*/
|
export const fitBounds = function (feature) {
|
const type = feature.geometry.type
|
if (type === 'Point') {
|
var point = feature.geometry.coordinates
|
point = [point[1], point[0]]
|
window.map.setView(point, 19)
|
} else {
|
window.map.fitBounds(window.L.geoJSON(feature).getBounds())
|
}
|
}
|
|
export const highlight = function (feature, icon) {
|
/* if (Array.isArray(feature)) {
|
for (let i = 0; i < feature.length; i++) {
|
highlight(feature[i], icon)
|
}
|
} else { */
|
window.mapManager.clearHighlight()
|
const L = window.L
|
const type = feature.geometry.type
|
const highlightLayer = window.mapManager.hightlightLayer
|
if (type === 'Point') {
|
// 叠加一个大尺寸的图标
|
let point = feature.geometry.coordinates
|
point = [point[1], point[0]]
|
pointZoom(point, icon)
|
pulseEffect(point)
|
} else {
|
L.geoJSON(feature, {
|
style: function () {
|
return {
|
color: 'red'
|
}
|
}
|
}).addTo(highlightLayer)
|
}
|
}
|
|
/**
|
* 高亮点位图标
|
* @param latlng 经纬度
|
* @param icon 图标
|
*/
|
export const pointZoom = function (latlng, icon) {
|
const L = window.L
|
const highlightLayer = window.mapManager.hightlightLayer
|
if (icon) {
|
L.marker(latlng, {
|
icon: L.icon({
|
iconUrl: '/assets/images/map/' + icon,
|
iconSize: [30, 30],
|
iconAnchor: [15, 15]
|
})
|
}).addTo(highlightLayer)
|
}
|
}
|
|
/**
|
* 弹出属性列表展示窗口
|
* @param xy 弹出窗口跟随要素的经纬度
|
* @param layer 查询指定的图层。不指定时，默认为勾选的图层
|
*/
|
export const openPropsPopup = function (xy, features) {
|
const lt = window.map.latLngToContainerPoint(xy)
|
const datas = popupDatas(features)
|
if (datas.length > 0) {
|
window.$layer.open({
|
content: {
|
comp: Popup, // 组件
|
data: { // 传递的参数
|
datas: datas
|
}
|
},
|
title: '', // 标题
|
left: lt.x,
|
top: lt.y
|
})
|
}
|
}
|
|
export const getCenterPoint = function (feature) {
|
const L = window.L
|
const type = feature.geometry.type
|
var coordinates = feature.geometry.coordinates
|
|
if (type === 'Point') {
|
return [coordinates[1], coordinates[0]]
|
} else {
|
return L.geoJSON(feature, {}).getBounds().getSouthWest()
|
// return [center.lat, center.lng]
|
|
// return turf.centerOfMass(L.geoJSON(feature, {}).toGeoJSON())
|
}
|
}
|
|
const popupDatas = function (features) {
|
const datas = []
|
console.log(features)
|
if (features) {
|
for (var i = 0; i < features.length; i++) {
|
const feature = features[i]
|
const id = feature.id
|
const properties = feature.properties
|
const ids = id.split('.')
|
|
const propValues = LAYERPROPS[ids[0]]
|
const contents = {}
|
if (!propValues) {
|
continue
|
}
|
if (id.indexOf('pipesegment') >= 0) {
|
continue
|
}
|
for (const k in properties) {
|
if (propValues[k]) {
|
contents[propValues[k]] = properties[k]
|
}
|
}
|
const data = {
|
title: LAYERS[ids[0]],
|
name: feature.id,
|
content: contents,
|
feature: feature
|
}
|
if (id.indexOf('pipeline') >= 0) {
|
data.tableList = listPipeSection(features, properties.subchacode || properties.pipecode)
|
}
|
datas.push(data)
|
console.log(properties)
|
}
|
}
|
return datas
|
}
|
|
// 管线信息绑定所属管段
|
export const listPipeSection = function (features, code) {
|
const list = []
|
if (features) {
|
for (var i = 0; i < features.length; i++) {
|
const feature = features[i]
|
const id = feature.id
|
if (id.indexOf('pipesegment') < 0) {
|
continue
|
}
|
const properties = feature.properties
|
if (properties.pipecode === code) {
|
list[list.length] = properties
|
}
|
}
|
}
|
return list
|
}
|
|
export const getLayer = function (layerId, id) {
|
const layer = this.layers[layerId]
|
|
if (layer) {
|
layer.eachLayer(function (layer) {
|
const layers = layer.getLayers()
|
for (var i = 0; i < layers.length; i++) {
|
const lay = layers[i]
|
const feature = lay.feature
|
if (feature.id === id) {
|
return lay
|
}
|
}
|
})
|
}
|
return null
|
}
|
