fix
This commit is contained in:
parent
6ba06531d1
commit
9952885a7b
BIN
god-ui/public/images/mapIcon/img1.png
Normal file
BIN
god-ui/public/images/mapIcon/img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
BIN
god-ui/public/images/mapIcon/img2.jpeg
Normal file
BIN
god-ui/public/images/mapIcon/img2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
god-ui/public/images/mapIcon/jk.png
Normal file
BIN
god-ui/public/images/mapIcon/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/public/images/mapIcon/warn.png
Normal file
BIN
god-ui/public/images/mapIcon/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@ -2,16 +2,25 @@
|
||||
<div class="box">
|
||||
<div id="middleMap"></div>
|
||||
<div class="sl">
|
||||
<div class="left">
|
||||
<div class="sxt"></div>
|
||||
<div>监控</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="warn"></div>
|
||||
<div>预警</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="sxt"></div>
|
||||
<div>监控</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="warn"></div>
|
||||
<div>预警</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-panel" v-show="rightList.length > 0">
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item :title="item.name" :name="(index + 1)" v-for="(item, index) in rightList" :key="index">
|
||||
<div v-if="item.src">
|
||||
<img :src="item.src" alt="" style="width: 100%;">
|
||||
</div>
|
||||
<div v-else style="width: 100%;padding: 1rem 0;text-align: center;">暂无视频</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -23,7 +32,11 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
|
||||
mouseTool: null,
|
||||
overlays: [],
|
||||
|
||||
activeName: '1',
|
||||
rightList: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -31,61 +44,92 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
const that = this
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("middleMap", {
|
||||
that.map = new AMap.Map("middleMap", {
|
||||
zoom: 13, //级别
|
||||
center: [106.45773,29.54098], //中心点坐标
|
||||
center: [106.45773, 29.54098], //中心点坐标
|
||||
mapStyle: "",
|
||||
});
|
||||
this.map.on("click", (e) => {
|
||||
that.map.on("click", (e) => {
|
||||
navigator.clipboard.writeText(
|
||||
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||
);
|
||||
});
|
||||
const marks = [
|
||||
{
|
||||
locaton: [106.46174288158418,29.53138123556404],
|
||||
locaton: [106.46174288158418, 29.53138123556404],
|
||||
name: "重庆亿利宝汽车配件有限公司",
|
||||
device: "AI摄像头-CAM90802",
|
||||
},
|
||||
{
|
||||
locaton: [106.45773188158418,29.54092123556404],
|
||||
locaton: [106.45773188158418, 29.54092123556404],
|
||||
name: "重庆市沙坪坝区人民政府",
|
||||
device: "AI摄像头-CAM90804",
|
||||
},
|
||||
];
|
||||
const marks2 = [
|
||||
{
|
||||
locaton: [106.45413980158418,29.55100123556404],
|
||||
locaton: [106.45413980158418, 29.55100123556404],
|
||||
name: "沙坪公园",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "游客溺水",
|
||||
src: '/images/mapIcon/img1.png'
|
||||
},
|
||||
{
|
||||
locaton: [106.48074381158418,29.54188923556404],
|
||||
locaton: [106.48074381158418, 29.54188923556404],
|
||||
name: "森林实验小学",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "校门口出现车不礼让行人现象",
|
||||
src:this.sp2
|
||||
src: '/images/mapIcon/img2.jpeg'
|
||||
},
|
||||
];
|
||||
|
||||
AMap.plugin(
|
||||
["AMap.PlaceSearch", "AMap.Autocomplete", "AMap.MouseTool"],
|
||||
(status, result) => {
|
||||
that.mouseTool = new AMap.MouseTool(that.map);
|
||||
that.mouseTool.on('draw', function (e) {
|
||||
that.overlays.push(e.obj);
|
||||
console.log('dasda', e.obj.De.path);
|
||||
const _path = e.obj.De.path.map(item => ([item.R, item.Q]))
|
||||
console.log('_path', _path);
|
||||
setTimeout(() => {
|
||||
const innerItem = [...marks, ...marks2].filter(item => {
|
||||
return AMap.GeometryUtil.isPointInRing(item.locaton, _path);
|
||||
})
|
||||
console.log('innerItem', innerItem);
|
||||
that.rightList = innerItem
|
||||
that.map.remove(that.overlays)
|
||||
}, 200)
|
||||
})
|
||||
that.mouseTool.rectangle({
|
||||
fillColor: '#00b0ff',
|
||||
strokeColor: '#80d8ff'
|
||||
// 同Polygon的Option设置
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
marks.forEach((item, index) => {
|
||||
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||
that.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||
});
|
||||
marks2.forEach((item, index) => {
|
||||
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||
that.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device, address: item.address })
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
@ -161,44 +205,61 @@ export default {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
.box{
|
||||
position: relative;
|
||||
.sl{
|
||||
width: 250px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
right:3%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.sxt{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/jk.png);
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.warn{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/warn.png);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
.right-panel {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
width: 18rem;
|
||||
padding: 1rem;
|
||||
z-index: 999;
|
||||
background-color: white;
|
||||
border-radius: .4rem;
|
||||
box-shadow: 2px 2px 4px #25252525, -2px -2px 2px #14141414;
|
||||
}
|
||||
|
||||
.sl {
|
||||
width: 250px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
right: 3%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.sxt {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/jk.png);
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.warn {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/warn.png);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -68,21 +68,21 @@ export default {
|
||||
name: "沙坪公园",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "游客溺水",
|
||||
src:'./assets/img1.png'
|
||||
src:'/images/mapIcon/img1.png'
|
||||
},
|
||||
{
|
||||
locaton: [106.48074381158418,29.54188923556404],
|
||||
name: "森林实验小学",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "校门口出现车不礼让行人现象",
|
||||
src:'./assets/img2.jpeg'
|
||||
src:'/images/mapIcon/img2.jpeg'
|
||||
},
|
||||
];
|
||||
marks.forEach((item, index) => {
|
||||
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||
});
|
||||
marks2.forEach((item, index) => {
|
||||
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||
this.addMapMarker2(item.locaton, 'jb', item)
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user