一:创建自定义窗口组件
<template>
<div class="trsInfoWindow">
<div style="padding: 10px">{{ vNameS }}</div>
<ysImosSdk :vCode="vCodes" v-if="type" :key="keys"></ysImosSdk>
</div>
</template>
<style lang="scss">
.trsInfoWindow {
width: 400px;
height: 285px;
background-color: rgba(148,148,148,.7);
.imosSdk-video {
width: 100%;
height: 251px;
border-width: 0;
}
}
</style>
<script>
import ysImosSdk from "../../components/ysImosSdk/Index";
export default {
// 高德地图信息窗口组件
name: 'InfoWindow',
props: ['vCode', 'vName'],
data () {
return {
vCodes: '',
vNameS: '',
type: false,
keys: Date.now()
}
},
methods: {
init (item) {
let _this = this;
_this.type = false;
_this.type = true;
_this.keys = Date.now();
_this.vNameS = item.target._opts.title;
//_this.vCodes = item.target._opts.trsIndexCode;
_this.vCodes = '78-DE-FZ_1';
console.log(_this.vNameS + _this.vCodes)
}
},
components: {
ysImosSdk, // 视频插件
}
}
</script>
二:父组件中引用自定义窗口组件
<template>
<div>
<div :id="mapId"></div>
<InfoWindow ref="infoWindow"></InfoWindow>
</div>
</template>
<script>
import InfoWindow from './InfoWindow'
export default {
name: 'Index',
props: ['mapType'],
data () {
return {
mapId: 'cesiumContainer',
map: null, // 地图实例
markerList: [],
infoWindow: {},
vName: '', // 摄像头名称
vCode: '',// 摄像头ID
}
},
mounted () {
this.initGaoDeMap();
},
methods: {
// 初始化高德地图
initGaoDeMap () {
let _this = this;
_this.map = new AMap.Map('cesiumContainer', {
resizeEnable: true, //是否监控地图容器尺寸变化
skyColor: '#00162E', // 天空颜色
mapStyle: "amap://styles/dark",
rotateEnable:true,
pitchEnable:true,
zoom: 12,
rotation:-15,
pitch: 45, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
zooms:[3,20],
center:[79.074395,39.868951]
});
// 控件
_this.map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'1200px',
top:'10px'
}
}));
},
// 高德地图点标记(单点)
gdMakerLable (lableObj) {
let _this = this;
// 创建一个 Marker 实例:
let marker = new AMap.Marker({
position: new AMap.LngLat(lableObj.lableList[0], lableObj.lableList[1]),
size: new AMap.Size(lableObj.lableSize[0], lableObj.lableSize[1]),
icon: lableObj.lableImg,
imageOffset: new AMap.Pixel(lableObj.lableImageOffset[0], lableObj.lableImageOffset[1]),
imageSize: new AMap.Size(lableObj.lableImageSize[0], lableObj.lableImageSize[1]),
title: lableObj.lableName,
trsIndexCode: lableObj.lableIndexCode,
trsClick: lableObj.lableClick,
});
// 将创建的点标记添加到已有的地图实例
_this.markerList.push(marker)
_this.map.add(marker);
//设置地图中心点
_this.map.setCenter(lableObj.lableList);
// 满足条件绑定点击事件
if (lableObj.lableClick === true) {
marker.on('click', function(ev) {
_this.gdCreateInfoWindow(ev)
});
}
},
// 高德信息窗口
gdCreateInfoWindow (ev) {
let _this = this;
_this.infoWindow = new AMap.InfoWindow({
name: ev.target._opts.title,
isCustom: true, //使用自定义窗体
anchor: 'bottom-center',
content: _this.$refs.infoWindow.$el,
offset: new AMap.Pixel(0, -10),
closeWhenClickMap: true,
retainWhenClose: true,
});
// 打开信息窗口
_this.infoWindow.open(_this.map, ev.target.getPosition());
// 重点:直接调用子组件方法,不然会导致多次点击一个点时,子组件无法刷新造成视频不能渲染的坑
_this.$refs.infoWindow.init(ev);
},
},
components: {
InfoWindow,
}
}
</script>
三:效果