import { pulseEffect, reversePolyLine } 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)
|
setTimeout(() => {
|
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 ')
|
}
|
window.mapManager.loadWfsDatas(centerPoint, params).then((res) => {
|
openPropsPopup(centerPoint, res.features)
|
})
|
}, 1000)
|
}
|
/**
|
* 根据传的 feature对象定位，
|
* @param code
|
* @param feature
|
*/
|
export const fitBounds = function (feature) {
|
const type = feature.geometry.type
|
switch (type) {
|
case 'Point':
|
var point = feature.geometry.coordinates
|
point = [point[1], point[0]]
|
window.map.setView(point, 17)
|
break
|
case 'MultiLineString':
|
window.map.fitBounds(window.L.geoJSON(feature).getBounds())
|
break
|
case 'LineString':
|
window.map.fitBounds(window.L.polyline(reversePolyLine(feature)).getBounds())
|
break
|
}
|
}
|
|
export const highlight = function (feature, icon) {
|
if (Array.isArray(feature)) {
|
for (let i = 0; i < feature.length; i++) {
|
highlight(feature[i], icon)
|
}
|
} else {
|
const L = window.L
|
const type = feature.geometry.type
|
window.mapManager.clearHighlight()
|
const highlightLayer = window.mapManager.hightlightLayer
|
if (type === 'MultiLineString') {
|
L.geoJSON(feature, {
|
style: function () {
|
return {
|
fillColor: 'red',
|
color: 'red'
|
}
|
}
|
}).addTo(highlightLayer)
|
} else if (type === 'Point') {
|
// 叠加一个大尺寸的图标
|
let point = feature.geometry.coordinates
|
point = [point[1], point[0]]
|
|
if (icon) {
|
L.marker(point, {
|
icon: L.icon({
|
iconUrl: '/assets/images/map/' + icon,
|
iconSize: [30, 30],
|
iconAnchor: [15, 15]
|
})
|
}).addTo(highlightLayer)
|
}
|
pulseEffect(point)
|
} else if (type === 'LineString') {
|
L.polyline(reversePolyLine(feature), { color: 'red' }).addTo(highlightLayer)
|
}
|
}
|
}
|
|
/**
|
* 弹出属性列表展示窗口
|
* @param xy 弹出窗口跟随要素的经纬度
|
* @param layer 查询指定的图层。不指定时，默认为勾选的图层
|
*/
|
export const openPropsPopup = function (xy, features) {
|
const lt = window.map.latLngToContainerPoint(xy)
|
const datas = popupDatas(features)
|
console.log(datas)
|
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 type = feature.geometry.type
|
var point = []
|
switch (type) {
|
case 'Point':
|
point = 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
|
}
|
if (point.length > 2) {
|
point.splice(2, 1)
|
}
|
return point.reverse()
|
}
|
|
const popupDatas = function (features) {
|
const datas = []
|
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
|
}
|
for (const k in properties) {
|
if (propValues[k]) {
|
contents[propValues[k]] = properties[k]
|
}
|
}
|
datas.push({
|
title: LAYERS[ids[0]],
|
name: feature.id,
|
content: contents
|
})
|
console.log(properties)
|
}
|
}
|
return datas
|
}
|
|
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
|
}
|
