feat:石坪桥大屏研发
This commit is contained in:
parent
26a3bec787
commit
f5c89ede08
BIN
god-ui/public/images/jb.png
Normal file
BIN
god-ui/public/images/jb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
god-ui/public/images/jk.png
Normal file
BIN
god-ui/public/images/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 901 B |
BIN
god-ui/public/images/sxt.png
Normal file
BIN
god-ui/public/images/sxt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 764 B |
BIN
god-ui/public/images/sxt2.png
Normal file
BIN
god-ui/public/images/sxt2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
god-ui/src/views/bigscreen6/assets/icon4.png
Normal file
BIN
god-ui/src/views/bigscreen6/assets/icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
god-ui/src/views/bigscreen6/assets/icon5.png
Normal file
BIN
god-ui/src/views/bigscreen6/assets/icon5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because it is too large
Load Diff
BIN
god-ui/src/views/monitorMap/deviceMap/icon/jk.png
Normal file
BIN
god-ui/src/views/monitorMap/deviceMap/icon/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
god-ui/src/views/monitorMap/deviceMap/icon/sxt.png
Normal file
BIN
god-ui/src/views/monitorMap/deviceMap/icon/sxt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@ -18,6 +18,8 @@
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import icon from './icon/sxt.png'
|
||||
import icon2 from './icon/jk.png'
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "2933fa5683de5f95c0337aa5ff6a1174",
|
||||
};
|
||||
@ -25,8 +27,8 @@
|
||||
name: "map-view",
|
||||
data() {
|
||||
return {
|
||||
icon:require('../../../../public/images/monitorMapImage/sxt.jpg'),
|
||||
icon2:require('../../../../public/images/monitorMapImage/qt.webp')
|
||||
icon,
|
||||
icon2
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -45,95 +47,108 @@
|
||||
zoom: 17, // 初始化地图级别
|
||||
center: [106.503005,29.515668], // 初始化地图中心点位置
|
||||
});
|
||||
// 创建 AMap.Icon 实例：
|
||||
const icon = new AMap.Icon({
|
||||
size: new AMap.Size(25, 25), // 图标尺寸
|
||||
image: this.icon, // Icon的图像
|
||||
imageSize: new AMap.Size(25, 25) // 根据所设置的大小拉伸或压缩图片
|
||||
});
|
||||
const icon2 = new AMap.Icon({
|
||||
size: new AMap.Size(25, 25), // 图标尺寸
|
||||
image: this.icon2, // Icon的图像
|
||||
imageSize: new AMap.Size(25, 25) // 根据所设置的大小拉伸或压缩图片
|
||||
});
|
||||
//创建公共图标
|
||||
function CreateMarker(a,b){
|
||||
return new AMap.Marker({
|
||||
position: new AMap.LngLat(106.503005,29.516668),
|
||||
offset: new AMap.Pixel(a, b),
|
||||
icon: icon, // 添加 Icon 图标 URL
|
||||
title: '摄像头'
|
||||
});
|
||||
}
|
||||
function CreateMarker2(a,b){
|
||||
return new AMap.Marker({
|
||||
position: new AMap.LngLat(106.503005,29.516668),
|
||||
offset: new AMap.Pixel(a, b),
|
||||
icon: icon2, // 添加 Icon 图标 URL
|
||||
title: '摄像头'
|
||||
});
|
||||
}
|
||||
|
||||
let markerList=[CreateMarker(-350,-50),CreateMarker(-100,200),CreateMarker(50,-270),CreateMarker(150,-200)]
|
||||
let markerList2=[CreateMarker2(-190,-180),CreateMarker2(280,60)]
|
||||
this.map.add(markerList);
|
||||
this.map.add(markerList2)
|
||||
//添加事件
|
||||
markerList[0].on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'新世纪百货','AI摄像头-CAM90801')
|
||||
})
|
||||
markerList[1].on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'五洲小区东区彩虹广场','AI摄像头-CAM90802')
|
||||
})
|
||||
markerList[2].on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'重庆天启后街文艺园','AI摄像头-CAM90803')
|
||||
})
|
||||
markerList[3].on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'虹桥小区','AI摄像头-CAM90804')
|
||||
})
|
||||
|
||||
markerList2[0].on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'澳元域33号楼电梯','AI摄像头-CAM91701')
|
||||
})
|
||||
markerList2[1].on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'重庆平昌招待所','AI摄像头-CAM91702')
|
||||
})
|
||||
const marks=[
|
||||
{
|
||||
locaton:[106.49925434121705,29.516762649621796],
|
||||
name:'新世纪百货',
|
||||
device:'AI摄像头-CAM90801'
|
||||
},
|
||||
{
|
||||
locaton:[106.50233888158418, 29.51453123556404],
|
||||
name:'五洲小区东区彩虹广场',
|
||||
device:'AI摄像头-CAM90802'
|
||||
},
|
||||
{
|
||||
locaton:[106.50388919839479,29.518573886771875],
|
||||
name:'重庆天启后街文艺园',
|
||||
device:'AI摄像头-CAM90803'
|
||||
},
|
||||
{
|
||||
locaton:[106.50438272485353,29.518270460128708],
|
||||
name:'虹桥小区',
|
||||
device:'AI摄像头-CAM90804'
|
||||
}
|
||||
]
|
||||
|
||||
const marks2=[
|
||||
{
|
||||
// locaton:[106.50426470765687, 29.518233115243664],
|
||||
locaton:[106.50158249864198, 29.518233115243664],
|
||||
|
||||
name:'澳元域33号楼电梯',
|
||||
device:'AI摄像头-CAM90805'
|
||||
},
|
||||
{
|
||||
locaton:[106.505928,29.515951],
|
||||
name:'重庆平昌招待所',
|
||||
device:'AI摄像头-CAM90806'
|
||||
},
|
||||
]
|
||||
marks.forEach(item => {
|
||||
this.addMapMarker(item.locaton, 'sxt', { name: item.name, device: item.device })
|
||||
})
|
||||
marks2.forEach(item => {
|
||||
this.addMapMarker2(item.locaton, 'jk', { name: item.name, device: item.device })
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
//创建显示标点内容
|
||||
showInfo(lng,lat,msg,number){
|
||||
const content = `
|
||||
<div style="padding: 6px;background-color: #c6dbee;width:200px">
|
||||
<div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${number}</b></div>
|
||||
<div style="padding: 4px;margin:5px 0">${msg}</div>
|
||||
<div style="padding: 4px;">正常运行</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat])
|
||||
setTimeout(() => {
|
||||
infoWindow.close()
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = 'sxt', info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: ''
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on('click', (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], { type: 'red', ...info })
|
||||
})
|
||||
},
|
||||
addMapMarker2(sourceData = [], type = 'jk', info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: ''
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on('click', (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], { type: 'red', ...info })
|
||||
})
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow(lng, lat, sourceInfo = {}) {
|
||||
const content = `
|
||||
<div style="padding: 6px;background-color: #32b9ef;">
|
||||
<div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||
<div style="padding: 4px;">正常运行</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat])
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
#map{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height:100vh;
|
||||
height:calc(100vh - 84px);
|
||||
position: relative;
|
||||
}
|
||||
.box-item{
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import icon from './icon/jb.png'
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "2933fa5683de5f95c0337aa5ff6a1174",
|
||||
};
|
||||
@ -21,7 +22,7 @@
|
||||
name: "map-view",
|
||||
data() {
|
||||
return {
|
||||
icon:require('./icon/jb.png'),
|
||||
icon
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -38,78 +39,75 @@
|
||||
|
||||
this.map = new AMap.Map("map", {
|
||||
zoom: 17, // 初始化地图级别
|
||||
center: [106.503005,29.515668], // 初始化地图中心点位置
|
||||
center: [106.50300,29.51566], // 初始化地图中心点位置
|
||||
});
|
||||
// 创建 AMap.Icon 实例：
|
||||
const icon = new AMap.Icon({
|
||||
size: new AMap.Size(25, 25), // 图标尺寸
|
||||
image: this.icon, // Icon的图像
|
||||
imageSize: new AMap.Size(25, 25) // 根据所设置的大小拉伸或压缩图片
|
||||
});
|
||||
|
||||
//创建公共图标
|
||||
function CreateMarker(a,b){
|
||||
return new AMap.Marker({
|
||||
position: new AMap.LngLat(106.503005,29.516668),
|
||||
offset: new AMap.Pixel(a, b),
|
||||
icon: icon, // 添加 Icon 图标 URL
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
let marker=CreateMarker(-180,-200)
|
||||
let marker2=CreateMarker(-80,180)
|
||||
|
||||
this.map.add(marker);
|
||||
this.map.add(marker2);
|
||||
//添加事件
|
||||
|
||||
marker.on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'有电动车乘坐电梯上楼','澳元域33号楼电梯','AI摄像头-CAM90801')
|
||||
this.map.on('click', (e) => {
|
||||
navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
|
||||
})
|
||||
marker2.on('click',(e)=>{
|
||||
this.showInfo(e.lnglat.lng,e.lnglat.lat,'小区垃圾桶垃圾满溢报警','五洲小区东区彩虹广场','AI摄像头-CAM90801')
|
||||
|
||||
const marks = [
|
||||
{
|
||||
locaton: [106.50158249864198,29.518233115243664],
|
||||
name: '澳元域33号楼',
|
||||
device: 'AI摄像头-CAM90801',
|
||||
address:'有电动车乘坐电梯上楼'
|
||||
},
|
||||
{
|
||||
locaton:[106.50233888158418, 29.51453123556404],
|
||||
name: '五洲小区东区彩虹广场',
|
||||
device: 'AI摄像头-CAM90801',
|
||||
address:'小区垃圾桶垃圾满溢报警'
|
||||
}
|
||||
];
|
||||
marks.forEach(item => {
|
||||
this.addMapMarker(item.locaton, 'jb', { name: item.name, device: item.device,address:item.address })
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = 'jb', info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: ''
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on('click', (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], { type: 'red', ...info })
|
||||
})
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow(lng, lat, sourceInfo = {}) {
|
||||
const content = `
|
||||
<div style="padding: 6px;background-color: #cce0f1;">
|
||||
<div>
|
||||
<div style="padding: 4px;margin:5px 0;color:red;"><b>${sourceInfo.address}</b></div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;"><b>${sourceInfo.name}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat])
|
||||
},
|
||||
|
||||
//创建显示标点内容
|
||||
showInfo(lng,lat,msgWarn,msg,number){
|
||||
const content = `
|
||||
<div style="padding: 6px;background-color: #c6dbee;width:200px">
|
||||
<div>
|
||||
<div style="padding: 4px;color:red;font-weight: 600;">${msgWarn}</div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${number}</b></div>
|
||||
<div style="padding: 4px;margin:5px 0">${msg}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat])
|
||||
setTimeout(() => {
|
||||
infoWindow.close()
|
||||
}, 3000);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#map{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height:100vh;
|
||||
height: calc(100vh - 84px);
|
||||
position: relative;
|
||||
}
|
||||
.box-item{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user