wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

西海岸视频地图图标点击切换方式修改

This commit is contained in:
unknown 2022-10-19 17:10:48 +08:00
parent 4e271b6aa7
commit 02d70b4b8d
2 changed files with 2043 additions and 2025 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
front/src/supermap/advance-init.js
View File

@ -33,7 +33,12 @@ const SuperMap = window.SuperMap || {}
let isLocated = true
let polylineArr = []
let PolygonArr = []
/**
const restoreIconObj = {
layerId: 0,
restoreIcon: null,
currentLayer: null,
}
/**
* 地图功能接口类
* 说明：该类中的方法带“_”为对外暴露的方法，调用时去掉“_”；不带“_”的为内部方法，不可调用。
* @param mapObj {Object} 设置全局参数对象
@ -68,7 +73,7 @@ export function MapFun(mapObj) {
* 根据图层名移除图层
* @param layerName {String} 图层名
*/
const _removeLayerByLayerName = function (layerName) {
const _removeLayerByLayerName = function(layerName) {
const layer = layerGroup.get(layerName)
// const feature = featureGroup;
// map.popupclose();
@ -89,7 +94,7 @@ export function MapFun(mapObj) {
* 清空地图（除去底图）
* @private
*/
const _clearAllLayers = function () {
const _clearAllLayers = function() {
// debugger;
map.closePopup()
featureGroup.clearLayers()
@ -99,14 +104,14 @@ export function MapFun(mapObj) {
* 关闭所有地图弹窗
* @private
*/
const _closeAllPopup = function (feature) {
const _closeAllPopup = function(feature) {
map.closePopup()
}
/**
* 添加地图弹窗
* @private
*/
const _openPopup = function (feature) {
const _openPopup = function(feature) {
// debugger;
// const elementHtml = createAddressPopup(feature)
L.popup({ className: 'epidemic-popup' })
@ -118,7 +123,7 @@ export function MapFun(mapObj) {
* 添加视频监控平台地图弹窗
* @private
*/
const _openPopupVideoSurveillance = function (feature) {
const _openPopupVideoSurveillance = function(feature) {
// debugger
if (feature.type == 'cameraTree') {
const elementHtml = createCameraDetailsPop(feature)
@ -150,7 +155,7 @@ export function MapFun(mapObj) {
* 根据图层名数组移除图层
* @param layerNameArray {Array} 图层名
*/
const _removeLayersByLayerNameArray = function (layerNameArray) {
const _removeLayersByLayerNameArray = function(layerNameArray) {
layerNameArray.forEach((layerName) => {
const layer = layerGroup.get(layerName)
if (layer) {
@ -167,7 +172,7 @@ export function MapFun(mapObj) {
* 根据图层名数组移除图层
* @param layerNameArray {Array} 图层名
*/
const _addMovingMarker = function (arrList) {
const _addMovingMarker = function(arrList) {
var polyline1 = L.polyline(arrList).addTo(map)
var decorator = L.polylineDecorator(polyline1, {
patterns: [
@ -180,16 +185,13 @@ export function MapFun(mapObj) {
// myMovingMarker.start()
var polygin = L.motion
.polyline(
arrList,
{
arrList, {
color: 'transparent',
},
{
}, {
auto: true,
duration: 53000,
easing: L.Motion.Ease.easeInOutQuart,
},
{
}, {
removeOnEnd: true,
showMarker: true,
icon: L.divIcon({
@ -226,7 +228,7 @@ export function MapFun(mapObj) {
* 根据marker获取弹窗信息，只弹出基本信息（直接弹出）
* @param markerGroup {Object} 图层组
* */
const markerPopup = function (markerGroup) {
const markerPopup = function(markerGroup) {
const layers = markerGroup._layers
for (const index in layers) {
const contentHTML = _createPopupConfigInfo(
@ -242,7 +244,7 @@ export function MapFun(mapObj) {
* 展示普通图层
* @param callBackFun {Function} 回调函数对象
*/
const _showStaticLayer = function (callBackFun) {
const _showStaticLayer = function(callBackFun) {
callBackFun()
}
/**
@ -326,7 +328,7 @@ export function MapFun(mapObj) {
})
L.supermap
.queryService(queryUrl)
.queryBySQL(sqlParam, function (serviceResult) {
.queryBySQL(sqlParam, function(serviceResult) {
console.log('serviceResult', serviceResult.result)
if (serviceResult.result.recordsets[0].features.features.length === 0) {
let marker = {}
@ -405,10 +407,10 @@ export function MapFun(mapObj) {
[e.layer._latlng.lat, e.layer._latlng.lng],
options
).addTo(mapObj.map)
layer.on('moveend', function (e) {
layer.on('moveend', function(e) {
callback(e)
})
layer.on('click', function (e) {
layer.on('click', function(e) {
layer.remove()
mapObj.drawMarker.enable()
})
@ -443,7 +445,7 @@ export function MapFun(mapObj) {
// 最大宽度，判断每行字符串，超过按照最大宽度设定
let contentWidth = 0
// 累加行数，计算每行宽度
const calc = function (str) {
const calc = function(str) {
const tempLength =
getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10
if (tempLength >= 450) {
@ -502,11 +504,12 @@ export function MapFun(mapObj) {
/**
* 取消扎点回调
*/
const resetMarkerCallBack = function () {
const resetMarkerCallBack = function() {
_removeLayerByLayerName('drawMarkerLayer')
layerGroup.delete('drawMarkerLayer')
mapObj.drawMarker.enable()
}
function _addImgMaker(latLng, inconConfig) {
const icon = MapStyle.featureIcon(inconConfig)
const markerLayer = L.marker([latLng.lat, latLng.lng], {
@ -566,7 +569,7 @@ export function MapFun(mapObj) {
// 最大宽度，判断每行字符串，超过按照最大宽度设定
let contentWidth = 0
// 累加行数，计算每行宽度
const calc = function (str) {
const calc = function(str) {
const tempLength =
getDoubleCharCount(str) * 18 + getSingleCharCount(str) * 10
if (tempLength >= 450) {
@ -620,7 +623,7 @@ export function MapFun(mapObj) {
} else if (mapType === 'dark') {
tileMapUrl = _mapConfig.config.TITLE_LAYER_DARK.mapUrl
}
mapObj.map.eachLayer(function (layer) {
mapObj.map.eachLayer(function(layer) {
if (layer.tempIndex === -1) {
mapObj.map.removeLayer(layer)
L.supermap.tiledMapLayer(tileMapUrl).addTo(mapObj.map)
@ -636,7 +639,7 @@ export function MapFun(mapObj) {
const config = _mapConfig.config.TILEDCONFIG[mapType]
const layerConfig = { url: config.tiledUrl, name: config.tiledName }
const newTileLayer = new L.tileLayer.baidu(layerConfig)
mapObj.map.eachLayer(function (layer) {
mapObj.map.eachLayer(function(layer) {
if (layer.options.tms === true) {
mapObj.map.removeLayer(layer)
newTileLayer.addTo(mapObj.map)
@ -652,11 +655,10 @@ export function MapFun(mapObj) {
* @param callBackInClick {function} 点击图标时执行的函数
* @param className {String} 样式字符串
*/
const _addFeatureArrayOnMap = function (
const _addFeatureArrayOnMap = function(
layerName,
features,
layerConfigInfo,
{ callBackInClick = null, className = '' } = {}
layerConfigInfo, { callBackInClick = null, className = '' } = {}
) {
const layers = []
features.forEach((feature) => {
@ -666,7 +668,7 @@ export function MapFun(mapObj) {
attribution: feature,
})
markerLayer.layerConfigInfo = layerConfigInfo
markerLayer.on('click', function (e) {
markerLayer.on('click', function(e) {
const layerConfigInfo = e.sourceTarget.layerConfigInfo
const location = [e.latlng.lat, e.latlng.lng]
const latlng = L.latLng(location)
@ -701,12 +703,11 @@ export function MapFun(mapObj) {
* @param popupType {String} 弹窗类型
* @param className {String} class名字
*/
const _addTheOneFeatureOnMapByPoint = function (
const _addTheOneFeatureOnMapByPoint = function(
layerName,
point,
data,
layerConfigInfo,
{ popupFlag = true, popupType = 'general', className = '' } = {}
layerConfigInfo, { popupFlag = true, popupType = 'general', className = '' } = {}
) {
// 创建marker图层，绑定要素
// debugger;
@ -734,7 +735,7 @@ export function MapFun(mapObj) {
if (popupFlag) {
markerLayer.bindPopup(elementHtml, { className: className }).openPopup()
} else {
markerLayer.on('click', function () {
markerLayer.on('click', function() {
L.popup({ className: className })
.setLatLng(latLng)
.setContent(elementHtml)
@ -753,8 +754,7 @@ export function MapFun(mapObj) {
* */
function _locationAndCreatePopup(
layer,
contentHTML,
{ className = '' } = {}
contentHTML, { className = '' } = {}
) {
// 生成弹窗内容
const latLng = layer.getLatLng()
@ -789,7 +789,7 @@ export function MapFun(mapObj) {
const icon = MapStyle.featureIcon(inconConfig)
const markerLayer = L.marker(point, { icon: icon })
markers.addLayer(markerLayer)
markerLayer.on('click', function () {
markerLayer.on('click', function() {
console.log('积水点播放视频', item)
item.indexCode = item.indexCode || item.index_code
const params = [item.indexCode]
@ -815,8 +815,7 @@ export function MapFun(mapObj) {
function _showLayersByUuidArray(
uuidArray,
layerName,
configInfo,
{
configInfo, {
outFeaturesCallBack = null,
getLayerPopupInfo = null,
getStoragePopupInfo = null,
@ -858,13 +857,12 @@ export function MapFun(mapObj) {
outFeaturesCallBack(serviceResult, layerName, entityList, configInfo)
}
const resultLayerConfig = L.geoJSON(
serviceResult.result.recordsets[0].features,
{
serviceResult.result.recordsets[0].features, {
onEachFeature: (feature, layer) => {
layer.setIcon(MapStyle.featureIcon(configInfo, { zoom: map._zoom }))
layer.title = layerName
layer.configInfo = configInfo
layer.on('click', function (e) {
layer.on('click', function(e) {
// const uuid = e.sourceTarget.feature.properties.UUID;
const uuid =
e.sourceTarget.feature.properties[
@ -922,8 +920,7 @@ export function MapFun(mapObj) {
function _showCameraByIndexCodeArray(
cameraIndexCode,
layerName,
configInfo,
{
configInfo, {
getLayerPopupInfo = null,
outFeaturesCallBack = null,
entityList = null,
@ -963,7 +960,7 @@ export function MapFun(mapObj) {
})
L.supermap
.queryService(queryUrl)
.queryBySQL(reservoirParam, function (serviceResult) {
.queryBySQL(reservoirParam, function(serviceResult) {
// if (serviceResult.result.recordsets[0].features.features.length === 0) {
// console.log('未查询到视频');
// return;
@ -973,15 +970,14 @@ export function MapFun(mapObj) {
outFeaturesCallBack(serviceResult, layerName, entityList, configInfo)
}
const searchCameraLayer = L.geoJSON(
serviceResult.result.recordsets[0].features,
{
serviceResult.result.recordsets[0].features, {
onEachFeature: (feature, layer) => {
layer.setIcon(MapStyle.featureIcon(configInfo))
layer.configInfo = configInfo
// 给查询出的每一个点添加点击弹窗事件
// 绑定弹窗事件，实时请求弹窗内容
if (getLayerPopupInfo !== null) {
layer.on('click', function (e) {
layer.on('click', function(e) {
const indexCode =
e.sourceTarget.feature.properties[
_convertCaseOfAttributes('CAMERA_INDEX_CODE')
@ -1036,8 +1032,7 @@ export function MapFun(mapObj) {
* @private
*/
function _addressMatchCode(
address,
{
address, {
fromIndex = null,
toIndex = null,
filters = null,
@ -1057,7 +1052,7 @@ export function MapFun(mapObj) {
})
L.supermap
.addressMatchService(_mapConfig.config.POI_URL)
.code(geoCodeParam, function (addressObj) {
.code(geoCodeParam, function(addressObj) {
if (outAddressCallBack) {
outAddressCallBack(addressObj, param)
}
@ -1275,6 +1270,7 @@ export function MapFun(mapObj) {
// featureGroup.addLayer(polyline);
// featureGroup.addTo(map);
}
function _removerPolyline() {
if (polylineArr && polylineArr.length > 0) {
polylineArr.map((item) => {
@ -1497,16 +1493,15 @@ export function MapFun(mapObj) {
parameter: analystParameter,
})
const myIcon = L.icon({
iconUrl:
'./src/assets/common/multiScreen/mapTools/ambulance_map_standby.png',
iconUrl: './src/assets/common/multiScreen/mapTools/ambulance_map_standby.png',
iconSize: [35, 35],
})
// 进行查找 todo
findPathService.findPath(findPathParameter, function (serviceResult) {
findPathService.findPath(findPathParameter, function(serviceResult) {
console.log('serviceResult', serviceResult)
const result = serviceResult.result
console.log(result)
result.pathList.map(function (result) {
result.pathList.map(function(result) {
const pathRouteLayer = L.geoJSON(result.route)
// const pathGuideLayer = L.geoJSON(result.pathGuideItems, {
// pointToLayer: function (geoPoints, latlng) {
@ -1546,8 +1541,7 @@ export function MapFun(mapObj) {
* @private
*/
function _addressMatchCodeByAmap(
address,
{
address, {
city = '青岛',
pageSize = 100,
pageIndex = 1,
@ -1555,13 +1549,13 @@ export function MapFun(mapObj) {
param = null,
} = {}
) {
AMap.plugin('AMap.PlaceSearch', function () {
AMap.plugin('AMap.PlaceSearch', function() {
var placeSearch = new AMap.PlaceSearch({
city: city,
pageSize: pageSize,
pageIndex: pageIndex,
})
placeSearch.search(address, function (status, result) {
placeSearch.search(address, function(status, result) {
console.log(result)
if (outAddressCallBack) {
outAddressCallBack(result, param)
@ -1582,8 +1576,7 @@ export function MapFun(mapObj) {
* @private
*/
function _queryLayersBySql(
configInfo,
{
configInfo, {
sql = 'SMID >0',
callBackFun = null,
callBackParams = null,
@ -1606,14 +1599,13 @@ export function MapFun(mapObj) {
}
if (layerName) {
const resultLayerConfig = L.geoJSON(
serviceResult.result.recordsets[0].features,
{
serviceResult.result.recordsets[0].features, {
onEachFeature: (feature, layer) => {
layer.setIcon(MapStyle.featureIcon(configInfo))
layer.title = layerName
layer.configInfo = configInfo
// 绑定弹窗事件，实时请求弹窗内容
layer.on('click', function (e) {
layer.on('click', function(e) {
if (!getLayerPopupInfo) {
const uuid =
e.sourceTarget.feature.properties[
@ -1650,10 +1642,10 @@ export function MapFun(mapObj) {
* @return {*} 创建的图标，用来删除
* @private
*/
const _addPointOnMap = function (paramObject) {
const _addPointOnMap = function(paramObject) {
return addPointOnMap(paramObject, mapObj, featureGroup, layerGroup)
}
const _addResourceOnMapWithoutSuperMapCluster = function (
const _addResourceOnMapWithoutSuperMapCluster = function(
features,
url,
layerName,
@ -1683,8 +1675,11 @@ export function MapFun(mapObj) {
// })
// }
_removeLayerByLayerName(layerName)
let layers = null
//_removeLayerByLayerName(layerName)
let clickReplaceIcon = true;
let selectedLayerList = [];
let selectedLayerId = [];
let layers = null;
// 判断是否是聚合图层
layers = createMarkerClusterLayer()
const icon1 = createDefaultFeatureStyle({
@ -1697,14 +1692,16 @@ export function MapFun(mapObj) {
})
features.map((feature) => {
var bounds = map.getBounds()
// console.log("看看有没有坐标",feature.latLng);
if ( feature.hasOwnProperty('latLng')) {
let icon = feature.active?icon2:icon1
//console.log("看看有没有坐标", feature);
if (feature.hasOwnProperty('latLng')) {
//let icon = feature.active ? icon2 : icon1;
let icon = icon1;
restoreIconObj.restoreIcon = icon;
const marker = L.marker(feature.latLng, { icon })
if (createPopupFun !== null) {
marker.uuid = feature.uuid || ''
marker.resId = feature.resId || ''
marker.on('click', async (e) => {
marker.on('click', async(e) => {
if (feature.resourceName === 'video') {
const params = [feature.indexCode]
DS.openVideo(params)
@ -1733,9 +1730,31 @@ export function MapFun(mapObj) {
}
})
}
marker.on('click', e=>{
console.log('点位数据', e)
marker.on('click', e => {
console.log('点位数据', e) //需要调用视频播放的窗口吗？
// 判断是否需要选中之后更换marker的图标
//const layers = layerGroup.get(layerName).getLayers()
// layers.forEach((layer) => {
// layer.setIcon(icon)
// })
restoreIconObj.layerId = e.sourceTarget._leaflet_id
const currentLayer = layerGroup
.get(layerName)
.getLayer(restoreIconObj.layerId)
restoreIconObj.currentLayer = currentLayer;
if (currentLayer._icon.src != icon.options.iconUrl) {
currentLayer.setIcon(icon);
} else {
selectedLayerList.push(currentLayer);
//要去重去重,//判断是否点击第二次
if (selectedLayerList.length > 0) {
selectedLayerList.forEach((item) => {
item.setIcon(
L.icon({ iconUrl: require('./image/' + url2), iconSize: [33, 33] })
)
});
}
}
mybus.emit('pointMarkerClick', feature)
})
layers.addLayer(marker)
@ -1747,7 +1766,7 @@ export function MapFun(mapObj) {
/**
* 点击展示弹窗
*/
const _addPopOnMap = function (feature, url, layerName, createPopupFun) {
const _addPopOnMap = function(feature, url, layerName, createPopupFun) {
console.log(
'addPopOnMap===============>',
feature,
@ -1797,7 +1816,7 @@ export function MapFun(mapObj) {
* @returns {Promise<any>}
* @private
*/
const _createPromiseByQueryService = function (
const _createPromiseByQueryService = function(
idArray,
layerConfigInfo,
type
@ -1811,10 +1830,10 @@ export function MapFun(mapObj) {
* @return {*}
* @private
*/
const _addResourceOnMap = function (paramObject) {
const _addResourceOnMap = function(paramObject) {
return addResourceOnMap(paramObject, mapObj, featureGroup, layerGroup)
}
const _addResourceOnMapNew = function (
const _addResourceOnMapNew = function(
features,
config,
getLayerPopupInfo,
@ -1830,7 +1849,7 @@ export function MapFun(mapObj) {
layerGroup
)
}
const _getLayerPopupInfo = function (
const _getLayerPopupInfo = function(
uuid,
layerConfigInfo,
type,
@ -1850,7 +1869,7 @@ export function MapFun(mapObj) {
popupClassName
)
}
const _addResourceOnMapWithoutSuperMap = function (
const _addResourceOnMapWithoutSuperMap = function(
features,
url,
layerName,
@ -1870,7 +1889,7 @@ export function MapFun(mapObj) {
map
)
}
const _addPointsToMap = function (
const _addPointsToMap = function(
features,
url,
layerName,
@ -1890,7 +1909,7 @@ export function MapFun(mapObj) {
map
)
}
const _addResourceOnMapWithoutSuper = function (
const _addResourceOnMapWithoutSuper = function(
features,
url,
layerName,
@ -1910,7 +1929,7 @@ export function MapFun(mapObj) {
map
)
}
const _addPolygonToMap = function (a, b, c, d) {
const _addPolygonToMap = function(a, b, c, d) {
var polygon = L.polygon([a, b, c, d], {
color: '#A33B42',
fillColor: '#A75A81',
@ -1918,7 +1937,7 @@ export function MapFun(mapObj) {
})
featureGroup.addLayer(polygon)
}
const _addNameToMap = function (config) {
const _addNameToMap = function(config) {
// you can set .my-div-icon styles in CSS
config.map((item) => {
var myIcon = L.divIcon({ html: item.name })
@ -1927,7 +1946,7 @@ export function MapFun(mapObj) {
)
})
}
const _addMountainToMap = function (config) {
const _addMountainToMap = function(config) {
// you can set .my-div-icon styles in CSS
const myIcon = L.icon({
iconUrl: '/src/supermap/image/mountain.png',
@ -1940,7 +1959,7 @@ export function MapFun(mapObj) {
}).addTo(mapObj.map)
})
}
const _addMountainLayerToMap = function (config) {
const _addMountainLayerToMap = function(config) {
var myStyle = {
color: 'green',
weight: 2,
@ -1964,18 +1983,18 @@ export function MapFun(mapObj) {
// L.marker([item.latLng.lng, item.latLng.lat], { icon: myIcon }).addTo(mapObj.map);
// });
}
const _addCircleToMap = function (latLng, r) {
const _addCircleToMap = function(latLng, r) {
// L.circle([latLng.lat, latLng.lng], { radius: r }).addTo(mapObj.map)
const polygon = L.circle([latLng.lat, latLng.lng], { radius: r })
polygon.addTo(map)
PolygonArr.push(polygon)
}
const _mapPainyEnable = function () {
const _mapPainyEnable = function() {
map.MapPaint.enable()
map.addControl(new MapPaint.SwitchControl())
}
// 热力图
const _thermodynamic = function (latLng, r, type) {
const _thermodynamic = function(latLng, r, type) {
// const layers = []
// latLng, r, strong
const thermodynamic = latLng
@ -1997,7 +2016,7 @@ export function MapFun(mapObj) {
layerGroup.set(type, heatLayer)
// debugger
}
const _addPathToMap = function (latLng, color) {
const _addPathToMap = function(latLng, color) {
// console.log(latLng)
// debugger
const polyline = L.polyline(latLng, { color: color })
@ -2065,8 +2084,7 @@ export function MapFun(mapObj) {
openPopupVideoSurveillance: _openPopupVideoSurveillance,
closeAllPopup: _closeAllPopup,
addMovingMarker: _addMovingMarker,
addResourceOnMapWithoutSuperMapCluster:
_addResourceOnMapWithoutSuperMapCluster,
addResourceOnMapWithoutSuperMapCluster: _addResourceOnMapWithoutSuperMapCluster,
addPopOnMap: _addPopOnMap,
addDynamicMapLayer: _addDynamicMapLayer,
addPointsToMap: _addPointsToMap,

4
front/src/views/home/videoSurveillance/index.vue
View File

@ -177,7 +177,7 @@
}
}
}
this.addResourceTomap('videoMap', this.pointAllData);
//this.addResourceTomap('videoMap', this.pointAllData);
})
},
methods: {
@ -477,7 +477,7 @@
}
})
}
console.log('上图数据', dataEvent)
console.log('点击后上上图数据', dataEvent)
this.getMapPoint(dataEvent, 'icon_camare.png', type)
},
getMapPoint(data, img, type) {