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 }
|