1778 lines
61 KiB
Vue
1778 lines
61 KiB
Vue
import * as MapStyle from './map-style'
|
||
// import {
|
||
// createStorageAndGoodsPopup,
|
||
// createGeneralPopup,
|
||
// createGudEvnPopupInfoWf,
|
||
// } from './createMarkerPopup'
|
||
import { ElNotification } from 'element-plus'
|
||
import { iconConfig } from '@/supermap/config/iconConfig'
|
||
import { resourceConfig } from '@/supermap/config/layerConfig'
|
||
// import { getTopicResourceDetailInformation } from '@/api/forestFireThreeScreens/index.js'
|
||
import mybus from '@/myplugins/mybus'
|
||
// 引入空间计算文件
|
||
import * as turf from '@turf/turf'
|
||
|
||
// import {
|
||
// createDispatchResourcePopup,
|
||
// createDistanceAndAreaPopup,
|
||
// createGeneralPopup,
|
||
// createGudEvnPopup,
|
||
// createStorageAndGoodsPopup,
|
||
// } from './createMarkerPopup';
|
||
// import { layerConfig } from '@/supermap/config/layerConfig';
|
||
const L = window.L || {}
|
||
const SuperMap = window.SuperMap || {}
|
||
const echarts = require('echarts')
|
||
// const test = new dom({
|
||
// template: '<general-popup :data="mapData"></general-popup>',
|
||
// data() {
|
||
// return {
|
||
// mapData: hello
|
||
// };
|
||
// },
|
||
// components: {
|
||
// GeneralPopup
|
||
// }
|
||
// });
|
||
// console.log(
|
||
// '%c 👩❤️💋👨: test ',
|
||
// 'font-size:16px;background-color:#d7d724;color:black;',
|
||
// test.initDom()
|
||
// );
|
||
// console.log(
|
||
// '%c 🥩: test ',
|
||
// 'font-size:16px;background-color:#0b1e8e;color:white;',
|
||
// test.initDom().toString()
|
||
// );
|
||
/**
|
||
* @description: 添加html动态图层
|
||
* @param {type} point property
|
||
* @return {String} html
|
||
*/
|
||
const blinkMarker = function (property) {
|
||
// 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串
|
||
var tempDivEle = document.createElement('div')
|
||
var divEle = document.createElement('div')
|
||
var spanEl = document.createElement('span')
|
||
var aEl = document.createElement('a')
|
||
tempDivEle.append(divEle)
|
||
divEle.append(spanEl)
|
||
spanEl.append(aEl)
|
||
// 设置上基础的样式
|
||
spanEl.classList.add('pulse-icon')
|
||
aEl.classList.add('dive-icon')
|
||
// 操作样式
|
||
var style = document.createElement('style')
|
||
style.type = 'text/css'
|
||
document.head.appendChild(style)
|
||
// sheet = style.sheet;
|
||
// 主体颜色
|
||
if (property) {
|
||
if (property.color) {
|
||
aEl.style.backgroundColor = property.color
|
||
if (!property.diveColor) {
|
||
aEl.style.boxShadow = '0 0 6px 2px ' + property.color
|
||
}
|
||
}
|
||
// 标记大小
|
||
if (property.iconSize) {
|
||
spanEl.style.width = property.iconSize[0] + 'px'
|
||
spanEl.style.height = property.iconSize[1] + 'px'
|
||
}
|
||
// 发散的color
|
||
if (property.diveColor) {
|
||
// 发散的重度
|
||
if (property.level) {
|
||
aEl.style.boxShadow =
|
||
'0 0 ' +
|
||
property.level * 3 +
|
||
'px ' +
|
||
property.level +
|
||
'px ' +
|
||
property.diveColor
|
||
} else {
|
||
aEl.style.boxShadow = '0 0 6px 2px ' + property.diveColor
|
||
}
|
||
}
|
||
// 发散的重度
|
||
if (property.level) {
|
||
if (property.diveColor) {
|
||
aEl.style.boxShadow =
|
||
'0 0 ' +
|
||
property.level * 3 +
|
||
'px ' +
|
||
property.level +
|
||
'px ' +
|
||
property.diveColor
|
||
} else if (property.color) {
|
||
aEl.style.boxShadow =
|
||
'0 0 ' +
|
||
property.level * 3 +
|
||
'px ' +
|
||
property.level +
|
||
'px ' +
|
||
property.color
|
||
} else {
|
||
aEl.style.boxShadow =
|
||
'0 0 ' +
|
||
property.level * 3 +
|
||
'px ' +
|
||
property.level +
|
||
'px rgba(0,0,0,0.3)'
|
||
}
|
||
}
|
||
|
||
// 闪烁的速度
|
||
if (property.speedTime) {
|
||
aEl.style.setProperty(
|
||
'animation',
|
||
'pulsate ' + property.speedTime + 's infinite'
|
||
)
|
||
}
|
||
}
|
||
return tempDivEle.innerHTML
|
||
}
|
||
/** *
|
||
* 多屏联动功能接口
|
||
* @param mapObj 设置全局参数对象
|
||
* @param hiMapFun 地图通用方法对象
|
||
* @constructor
|
||
*/
|
||
const MultiScreenFun = function (mapObj, hiMapFun) {
|
||
// 初始化全局变量
|
||
const degreeToMeter = mapObj.DEGGER_TO_METER // degreeToMeter 度与米的换算单位
|
||
const layerGroup = mapObj.layerGroup // 全局图层记录数组
|
||
const featureGroup = mapObj.featureGroup // 全局图层数组
|
||
const map = mapObj.map // 全局地图对象
|
||
const drawFill = mapObj.drawFill
|
||
|
||
/**
|
||
* 根据传入的几何多边形，查询给定的多边形内的资源
|
||
* @param GeometryLayer { Ploygon } 面图层
|
||
* @param layerConfigList { Array} 要查询的图层数组
|
||
* @param researchFilterCallback {Function} 要执行的与后台数据库过滤的回调函数
|
||
* @param getCameraPopupInfo {Function} 获取视频弹窗信息的方法
|
||
* @param resourceStoragePopupInfo {Function} 获取仓库加物资弹窗的方法
|
||
* @param getLayerPopupInfo {Function} 获取普通弹窗的方法
|
||
* @param callBackFun {Function} 要执行的回调函数,可选
|
||
*/
|
||
function _geometricQuery(
|
||
geometryLayer,
|
||
layerConfigList,
|
||
researchFilterCallback,
|
||
{
|
||
getCameraPopupInfo = null,
|
||
getStoragePopupInfo = null,
|
||
getLayerPopupInfo = null,
|
||
callBackFun = null,
|
||
} = {}
|
||
) {
|
||
// 定义图层配置对象
|
||
const layerConfigObjects = {}
|
||
// 查询参数数据
|
||
const queryParams = []
|
||
// 构造查询数组
|
||
debugger
|
||
layerConfigList.forEach((layerConfig) => {
|
||
// 当前图层配置对象
|
||
const layerConfigObject = {}
|
||
const layerConfigInfo = JSON.parse(layerConfig.configInfo)
|
||
const layerName = layerConfig.layerCode
|
||
layerConfigObject['layerName'] = layerName
|
||
layerConfigObject['layerConfigInfo'] = layerConfigInfo
|
||
layerConfigObject['layerConfig'] = layerConfig
|
||
layerConfigObjects[layerConfigInfo.layerName] = layerConfigObject
|
||
// 查看图层组里面是否存在该图层，存在删除。防止重复渲染
|
||
if (layerGroup.get(layerName)) {
|
||
hiMapFun.removeLayerByLayerName(layerName)
|
||
}
|
||
// 构造范围查询的数据集数组
|
||
const queryObject = {}
|
||
queryObject.name = layerConfigInfo.layerName
|
||
queryParams.push(queryObject)
|
||
})
|
||
const queryUrl = _mapConfig.config.QUERY_URL
|
||
// 几何查询
|
||
const param = new SuperMap.QueryByGeometryParameters({
|
||
queryParams: queryParams,
|
||
geometry: geometryLayer,
|
||
})
|
||
L.supermap
|
||
.queryService(queryUrl)
|
||
.queryByGeometry(param, (serviceResult) => {
|
||
console.log('serviceResult234324', serviceResult)
|
||
// 判断查询是否成功
|
||
if (serviceResult.type === 'processCompleted') {
|
||
// 遍历查询的数据集集合
|
||
debugger
|
||
serviceResult.result.recordsets.forEach((recordset) => {
|
||
console.log('资源进入多次', recordset)
|
||
// 获取数据集名称
|
||
const datasetName = recordset.datasetName
|
||
// 获取属性名称
|
||
const features = recordset.features.features
|
||
if (features.length > 0) {
|
||
const uuidObjects = {}
|
||
const featureObjects = {}
|
||
// 判断查询的是否为视频点数据
|
||
if (datasetName === 'YJPT_VideoPoints@HISENSE_himap') {
|
||
features.forEach((feature) => {
|
||
if (
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('CAMERA_INDEX_CODE')
|
||
] !== ''
|
||
) {
|
||
// 去除无用数据
|
||
const cameraData = {}
|
||
// cameraData['UUID'] = feature.properties.CAMERA_INDEX_CODE;
|
||
// cameraData['SMX'] = feature.properties.SMX;
|
||
// cameraData['SMY'] = feature.properties.SMY;
|
||
cameraData['UUID'] =
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('CAMERA_INDEX_CODE')
|
||
]
|
||
cameraData['SMX'] = feature.geometry.coordinates[0]
|
||
cameraData['SMY'] = feature.geometry.coordinates[1]
|
||
uuidObjects[
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('CAMERA_INDEX_CODE')
|
||
]
|
||
] = cameraData
|
||
featureObjects[
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('CAMERA_INDEX_CODE')
|
||
]
|
||
] = feature
|
||
}
|
||
})
|
||
} else {
|
||
features.forEach((feature) => {
|
||
if (
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('UUID')
|
||
] !== ''
|
||
) {
|
||
// 去除无用数据
|
||
const resourceData = {}
|
||
// resourceData['UUID'] = feature.properties.UUID;
|
||
// resourceData['SMX'] = feature.properties.SMX;
|
||
// resourceData['SMY'] = feature.properties.SMY;
|
||
resourceData['UUID'] =
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('UUID')
|
||
]
|
||
resourceData['SMX'] = feature.geometry.coordinates[0]
|
||
resourceData['SMY'] = feature.geometry.coordinates[1]
|
||
uuidObjects[
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('UUID')
|
||
]
|
||
] = resourceData
|
||
featureObjects[
|
||
feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('UUID')
|
||
]
|
||
] = feature
|
||
}
|
||
})
|
||
}
|
||
// 获取当前图层的配置文件
|
||
const layerConfigObject = layerConfigObjects[datasetName]
|
||
// 获取当前地图数据点的UUID，加上关键字进行过滤，得到过滤后的集合
|
||
// researchFilterCallback(uuidObjects, layerConfigObject.layerConfig).then((response) => {
|
||
// const queryResults = response.data;
|
||
// if (queryResults.length > 0) {
|
||
// 根据返回的数据过滤超图库查询的点位数据
|
||
// const filterFeatures = [];
|
||
// 遍历找出过滤后的超图库数据
|
||
// queryResults.forEach(queryResult => {
|
||
// if (datasetName === 'YJPT_VideoPoints@HISENSE_himap') {
|
||
// filterFeatures.push(featureObjects[queryResult.indexCode]);
|
||
// } else {
|
||
// filterFeatures.push(featureObjects[queryResult.uuid]);
|
||
// }
|
||
// });
|
||
// // 构造传给callBackFun方法参数对象
|
||
// 将符合要求的点位信息转成GeoJson，存入地图对象上图
|
||
console.log('上图features应该是个数组', features)
|
||
|
||
const affectResource = L.geoJSON(features, {
|
||
onEachFeature: (feature, layer) => {
|
||
layer.setIcon(
|
||
MapStyle.featureIcon(layerConfigObject.layerConfigInfo)
|
||
)
|
||
layer.configInfo = layerConfigObject.layerConfigInfo
|
||
// 给查询出的每一个点添加点击弹窗事件
|
||
if (
|
||
layerConfigObject.layerName === 'multi_screen_camera' &&
|
||
getCameraPopupInfo != null
|
||
) {
|
||
// 当查询的为视频监控点时（单独处理）
|
||
layer.on('click', function (e) {
|
||
// const indexCode = e.sourceTarget.feature.properties.CAMERA_INDEX_CODE;
|
||
const indexCode =
|
||
e.sourceTarget.feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('CAMERA_INDEX_CODE')
|
||
]
|
||
const layerConfigInfo = e.sourceTarget.configInfo
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
getCameraPopupInfo(indexCode, layerConfigInfo).then(
|
||
(response) => {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
const elementHtml =
|
||
// hiMapFun.createGeneralPopupInfo(response)
|
||
L.popup({ className: 'multi-general-popup-style' })
|
||
.setLatLng(latlng)
|
||
// .setContent(elementHtml)
|
||
.openOn(map)
|
||
}
|
||
)
|
||
})
|
||
} else {
|
||
// 当查询的不是视频监控点时
|
||
layer.on('click', function (e) {
|
||
// const uuid = e.sourceTarget.feature.properties.UUID;
|
||
const uuid =
|
||
e.sourceTarget.feature.properties[
|
||
hiMapFun.convertCaseOfAttributes('UUID')
|
||
]
|
||
const layerConfigInfo = e.sourceTarget.configInfo
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
if (
|
||
layerConfigObject.layerName ===
|
||
'multi_screen_storage' &&
|
||
getStoragePopupInfo != null
|
||
) {
|
||
// 仓库+物资信息的弹窗展示方式
|
||
getStoragePopupInfo(uuid, layerConfigInfo).then(
|
||
(response) => {
|
||
response.entityData.goodsDetail.push(
|
||
{
|
||
GOODSNAME: '哈哈哈哈',
|
||
TOTALQUANTITY: 2,
|
||
UNIT: '个',
|
||
},
|
||
{
|
||
GOODSNAME: '哈哈哈哈',
|
||
TOTALQUANTITY: 2,
|
||
UNIT: '个',
|
||
},
|
||
{
|
||
GOODSNAME: '哈哈哈哈',
|
||
TOTALQUANTITY: 2,
|
||
UNIT: '个',
|
||
},
|
||
{
|
||
GOODSNAME: '哈哈哈哈',
|
||
TOTALQUANTITY: 2,
|
||
UNIT: '个',
|
||
}
|
||
)
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
const elementHtml =
|
||
hiMapFun.createStorageAndGoodsPopupInfo(response)
|
||
L.popup({ className: 'multi-general-popup-style' })
|
||
.setLatLng(latlng)
|
||
.setContent(elementHtml)
|
||
.openOn(map)
|
||
}
|
||
)
|
||
} else if (getLayerPopupInfo) {
|
||
// 通用资源弹窗展示方式
|
||
debugger
|
||
getLayerPopupInfo(
|
||
uuid,
|
||
layerConfigInfo.resourceType,
|
||
layerConfigInfo
|
||
).then((response) => {
|
||
if (response.data) {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
const elementHtml =
|
||
// hiMapFun.createGeneralPopup(response)
|
||
L.popup({ className: 'multi-general-popup-style' })
|
||
.setLatLng(latlng)
|
||
// .setContent(elementHtml)
|
||
.openOn(map)
|
||
} else {
|
||
ElNotification.warning({
|
||
title: '提示',
|
||
message: '暂未查询到相关资源详情',
|
||
position: 'bottom-right',
|
||
type: 'error',
|
||
duration: 1000,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
hiMapFun.removeLayerByLayerName(layerConfigObject.layerName)
|
||
featureGroup.addLayer(affectResource)
|
||
layerGroup.set(layerConfigObject.layerName, affectResource)
|
||
// 构造输出函数
|
||
if (callBackFun) {
|
||
// 构造传给callBackFun方法参数对象
|
||
const paramObject = {}
|
||
paramObject['professionalData'] = queryResults
|
||
paramObject['featurePoints'] = filterFeatures
|
||
paramObject['layerConfigObject'] = layerConfigObject
|
||
paramObject['layers'] = affectResource
|
||
callBackFun(paramObject)
|
||
}
|
||
// }
|
||
// });
|
||
}
|
||
})
|
||
} else {
|
||
ElNotification.warning({
|
||
title: '提示',
|
||
message: '几何查询错误，请重试',
|
||
position: 'bottom-right',
|
||
type: 'error',
|
||
duration: 1000,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 根据传入的几何多边形，查询给定的多边形内的资源
|
||
* @param GeometryLayer { Ploygon } 面图层
|
||
* @param layerConfigList { Array} 要查询的图层数组
|
||
* @param researchFilterCallback {Function} 要执行的与后台数据库过滤的回调函数
|
||
* @param getCameraPopupInfo {Function} 获取视频弹窗信息的方法
|
||
* @param resourceStoragePopupInfo {Function} 获取仓库加物资弹窗的方法
|
||
* @param getLayerPopupInfo {Function} 获取普通弹窗的方法
|
||
* @param callBackFun {Function} 要执行的回调函数,可选
|
||
*/
|
||
function _newGeometricQuery(
|
||
geometryLayer,
|
||
layerConfigList,
|
||
researchFilterCallback,
|
||
{
|
||
getCameraPopupInfo = null,
|
||
getStoragePopupInfo = null,
|
||
getLayerPopupInfo = null,
|
||
callBackFun = null,
|
||
} = {}
|
||
) {
|
||
// 定义图层配置对象
|
||
const layerConfigObjects = {}
|
||
// 查询参数数据
|
||
const queryParams = []
|
||
// 构造查询数组
|
||
debugger
|
||
layerConfigList.forEach((layer) => {
|
||
const layerName = layer.layerName
|
||
const queryObj = {}
|
||
queryObj.name = layerName
|
||
queryParams.push(queryObj)
|
||
layerConfigObjects[layerName] = layer
|
||
})
|
||
// 清除圈选结果图层
|
||
if (layerGroup.get('circleResult')) {
|
||
hiMapFun.removeLayerByLayerName('circleResult')
|
||
}
|
||
console.log('查看构建是否正确', queryParams, layerConfigObjects)
|
||
const queryUrl = _mapConfig.config.QUERY_URL
|
||
// 几何查询
|
||
const param = new SuperMap.QueryByGeometryParameters({
|
||
queryParams: queryParams,
|
||
geometry: geometryLayer,
|
||
})
|
||
L.supermap
|
||
.queryService(queryUrl)
|
||
.queryByGeometry(param, (serviceResult) => {
|
||
console.log('serviceResult234324', serviceResult)
|
||
// 判断查询是否成功
|
||
if (serviceResult.type === 'processCompleted') {
|
||
debugger
|
||
// 构建查询出来的总的集合
|
||
const result = serviceResult.result.recordsets
|
||
let allFeatures = []
|
||
const uuidList = []
|
||
const resourceList = []
|
||
result.map((item) => {
|
||
const feature = item.features.features
|
||
feature.map((f) => {
|
||
f.layerName = item.datasetName
|
||
f.iconType = item.datasetName + f.properties.resource_type
|
||
return f
|
||
})
|
||
console.log(feature)
|
||
allFeatures = allFeatures.concat(feature)
|
||
})
|
||
console.log('构造完毕的集合', allFeatures)
|
||
// 资源上图
|
||
const layers = []
|
||
allFeatures.map((fe) => {
|
||
const iconUrl = iconConfig[fe.iconType]
|
||
const icon = MapStyle.featureIconByURL(iconUrl)
|
||
const point = {
|
||
lat: fe.geometry.coordinates[1],
|
||
lng: fe.geometry.coordinates[0],
|
||
}
|
||
|
||
const param = {
|
||
resourceType: resourceConfig[fe.layerName],
|
||
uuid: fe.properties.uuid,
|
||
layerName: fe.layerName,
|
||
}
|
||
uuidList.push(fe.properties.uuid)
|
||
resourceList.push({
|
||
// 用于森火三屏圈选
|
||
layerName: fe.layerName,
|
||
uuid: fe.properties.uuid,
|
||
})
|
||
const marker = L.marker(point, { icon, param })
|
||
// 资源点击事件
|
||
marker.on('click', function (e) {
|
||
console.log('eeeeeeeeeeee', e)
|
||
// const uuid = e.sourceTarget.feature.properties.UUID;
|
||
const uuid = e.sourceTarget.options.param.uuid
|
||
const resourceType = e.sourceTarget.options.param.resourceType
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
debugger
|
||
mybus.$emit('trsSupermapData', { uuid, resType: resourceType })
|
||
// // 获取资源详情， 调用外部函数
|
||
// getTopicResourceDetailInformation({uuid, resType: resourceType}).then((response) => {
|
||
// if (response.data) {
|
||
// // 弹窗信息
|
||
// } else {
|
||
// ElNotification.warning({
|
||
// title: '提示',
|
||
// message: '暂未查询到相关资源详情',
|
||
// position: 'bottom-right',
|
||
// type: 'error',
|
||
// duration: 1000
|
||
// });
|
||
// }
|
||
// });
|
||
})
|
||
layers.push(marker)
|
||
})
|
||
console.log('添加资源有错误', layers)
|
||
// 数据传递
|
||
if (callBackFun) {
|
||
callBackFun(layers, uuidList, resourceList).then((res) => {
|
||
debugger
|
||
console.log('收到过滤的图层', res)
|
||
hiMapFun.removeLayerByLayerName('circleResult')
|
||
const markerGroup = L.layerGroup(res)
|
||
featureGroup.addLayer(markerGroup)
|
||
layerGroup.set('circleResult', markerGroup)
|
||
return
|
||
})
|
||
}
|
||
const markerGroup = L.layerGroup(layers)
|
||
featureGroup.addLayer(markerGroup)
|
||
layerGroup.set('circleResult', markerGroup)
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 根据Circle插件画一个Ploygen圆用于范围查询
|
||
* @param circleLayer {Object}
|
||
* @private
|
||
*/
|
||
function _createCircleLayer(circleLayer) {
|
||
// 画圆
|
||
// 1度=100407米，圆的半径为度
|
||
const radius = circleLayer._mRadius / degreeToMeter
|
||
// 点集
|
||
const parts = []
|
||
// 计算圆的边缘所有点
|
||
for (let i = 0; i < 360; i++) {
|
||
const radians = ((i + 1) * Math.PI) / 180
|
||
parts[i] = [
|
||
Math.cos(radians) * radius + parseFloat(circleLayer._latlng.lat),
|
||
Math.sin(radians) * radius + parseFloat(circleLayer._latlng.lng),
|
||
]
|
||
}
|
||
return L.polygon(parts, drawFill)
|
||
}
|
||
|
||
/**
|
||
* 根据自定义事件的icon，加载图层
|
||
* @param layerName
|
||
* @param features
|
||
* @param layerConfigInfo
|
||
* @param handelFlag
|
||
* @param getGudEvnPopupinfo
|
||
* @private
|
||
*/
|
||
function _addEventFeaturesByDivIcon(
|
||
layerName,
|
||
features,
|
||
layerConfigInfo,
|
||
{ handelFlag = true, getGudEvnPopupinfo = null } = {}
|
||
) {
|
||
const layers = []
|
||
features.forEach((feature, index) => {
|
||
const contentHTML = `<div class="event-div-icon" style="height: 99px; width: 122px;
|
||
background-image: url('/src/supermap/image/multi_handel_event.png');background-repeat:no-repeat;
|
||
background-size: 122px 99px;"><span>0${index + 1}</span></span></div>`
|
||
let myIcon = ''
|
||
if (handelFlag) {
|
||
myIcon = L.divIcon({
|
||
iconSize: [100, 70],
|
||
html: contentHTML,
|
||
className: 'event-handle-div-icon',
|
||
})
|
||
} else {
|
||
myIcon = L.divIcon({
|
||
iconSize: [122, 99],
|
||
html: contentHTML,
|
||
className: 'event-unhandle-div-icon',
|
||
})
|
||
}
|
||
// 创建marker图层，绑定要素
|
||
const markerLayer = L.marker([feature.coordinateX, feature.coordinateY], {
|
||
icon: myIcon,
|
||
attribution: feature,
|
||
})
|
||
markerLayer.layerConfigInfo = layerConfigInfo
|
||
markerLayer.handelType = 'handel'
|
||
markerLayer.on('click', function (e) {
|
||
if (getGudEvnPopupinfo) {
|
||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
const data = e.sourceTarget.options.attribution
|
||
getGudEvnPopupinfo(data.gudEvnInfoId, layerConfigInfo).then(
|
||
(response) => {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
// const elementHtml = hiMapFun.createGudEvnPopupInfo(response);
|
||
L.popup({ className: 'multi-event-popup-style' })
|
||
.setLatLng(latlng)
|
||
.openOn(map)
|
||
}
|
||
)
|
||
}
|
||
})
|
||
layers.push(markerLayer)
|
||
})
|
||
const markerGroup = L.layerGroup(layers)
|
||
featureGroup.addLayer(markerGroup)
|
||
layerGroup.set(layerName, markerGroup)
|
||
}
|
||
/**
|
||
* 单屏事件扎点
|
||
* @param layerName
|
||
* @param features
|
||
* @param layerConfigInfo
|
||
* @param handelFlag
|
||
* @param getGudEvnPopupinfo
|
||
* @private
|
||
*/
|
||
function _addSingleEvent(
|
||
layerName,
|
||
features,
|
||
layerConfigInfo,
|
||
{ handelFlag = false, getGudEvnPopupinfo = null } = {}
|
||
) {
|
||
const layers = []
|
||
features.forEach((feature, index) => {
|
||
const html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(255,85,0,0.3)',
|
||
diveColor: '#ffc2c5',
|
||
})
|
||
const pointIcon = '/src/supermap/image/multi_handel_event_orange.png'
|
||
const contentHTML = `<div class="event-div-icon" style="height: 99px; width: 122px;
|
||
background-image: url(${pointIcon});background-repeat:no-repeat;text-align: center;
|
||
background-size: 122px 99px;"><div style="font-size: 26px;line-height: 32px">0${
|
||
index + 1
|
||
}</div>${html}</div>`
|
||
let myIcon = ''
|
||
if (handelFlag) {
|
||
myIcon = L.divIcon({
|
||
iconSize: [100, 70],
|
||
html: contentHTML,
|
||
className: 'event-handle-div-icon',
|
||
})
|
||
} else {
|
||
myIcon = L.divIcon({
|
||
iconSize: [122, 99],
|
||
html: contentHTML,
|
||
className: 'event-unhandle-div-icon',
|
||
})
|
||
}
|
||
// 创建marker图层，绑定要素
|
||
const markerLayer = L.marker([feature.coordinateX, feature.coordinateY], {
|
||
icon: myIcon,
|
||
attribution: feature,
|
||
})
|
||
markerLayer.layerConfigInfo = layerConfigInfo
|
||
markerLayer.handelType = 'singleEvent'
|
||
markerLayer.on('click', function (e) {
|
||
if (getGudEvnPopupinfo) {
|
||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
const data = e.sourceTarget.options.attribution
|
||
getGudEvnPopupinfo(data.gudEvnInfoId, layerConfigInfo).then(
|
||
(response) => {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
// const elementHtml = hiMapFun.createGudEvnPopupInfo(response);
|
||
L.popup({ className: 'multi-event-popup-style' })
|
||
.setLatLng(latlng)
|
||
.openOn(map)
|
||
}
|
||
)
|
||
}
|
||
})
|
||
layers.push(markerLayer)
|
||
})
|
||
const markerGroup = L.layerGroup(layers)
|
||
featureGroup.addLayer(markerGroup)
|
||
layerGroup.set(layerName, markerGroup)
|
||
}
|
||
/**
|
||
* 根据自定义事件的icon，加载未处置事件图层
|
||
* @param layerName
|
||
* @param features
|
||
* @param layerConfigInfo
|
||
* @param handelFlag
|
||
* @param getGudEvnPopupinfo
|
||
* @private
|
||
*/
|
||
function _addUnHandleEventFeaturesByDivIcon(
|
||
layerName,
|
||
features,
|
||
layerConfigInfo,
|
||
{ numMarker = 0, getGudEvnPopupinfo = null } = {}
|
||
) {
|
||
const layers = []
|
||
features.forEach((feature, index) => {
|
||
// 根据不同的事件等级，添加不同的图标
|
||
console.log('feature.eventGrade', feature)
|
||
let html = blinkMarker({ iconSize: [25, 15], level: '6', speedTime: 1 })
|
||
let pointIcon = '/src/supermap/image/multi_handel_event_blue.png'
|
||
if (feature.redGrade) {
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(198,1,0,0.3)',
|
||
diveColor: '#ffc2c5',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_red.png'
|
||
}
|
||
if (feature.orangeGrade) {
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(255,85,0,0.3)',
|
||
diveColor: '#ffc2c5',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_orange.png'
|
||
}
|
||
if (feature.yellowGrade) {
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(198,170,20,0.3)',
|
||
diveColor: '#fdffc2',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_yellow.png'
|
||
}
|
||
if (feature.blueGrade) {
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(40,146,198,0.3)',
|
||
diveColor: '#c2eaff',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_blue.png'
|
||
}
|
||
// 因为进入非常态化很多属性都丢了，所以加这个判断
|
||
if (feature.eventGrade) {
|
||
switch (feature.eventGrade) {
|
||
case '3':
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(198,1,0,0.3)',
|
||
diveColor: '#ffc2c5',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_red.png'
|
||
break
|
||
case '2':
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(255,85,0,0.3)',
|
||
diveColor: '#ffc2c5',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_orange.png'
|
||
break
|
||
case '1':
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(198,170,20,0.3)',
|
||
diveColor: '#fdffc2',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_yellow.png'
|
||
break
|
||
case '0':
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(40,146,198,0.3)',
|
||
diveColor: '#c2eaff',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_blue.png'
|
||
break
|
||
default:
|
||
html = blinkMarker({
|
||
iconSize: [25, 15],
|
||
level: '6',
|
||
speedTime: 1,
|
||
color: 'rgba(40,146,198,0.3)',
|
||
diveColor: '#c2eaff',
|
||
})
|
||
pointIcon = '/src/supermap/image/multi_handel_event_blue.png'
|
||
break
|
||
}
|
||
}
|
||
const contentHTML = `<div class="event-div-icon" style="height: 99px; width: 122px;
|
||
background-image: url(${pointIcon});background-repeat:no-repeat;
|
||
background-size: 122px 99px;">${html}</div>`
|
||
const myIcon = L.divIcon({
|
||
iconSize: [122, 99],
|
||
html: contentHTML,
|
||
className: 'event-handle-div-icon',
|
||
})
|
||
// 创建marker图层，绑定要素
|
||
const markerLayer = L.marker([feature.coordinateX, feature.coordinateY], {
|
||
icon: myIcon,
|
||
attribution: feature,
|
||
})
|
||
markerLayer.layerConfigInfo = layerConfigInfo
|
||
markerLayer.handelType = 'unHandel'
|
||
markerLayer.on('click', function (e) {
|
||
if (getGudEvnPopupinfo) {
|
||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
const data = e.sourceTarget.options.attribution
|
||
getGudEvnPopupinfo(data.gudEvnInfoId, layerConfigInfo).then(
|
||
(response) => {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
// const elementHtml = hiMapFun.createGudEvnPopupInfo(response);
|
||
// 防火专题事件点报错修改
|
||
L.popup({ className: 'multi-event-popup-style' })
|
||
.setLatLng(latlng)
|
||
.openOn(map)
|
||
}
|
||
)
|
||
}
|
||
})
|
||
layers.push(markerLayer)
|
||
})
|
||
const markerGroup = L.layerGroup(layers)
|
||
featureGroup.addLayer(markerGroup)
|
||
layerGroup.set(layerName, markerGroup)
|
||
}
|
||
/**
|
||
* 多屏指挥调度中添加事件上图
|
||
* @param layerName
|
||
* @param features
|
||
* @param layerConfigInfo
|
||
* @private
|
||
*/
|
||
function _addEventFeaturesOnMap(
|
||
layerName,
|
||
features,
|
||
layerConfigInfo,
|
||
{ getGudEvnPopupinfo = null } = {}
|
||
) {
|
||
const layers = []
|
||
features.forEach((feature) => {
|
||
// 创建marker图层，绑定要素 静态图层
|
||
const markerLayer = L.marker([feature.coordinateX, feature.coordinateY], {
|
||
icon: MapStyle.featureIcon(layerConfigInfo),
|
||
attribution: feature,
|
||
})
|
||
markerLayer.layerConfigInfo = layerConfigInfo
|
||
// 图标点击弹窗事件
|
||
markerLayer.on('click', (e) => {
|
||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||
const enity = e.sourceTarget.options.attribution
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
getGudEvnPopupinfo(enity.gudEvnInfoId, layerConfigInfo).then(
|
||
(response) => {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
// const elementHtml = hiMapFun.createGudEvnPopupInfo(response);
|
||
L.popup({ className: 'multi-event-popup-style' })
|
||
.setLatLng(latlng)
|
||
.openOn(map)
|
||
}
|
||
)
|
||
})
|
||
})
|
||
const markerGroup = L.layerGroup(layers)
|
||
featureGroup.addLayer(markerGroup)
|
||
layerGroup.set(layerName, markerGroup)
|
||
}
|
||
|
||
/**
|
||
* 显示单兵轨迹
|
||
* @param layerName
|
||
* @param data
|
||
* @private
|
||
*/
|
||
function _showSoliderTrackOnMap(layerName, data) {
|
||
const trackPointArray = []
|
||
data.forEach((item) => {
|
||
// let point = [item.longitude,item.latitude];
|
||
const point = [item.latitude, item.longitude]
|
||
trackPointArray.push(point)
|
||
})
|
||
const soliderTrackLine = L.polyline(trackPointArray, { color: 'red' })
|
||
featureGroup.addLayer(soliderTrackLine)
|
||
layerGroup.set(layerName, soliderTrackLine)
|
||
}
|
||
/**
|
||
* @param markerLayerName 单兵点图层名字
|
||
* @param trackLayerName 点兵点的历史轨迹图层名
|
||
* @param data 单兵点的数据
|
||
* @param layerConfigInfo 单兵点的图层配置信息
|
||
*/
|
||
function _addSoliderMarkerOnMap(
|
||
markerLayerName,
|
||
trackLayerName,
|
||
data,
|
||
layerConfigInfo
|
||
) {
|
||
if (data.length !== 0) {
|
||
const lastPoint = data[data.length - 1]
|
||
const markerLayer = L.marker([lastPoint.latitude, lastPoint.longitude], {
|
||
icon: MapStyle.featureIcon(layerConfigInfo),
|
||
})
|
||
markerLayer.data = data
|
||
markerLayer.layerConfigInfo = layerConfigInfo
|
||
markerLayer.on('click', function (e) {
|
||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||
const layerData = e.sourceTarget.data
|
||
_showSoliderTrackOnMap(trackLayerName, data)
|
||
})
|
||
featureGroup.addLayer(markerLayer)
|
||
layerGroup.set(markerLayerName, markerLayer)
|
||
} else {
|
||
console.log('单兵没有经纬度信息！')
|
||
}
|
||
}
|
||
/**
|
||
* 实时路况数据展示
|
||
* @param layerName {String} 配置图层名
|
||
* @param configInfo {Object} 图层配置对象
|
||
* @param data {Array} 后台返回的路况数组对象
|
||
* @param getLayerPopupInfo {Function} 获取弹窗数据的方法
|
||
* todo 后期根据具体数据进行修改
|
||
* @param className {String} className字符串
|
||
* */
|
||
function _showTrafficStatusInfo(
|
||
layerName,
|
||
configInfo,
|
||
data,
|
||
{ getLayerPopupInfo = null, className = '' } = {}
|
||
) {
|
||
// 拿到坐标绘制路网
|
||
const featureArray = []
|
||
for (let rs = 0; rs < data.length; rs++) {
|
||
let styleLine = {}
|
||
// let roadStatus = ''; // 记录道路拥堵状态描述
|
||
switch (data[rs].grade) {
|
||
case '3':
|
||
styleLine = {
|
||
strokeColor: 'red',
|
||
strokeWidth: 4,
|
||
strokeLinecap: 'round',
|
||
strokeDashstyle: 'solid',
|
||
}
|
||
// roadStatus = '拥堵';
|
||
break
|
||
case '1':
|
||
styleLine = {
|
||
strokeColor: 'green',
|
||
strokeWidth: 3,
|
||
strokeLinecap: 'round',
|
||
strokeDashstyle: 'solid',
|
||
}
|
||
// roadStatus = '畅行';
|
||
break
|
||
case '2':
|
||
styleLine = {
|
||
strokeColor: 'yellow',
|
||
strokeWidth: 3,
|
||
strokeLinecap: 'round',
|
||
strokeDashstyle: 'solid',
|
||
}
|
||
// roadStatus = '缓行';
|
||
break
|
||
}
|
||
// const roadLine = {};
|
||
const roadPoints = []
|
||
// const pointNum = 0;
|
||
if (data[rs].mCoord !== '' && data[rs].mCoord != null) {
|
||
const nodeArr = data[rs].mCoord.split(',')
|
||
const arrLength = nodeArr.length / 2
|
||
for (var i = 0; i < arrLength; i++) {
|
||
var coord_x = nodeArr[2 * i]
|
||
var coord_y = nodeArr[2 * i + 1]
|
||
// 描绘所有点
|
||
const point = [coord_y, coord_x]
|
||
roadPoints[i] = point
|
||
}
|
||
}
|
||
// todo
|
||
const sourceGeometry = L.polyline(roadPoints, {
|
||
color: styleLine.strokeColor,
|
||
})
|
||
if (getLayerPopupInfo) {
|
||
sourceGeometry.title = layerName
|
||
sourceGeometry.roadId = data[rs].roadId
|
||
sourceGeometry.roadName = data[rs].roadName
|
||
sourceGeometry.configInfo = configInfo
|
||
sourceGeometry.on('click', function (e) {
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
const roadId = e.sourceTarget.roadId
|
||
const configInfo = e.sourceTarget.configInfo
|
||
// const contentHtml = trafficStatusCallback(roadId, configInfo);
|
||
getLayerPopupInfo(roadId, configInfo).then((response) => {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
// const elementHtml = hiMapFun.createGeneralPopupInfo(response)
|
||
L.popup({ className: className })
|
||
.setLatLng(latlng)
|
||
// .setContent(elementHtml)
|
||
.openOn(map)
|
||
})
|
||
})
|
||
}
|
||
featureArray.push(sourceGeometry)
|
||
}
|
||
const markerGroupArray = L.layerGroup(featureArray)
|
||
featureGroup.addLayer(markerGroupArray)
|
||
layerGroup.set(layerName, markerGroupArray)
|
||
}
|
||
|
||
/**
|
||
* 水文水务中加载水库专用方法
|
||
* @param layerName {String} 图层名字
|
||
* @param features {Array} 地图要素数组
|
||
* @param layerConfigInfo {Object} 图层配置对象
|
||
* @param callBackInClick {function} 点击图标时执行的函数
|
||
* @param selectWaterAffairsSmallReservoirsInfoByName
|
||
* @param waterConditionBureau
|
||
*/
|
||
function _addReservoirStationOnMap(
|
||
layerName,
|
||
features,
|
||
layerConfigInfo,
|
||
callBackInClick,
|
||
{
|
||
selectWaterAffairsSmallReservoirsInfoByName = null,
|
||
waterConditionBureau = 'water_affairs_bureau',
|
||
getReservoirInfoByReservoirInfoId = null,
|
||
getWaterAffairsReservoirInfoByReservoirInfoId = null,
|
||
} = {}
|
||
) {
|
||
const layers = []
|
||
features.forEach((feature) => {
|
||
if (feature.data.label === '1') {
|
||
// 小水库
|
||
layerConfigInfo.img = 'reservoir_small.png'
|
||
} else if (feature.data.label === '3') {
|
||
// 中型水库
|
||
layerConfigInfo.img = 'reservoir_middle.png'
|
||
} else if (feature.data.label === '4') {
|
||
layerConfigInfo.img = 'reservoir_big.png'
|
||
}
|
||
const icon = MapStyle.featureIcon(layerConfigInfo)
|
||
// 创建marker图层，绑定要素
|
||
const markerLayer = L.marker([feature.data.lat, feature.data.lon], {
|
||
icon: icon,
|
||
attribution: feature.data,
|
||
})
|
||
markerLayer.layerConfigInfo = layerConfigInfo
|
||
markerLayer.on('click', function (e) {
|
||
const layerConfigInfo = e.sourceTarget.layerConfigInfo
|
||
const location = [e.latlng.lat, e.latlng.lng]
|
||
const latlng = L.latLng(location)
|
||
const data = e.sourceTarget.options.attribution
|
||
// 当为水务数据且为小型水库时，点击查看的是数据详细信息
|
||
if (
|
||
layerConfigInfo.img === 'reservoir_small.png' &&
|
||
waterConditionBureau === 'water_affairs_bureau'
|
||
) {
|
||
selectWaterAffairsSmallReservoirsInfoByName(
|
||
e.sourceTarget.options.attribution.reservoirInfoName.trim(),
|
||
layerConfigInfo
|
||
).then((response) => {
|
||
response.allMapObject = {
|
||
mapObj: mapObj,
|
||
hiMapFun: hiMapFun,
|
||
}
|
||
const elementHtml = hiMapFun.createSmallReservoirPopup(response)
|
||
L.popup({ className: 'multi-small-reservoir-popup-style' })
|
||
.setLatLng(latlng)
|
||
.setContent(elementHtml)
|
||
.openOn(map)
|
||
})
|
||
} else {
|
||
// 自定函数，调用的是获取echars
|
||
callBackInClick(layerConfigInfo, latlng, data, e, {
|
||
getReservoirInfoByReservoirInfoId:
|
||
getReservoirInfoByReservoirInfoId,
|
||
getWaterAffairsReservoirInfoByReservoirInfoId:
|
||
getWaterAffairsReservoirInfoByReservoirInfoId,
|
||
})
|
||
}
|
||
})
|
||
|
||
layers.push(markerLayer)
|
||
})
|
||
const markerGroup = L.layerGroup(layers)
|
||
featureGroup.addLayer(markerGroup)
|
||
layerGroup.set(layerName, markerGroup)
|
||
}
|
||
|
||
/**
|
||
* 加载水库监测点对应的Echars
|
||
* **/
|
||
function _loadReservoirStationEcharsByReservoirInfoId(
|
||
layerConfigInfo,
|
||
latlng,
|
||
data,
|
||
e,
|
||
{ getReservoirInfoByReservoirInfoId = null } = {}
|
||
) {
|
||
if (getReservoirInfoByReservoirInfoId) {
|
||
getReservoirInfoByReservoirInfoId(data.reservoirInfoId).then(
|
||
(response) => {
|
||
const reservoirList = response.data
|
||
if (
|
||
typeof reservoirList === 'undefined' ||
|
||
reservoirList.length === 0
|
||
) {
|
||
alert('未查询到该水库的详细信息！')
|
||
} else {
|
||
const maxWaterLevel = reservoirList.reduce((item1, item2) => {
|
||
return item1 > item2.waterLevel ? item1 : item2.waterLevel
|
||
}, 0)
|
||
|
||
// 设置Echars图标信息
|
||
const location = [latlng.lat, latlng.lng]
|
||
const option = {
|
||
grid: {
|
||
right: '15%',
|
||
bottom: '8%',
|
||
top: '20%',
|
||
},
|
||
color: ['#fff21f', '00b4ff'],
|
||
legend: {
|
||
right: '1%',
|
||
top: '1.5%',
|
||
data: [
|
||
{
|
||
name: '水位',
|
||
},
|
||
{
|
||
name: '库容',
|
||
},
|
||
],
|
||
textStyle: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(6, 25, 69, 0.8)',
|
||
borderColor: 'rgba(0, 180, 255, 0.8);',
|
||
borderWidth: 1,
|
||
axisPointer: {
|
||
type: 'cross',
|
||
},
|
||
},
|
||
dataset: {
|
||
// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
|
||
// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射。
|
||
dimensions: ['updatedDate', 'waterLevel', 'waterStorage'],
|
||
source: reservoirList,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(0,0,0,0.2)', 'rgba(0,0,0,0)'],
|
||
},
|
||
},
|
||
},
|
||
// yAxis: {},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '水位',
|
||
nameTextStyle: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
min: 0,
|
||
max: Math.floor(maxWaterLevel + 20),
|
||
// interval: 20,
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dotted',
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value} 米',
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '库容',
|
||
nameTextStyle: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
min: function (value) {
|
||
return value.min - 10
|
||
},
|
||
max: function (value) {
|
||
return value.max + 10
|
||
},
|
||
// interval: 200,
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dotted',
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value} 万方',
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
scale: true,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '水位',
|
||
type: 'line',
|
||
symbol: 'image://../mode/static/img/yellow-spot.png',
|
||
symbolSize: 22,
|
||
lineStyle: {
|
||
color: '#fff21f',
|
||
},
|
||
},
|
||
{
|
||
name: '库容',
|
||
type: 'bar',
|
||
barWidth: '20',
|
||
yAxisIndex: 1,
|
||
itemStyle: {
|
||
color: '#00b4ff',
|
||
},
|
||
},
|
||
],
|
||
}
|
||
const div = L.DomUtil.create('div')
|
||
const chart = echarts.init(div, '', {
|
||
width: 720,
|
||
height: 400,
|
||
})
|
||
|
||
chart.setOption(option)
|
||
L.popup({ maxWidth: 800 })
|
||
.setLatLng(location)
|
||
.setContent(function () {
|
||
const titleDiv = document.createElement('div')
|
||
const spanDiv = document.createElement('div')
|
||
spanDiv.style.cssText =
|
||
'width: 100%;height: 30px;background: linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'background: -ms-linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'background: -webkit-linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'background: -moz-linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'padding-top: 7px;padding-left: 10px;'
|
||
const titleContent = document.createTextNode(
|
||
e.sourceTarget.options.attribution.reservoirInfoName
|
||
)
|
||
spanDiv.appendChild(titleContent)
|
||
titleDiv.appendChild(spanDiv)
|
||
chart.setOption({
|
||
title: [
|
||
// {
|
||
// text: e.sourceTarget.options.attribution.name,
|
||
// },
|
||
{
|
||
text:
|
||
'当前水位：' +
|
||
reservoirList[reservoirList.length - 1].waterLevel +
|
||
'米',
|
||
x: '1%',
|
||
y: '1.5%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
fontWeight: 'normal',
|
||
},
|
||
},
|
||
{
|
||
text:
|
||
'当前来水量：' +
|
||
reservoirList[reservoirList.length - 1].waterInflow +
|
||
'万方',
|
||
x: '25%',
|
||
y: '1.5%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
fontWeight: 'normal',
|
||
},
|
||
},
|
||
],
|
||
})
|
||
titleDiv.appendChild(chart.getDom())
|
||
// return chart.getDom();
|
||
return titleDiv
|
||
})
|
||
.openOn(map)
|
||
}
|
||
}
|
||
)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 加载水务局水库监测点对应的Echars
|
||
* **/
|
||
function _loadWaterAffairsReservoirStationEcharsByReservoirInfoId(
|
||
layerConfigInfo,
|
||
latlng,
|
||
data,
|
||
e,
|
||
{ getWaterAffairsReservoirInfoByReservoirInfoId = null } = {}
|
||
) {
|
||
getWaterAffairsReservoirInfoByReservoirInfoId(data.reservoirInfoId).then(
|
||
(response) => {
|
||
const reservoirList = response.data
|
||
if (
|
||
typeof reservoirList === 'undefined' ||
|
||
reservoirList.length === 0
|
||
) {
|
||
alert('未查询到该水库的详细信息！')
|
||
} else {
|
||
// 设置Echars图标信息
|
||
const location = [latlng.lat, latlng.lng]
|
||
const option = {
|
||
grid: {
|
||
right: '15%',
|
||
bottom: '8%',
|
||
top: '20%',
|
||
},
|
||
color: ['#fff21f', '00b4ff'],
|
||
legend: {
|
||
right: '1%',
|
||
top: '1.5%',
|
||
data: [
|
||
{
|
||
name: '水位',
|
||
},
|
||
{
|
||
name: '库容',
|
||
},
|
||
],
|
||
textStyle: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(6, 25, 69, 0.8)',
|
||
borderColor: 'rgba(0, 180, 255, 0.8);',
|
||
borderWidth: 1,
|
||
axisPointer: {
|
||
type: 'cross',
|
||
},
|
||
},
|
||
dataset: {
|
||
// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
|
||
// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射。
|
||
dimensions: ['updatedDate', 'waterLevel', 'waterStorage'],
|
||
source: reservoirList,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(0,0,0,0.2)', 'rgba(0,0,0,0)'],
|
||
},
|
||
},
|
||
},
|
||
// yAxis: {},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '水位',
|
||
nameTextStyle: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dotted',
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value} 米',
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '库容',
|
||
nameTextStyle: {
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
min: function (value) {
|
||
return value.min - 10
|
||
},
|
||
max: function (value) {
|
||
return value.max + 10
|
||
},
|
||
// interval: 200,
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dotted',
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value} 万方',
|
||
color: '#00fcff',
|
||
fontSize: 16,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#117ce0',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
scale: true,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '水位',
|
||
type: 'line',
|
||
symbol: 'image://../mode/static/img/yellow-spot.png',
|
||
symbolSize: 22,
|
||
lineStyle: {
|
||
color: '#fff21f',
|
||
},
|
||
},
|
||
{
|
||
name: '库容',
|
||
type: 'bar',
|
||
barWidth: '20',
|
||
yAxisIndex: 1,
|
||
itemStyle: {
|
||
color: '#00b4ff',
|
||
},
|
||
},
|
||
],
|
||
}
|
||
const div = L.DomUtil.create('div')
|
||
const chart = echarts.init(div, '', {
|
||
width: 720,
|
||
height: 400,
|
||
})
|
||
|
||
chart.setOption(option)
|
||
L.popup({ maxWidth: 800 })
|
||
.setLatLng(location)
|
||
.setContent(function () {
|
||
const titleDiv = document.createElement('div')
|
||
const spanDiv = document.createElement('div')
|
||
spanDiv.style.cssText =
|
||
'width: 100%;height: 30px;background: linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'background: -ms-linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'background: -webkit-linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'background: -moz-linear-gradient(left, rgba(0, 156, 255, 0.8), rgba(0, 0, 0, 0));' +
|
||
'padding-top: 7px;padding-left: 10px;'
|
||
const titleContent = document.createTextNode(
|
||
e.sourceTarget.options.attribution.reservoirInfoName
|
||
)
|
||
spanDiv.appendChild(titleContent)
|
||
titleDiv.appendChild(spanDiv)
|
||
chart.setOption({
|
||
title: [
|
||
// {
|
||
// text: e.sourceTarget.options.attribution.name,
|
||
// },
|
||
{
|
||
text:
|
||
'当前水位：' +
|
||
reservoirList[reservoirList.length - 1].waterLevel +
|
||
'米',
|
||
x: '1%',
|
||
y: '1.5%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
fontWeight: 'normal',
|
||
},
|
||
},
|
||
{
|
||
text:
|
||
'当前来水量：' +
|
||
reservoirList[reservoirList.length - 1].waterInflow +
|
||
'万方',
|
||
x: '25%',
|
||
y: '1.5%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
fontWeight: 'normal',
|
||
},
|
||
},
|
||
],
|
||
})
|
||
titleDiv.appendChild(chart.getDom())
|
||
// return chart.getDom();
|
||
return titleDiv
|
||
})
|
||
.openOn(map)
|
||
}
|
||
}
|
||
)
|
||
}
|
||
/**
|
||
* 森火三屏版本周边分析
|
||
* @param geometry {obj} 地理信息 包含lng(经度),lat(纬度),radius(范围)
|
||
* @param dataList {Array} 需要筛选的所有业务库资源列表
|
||
*/
|
||
function _circleQuery(
|
||
geometry = { lng: '', lat: '', radius: 12, units: 'kilometers' },
|
||
dataList = []
|
||
) {
|
||
// 清除圈
|
||
hiMapFun.removeLayerByLayerName('circleMarker')
|
||
// 圈一直居中
|
||
const latLng = {
|
||
lat: geometry.lat,
|
||
lng: geometry.lng,
|
||
}
|
||
let zoom = 14
|
||
// 根据半径 自动缩放地图
|
||
if (geometry.radius <= 1) {
|
||
zoom = 14
|
||
} else if (geometry.radius <= 2) {
|
||
zoom = 13
|
||
} else if (geometry.radius <= 5) {
|
||
zoom = 12
|
||
} else if (geometry.radius <= 10) {
|
||
zoom = 11
|
||
} else if (geometry.radius <= 20) {
|
||
zoom = 10
|
||
} else if (geometry.radius <= 25) {
|
||
zoom = 9
|
||
} else if (geometry.radius <= 50) {
|
||
zoom = 8
|
||
} else {
|
||
zoom = 7
|
||
}
|
||
const duration = 0.15
|
||
map.flyTo(latLng, zoom || 15, { duration: duration || 0.15 })
|
||
// 三等分画圈、添加半径标识
|
||
let circleMarker = ''
|
||
let newPoint = ''
|
||
let popup = ''
|
||
const color = ['#ff6724', '#ffef21', '#41fafc']
|
||
const className = ['orange-rect', 'yellow-rect', 'blue-rect']
|
||
for (let index = 1; index < 4; index++) {
|
||
// const element = array[index];
|
||
const radius = ((geometry.radius * 1000) / 3) * index
|
||
circleMarker = L.circle([geometry.lat, geometry.lng], {
|
||
radius: radius,
|
||
color: color[index - 1],
|
||
fill: index === 3,
|
||
fillColor: '#1D4076',
|
||
weight: 1.4,
|
||
})
|
||
mapObj.featureGroup.addLayer(circleMarker)
|
||
mapObj.layerGroup.set('circleMarker', circleMarker) // 设置图层名称
|
||
console.log(index)
|
||
// 计算正下方的经纬度
|
||
const point = turf.point([geometry.lng, geometry.lat])
|
||
const bearing = 180
|
||
const options = { units: 'kilometers' }
|
||
console.log('radius', radius)
|
||
const destination = turf.destination(
|
||
point,
|
||
radius / 1000,
|
||
bearing,
|
||
options
|
||
)
|
||
newPoint = {
|
||
lat: destination.geometry.coordinates[1],
|
||
lng: destination.geometry.coordinates[0],
|
||
}
|
||
const number = (radius / 1000).toFixed(2)
|
||
popup = L.popup({ offset: L.point(0, 50) })
|
||
.setLatLng(newPoint)
|
||
.setContent(
|
||
'<p class="radius-rect ' +
|
||
className[index - 1] +
|
||
'">' +
|
||
number +
|
||
'km</p>'
|
||
)
|
||
mapObj.featureGroup.addLayer(popup)
|
||
mapObj.layerGroup.set('circleMarker', popup) // 设置图层名称
|
||
console.log('destination', destination)
|
||
}
|
||
|
||
// 创建100边形近似圆
|
||
const circle = turf.circle([geometry.lng, geometry.lat], geometry.radius, {
|
||
steps: 100,
|
||
units: geometry.units,
|
||
})
|
||
console.log('turfCircle', circle) // 包含圆周点位信息
|
||
// 筛选出在圆中的所有资源
|
||
const result = dataList.filter((item) => {
|
||
return turf.booleanPointInPolygon(
|
||
turf.point([item.longitude, item.latitude]),
|
||
circle
|
||
)
|
||
})
|
||
return result
|
||
}
|
||
return {
|
||
geometricQuery: _geometricQuery,
|
||
newGeometricQuery: _newGeometricQuery,
|
||
createCircleLayer: _createCircleLayer,
|
||
addEventFeaturesByDivIcon: _addEventFeaturesByDivIcon,
|
||
addEventFeaturesOnMap: _addEventFeaturesOnMap,
|
||
showTrafficStatusInfo: _showTrafficStatusInfo,
|
||
addUnHandleEventFeaturesByDivIcon: _addUnHandleEventFeaturesByDivIcon,
|
||
showSoliderTrackOnMap: _showSoliderTrackOnMap,
|
||
addReservoirStationOnMap: _addReservoirStationOnMap,
|
||
loadReservoirStationEcharsByReservoirInfoId:
|
||
_loadReservoirStationEcharsByReservoirInfoId,
|
||
loadWaterAffairsReservoirStationEcharsByReservoirInfoId:
|
||
_loadWaterAffairsReservoirStationEcharsByReservoirInfoId,
|
||
addSoliderMarkerOnMap: _addSoliderMarkerOnMap,
|
||
addSingleEvent: _addSingleEvent,
|
||
circleQuery: _circleQuery,
|
||
}
|
||
}
|
||
export { MultiScreenFun }
|