|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>自定义点标记内容</title>
|
|
|
|
|
|
<link rel="stylesheet" href="http://50.144.11.244:21009/support/static/api/demo/js-api/zh/css/demo.css">
|
|
|
|
|
|
<!-- 引入MineMap API插件 -->
|
|
|
|
|
|
<link rel="stylesheet" href="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.css">
|
|
|
|
|
|
<script src="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.js"></script>
|
|
|
|
|
|
<!-- 引入 popup 样式 -->
|
|
|
|
|
|
<link rel="stylesheet" href="./popup.css">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
#map {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 原始标注图片 */
|
|
|
|
|
|
.old_back {
|
|
|
|
|
|
background-image: url(./background-img//icon_company_blue.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 点击标注图片 */
|
|
|
|
|
|
.new_back {
|
|
|
|
|
|
background-image: url(./background-img/icon_company_yellow.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 监控设备不正常标注图片 */
|
|
|
|
|
|
.error_back {
|
|
|
|
|
|
background-image: url('../../src/assets/icon_company_yellow.png');
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
// * 地图全局参数设置
|
|
|
|
|
|
minemap.domainUrl = 'http://50.144.11.244:21009';
|
|
|
|
|
|
minemap.dataDomainUrl = 'http://50.144.11.244:21009';
|
|
|
|
|
|
minemap.serverDomainUrl = 'http://50.144.11.244:21009';
|
|
|
|
|
|
minemap.spriteUrl = 'http://50.144.11.244:21009/minemapapi/v2.1.0/sprite/sprite';
|
|
|
|
|
|
minemap.serviceUrl = 'http://50.144.11.244:21009/service/';
|
|
|
|
|
|
minemap.key = '16be596e00c44c86bb1569cb53424dc9';
|
|
|
|
|
|
minemap.solution = 12877;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// todo 获取vue中的设备数据
|
|
|
|
|
|
window.addEventListener('message', (event) => {
|
|
|
|
|
|
const deviceData = event.data
|
|
|
|
|
|
// 筛选经纬度为0的数组
|
|
|
|
|
|
const deviceDatas = deviceData.filter(item => item.Longitude !== 0)
|
|
|
|
|
|
// 设备编号的数组
|
|
|
|
|
|
// const deviceId = deviceDatas.map(item => item.DeviceID)
|
|
|
|
|
|
// console.log(deviceId);
|
|
|
|
|
|
console.log(deviceDatas);
|
|
|
|
|
|
// * map 实例化
|
|
|
|
|
|
const map = new minemap.Map({
|
|
|
|
|
|
container: 'map',
|
|
|
|
|
|
style: 'http://50.144.11.244:21009/service/solu/style/id/2365',
|
|
|
|
|
|
center: [120.336617, 33.766037],
|
|
|
|
|
|
zoom: 14,
|
|
|
|
|
|
pitch: 0,
|
|
|
|
|
|
maxZoom: 17,
|
|
|
|
|
|
minZoom: 3,
|
|
|
|
|
|
projection: 'LATLON'
|
|
|
|
|
|
});
|
|
|
|
|
|
// 循环设备数组进行打点
|
|
|
|
|
|
for (let i = 0; i < deviceDatas.length; i++) {
|
|
|
|
|
|
// 自定义点标记的内部DOM元素
|
|
|
|
|
|
const el = document.createElement('div');
|
|
|
|
|
|
el.id = 'marker';
|
|
|
|
|
|
// 自定义DOM样式 或者通过css类设置 (http://50.144.11.244:21009/support/static/api/demo/js-api/zh/images/park.png)
|
|
|
|
|
|
// el.style["background-image"] = "url(http://50.144.11.244:21009/support/static/api/demo/js-api/zh/images/park.png)";
|
|
|
|
|
|
el.className = 'old_back'
|
|
|
|
|
|
el.style["background-size"] = "cover";
|
|
|
|
|
|
el.style.width = "20px";
|
|
|
|
|
|
el.style.height = "30px";
|
|
|
|
|
|
el.style["border-radius"] = "50%";
|
|
|
|
|
|
// Marker构造函数接收两个参数，一个为自定义的DOM元素，一个是Object参数，其中包括偏移量等
|
|
|
|
|
|
// offset参数为标注点相对于其左上角偏移像素大小
|
|
|
|
|
|
// 调用setLngLat方法指定Marker的坐标位置
|
|
|
|
|
|
const point = deviceDatas[i]
|
|
|
|
|
|
const Longitude = point.Longitude
|
|
|
|
|
|
const Latitude = point.Latitude
|
|
|
|
|
|
const popup = new minemap.Popup({ offset: [0, -30] }).setHTML(`
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<div class="state state_a">人脸抓拍</div>
|
|
|
|
|
|
<div class="state state_b">人脸抓拍</div>
|
|
|
|
|
|
<div class="state state_c">人脸抓拍</div>
|
|
|
|
|
|
<div class="state state_d">人脸抓拍</div>
|
|
|
|
|
|
<button class="button_plus">
|
|
|
|
|
|
<span class="plus">+</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>`)
|
|
|
|
|
|
const marker = new minemap.Marker(el, { offset: [-25, -25] }).setPopup(popup).setLngLat([Longitude, Latitude]).addTo(map);
|
|
|
|
|
|
// 视频
|
|
|
|
|
|
const video = document.querySelector('video')
|
|
|
|
|
|
// 点击监控标记时，发送 设备id 通知 vue 页面接受并通过设备 id 发起请求获取视频url并显示
|
|
|
|
|
|
marker.getElement().addEventListener('click', function () {
|
|
|
|
|
|
if (el.classList.contains('old_back')) {
|
|
|
|
|
|
el.classList.remove('old_back')
|
|
|
|
|
|
el.classList.add('new_back')
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
|
cmd: 'myIframe',
|
|
|
|
|
|
params: {
|
|
|
|
|
|
channel: point.Channel,
|
|
|
|
|
|
}
|
|
|
|
|
|
}, '*')
|
|
|
|
|
|
console.log(point.Channel, '点击标记播放视频');
|
|
|
|
|
|
} else if (el.classList.contains('new_back')) {
|
|
|
|
|
|
el.classList.remove('new_back')
|
|
|
|
|
|
el.classList.add('old_back')
|
|
|
|
|
|
// 隐藏视频时关闭视频流
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
|
cmd: 'closeIframe',
|
|
|
|
|
|
params: {
|
|
|
|
|
|
channel: point.Channel,
|
|
|
|
|
|
close: true
|
|
|
|
|
|
}
|
|
|
|
|
|
}, '*')
|
|
|
|
|
|
console.log(point.Channel, '点击标记关闭视频');
|
|
|
|
|
|
}
|
|
|
|
|
|
// console.log(el.className);
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
