西海岸视频地图图标点击切换方式修改
This commit is contained in:
parent
4e271b6aa7
commit
02d70b4b8d
|
@ -33,6 +33,11 @@ const SuperMap = window.SuperMap || {}
|
|||
let isLocated = true
|
||||
let polylineArr = []
|
||||
let PolygonArr = []
|
||||
const restoreIconObj = {
|
||||
layerId: 0,
|
||||
restoreIcon: null,
|
||||
currentLayer: null,
|
||||
}
|
||||
/**
|
||||
* 地图功能接口类
|
||||
* 说明:该类中的方法带“_”为对外暴露的方法,调用时去掉“_”;不带“_”的为内部方法,不可调用。
|
||||
|
@ -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({
|
||||
|
@ -507,6 +509,7 @@ export function MapFun(mapObj) {
|
|||
layerGroup.delete('drawMarkerLayer')
|
||||
mapObj.drawMarker.enable()
|
||||
}
|
||||
|
||||
function _addImgMaker(latLng, inconConfig) {
|
||||
const icon = MapStyle.featureIcon(inconConfig)
|
||||
const markerLayer = L.marker([latLng.lat, latLng.lng], {
|
||||
|
@ -655,8 +658,7 @@ export function MapFun(mapObj) {
|
|||
const _addFeatureArrayOnMap = function(
|
||||
layerName,
|
||||
features,
|
||||
layerConfigInfo,
|
||||
{ callBackInClick = null, className = '' } = {}
|
||||
layerConfigInfo, { callBackInClick = null, className = '' } = {}
|
||||
) {
|
||||
const layers = []
|
||||
features.forEach((feature) => {
|
||||
|
@ -705,8 +707,7 @@ export function MapFun(mapObj) {
|
|||
layerName,
|
||||
point,
|
||||
data,
|
||||
layerConfigInfo,
|
||||
{ popupFlag = true, popupType = 'general', className = '' } = {}
|
||||
layerConfigInfo, { popupFlag = true, popupType = 'general', className = '' } = {}
|
||||
) {
|
||||
// 创建marker图层,绑定要素
|
||||
// debugger;
|
||||
|
@ -753,8 +754,7 @@ export function MapFun(mapObj) {
|
|||
* */
|
||||
function _locationAndCreatePopup(
|
||||
layer,
|
||||
contentHTML,
|
||||
{ className = '' } = {}
|
||||
contentHTML, { className = '' } = {}
|
||||
) {
|
||||
// 生成弹窗内容
|
||||
const latLng = layer.getLatLng()
|
||||
|
@ -815,8 +815,7 @@ export function MapFun(mapObj) {
|
|||
function _showLayersByUuidArray(
|
||||
uuidArray,
|
||||
layerName,
|
||||
configInfo,
|
||||
{
|
||||
configInfo, {
|
||||
outFeaturesCallBack = null,
|
||||
getLayerPopupInfo = null,
|
||||
getStoragePopupInfo = null,
|
||||
|
@ -858,8 +857,7 @@ 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
|
||||
|
@ -922,8 +920,7 @@ export function MapFun(mapObj) {
|
|||
function _showCameraByIndexCodeArray(
|
||||
cameraIndexCode,
|
||||
layerName,
|
||||
configInfo,
|
||||
{
|
||||
configInfo, {
|
||||
getLayerPopupInfo = null,
|
||||
outFeaturesCallBack = null,
|
||||
entityList = null,
|
||||
|
@ -973,8 +970,7 @@ 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
|
||||
|
@ -1036,8 +1032,7 @@ export function MapFun(mapObj) {
|
|||
* @private
|
||||
*/
|
||||
function _addressMatchCode(
|
||||
address,
|
||||
{
|
||||
address, {
|
||||
fromIndex = null,
|
||||
toIndex = null,
|
||||
filters = null,
|
||||
|
@ -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,8 +1493,7 @@ 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
|
||||
|
@ -1546,8 +1541,7 @@ export function MapFun(mapObj) {
|
|||
* @private
|
||||
*/
|
||||
function _addressMatchCodeByAmap(
|
||||
address,
|
||||
{
|
||||
address, {
|
||||
city = '青岛',
|
||||
pageSize = 100,
|
||||
pageIndex = 1,
|
||||
|
@ -1582,8 +1576,7 @@ export function MapFun(mapObj) {
|
|||
* @private
|
||||
*/
|
||||
function _queryLayersBySql(
|
||||
configInfo,
|
||||
{
|
||||
configInfo, {
|
||||
sql = 'SMID >0',
|
||||
callBackFun = null,
|
||||
callBackParams = null,
|
||||
|
@ -1606,8 +1599,7 @@ 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
|
||||
|
@ -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,9 +1692,11 @@ export function MapFun(mapObj) {
|
|||
})
|
||||
features.map((feature) => {
|
||||
var bounds = map.getBounds()
|
||||
// console.log("看看有没有坐标",feature.latLng);
|
||||
//console.log("看看有没有坐标", feature);
|
||||
if (feature.hasOwnProperty('latLng')) {
|
||||
let icon = feature.active?icon2:icon1
|
||||
//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 || ''
|
||||
|
@ -1734,8 +1731,30 @@ export function MapFun(mapObj) {
|
|||
})
|
||||
}
|
||||
marker.on('click', e => {
|
||||
console.log('点位数据', 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)
|
||||
|
@ -2065,8 +2084,7 @@ export function MapFun(mapObj) {
|
|||
openPopupVideoSurveillance: _openPopupVideoSurveillance,
|
||||
closeAllPopup: _closeAllPopup,
|
||||
addMovingMarker: _addMovingMarker,
|
||||
addResourceOnMapWithoutSuperMapCluster:
|
||||
_addResourceOnMapWithoutSuperMapCluster,
|
||||
addResourceOnMapWithoutSuperMapCluster: _addResourceOnMapWithoutSuperMapCluster,
|
||||
addPopOnMap: _addPopOnMap,
|
||||
addDynamicMapLayer: _addDynamicMapLayer,
|
||||
addPointsToMap: _addPointsToMap,
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue