<template>
|
<div class="showIndex-wrap">
|
<div class="mapBox">
|
<baidu-map
|
:center="center"
|
:zoom="zoom"
|
class="bm-view"
|
@ready="handler">
|
</baidu-map>
|
<!--<div class="map_container" id="map_container"></div>-->
|
</div>
|
<div class="showIndex-wrap-inside">
|
<div class="indexMoudleBlock-box">
|
<IndexMoudleBlock></IndexMoudleBlock>
|
</div>
|
<div class="yunwei-box">
|
<YunweiBlock></YunweiBlock>
|
</div>
|
<div class="rizhi-box">
|
<TimesLogs></TimesLogs>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import IndexMoudleBlock from "./IndexMoudleBlock";
|
import TimesLogs from "./TimesLogs";
|
import YunweiBlock from "./YunweiBlock";
|
export default {
|
name: "showIndex",
|
components: {
|
IndexMoudleBlock,
|
YunweiBlock,
|
TimesLogs
|
},
|
data() {
|
return{
|
center: { lng: 118.20, lat: 39.63},
|
zoom: 6,
|
mapObj:{},
|
mapData:[],
|
mapData2:[],
|
}
|
},
|
mounted() {
|
//this.getMapData()
|
//this.initMap()
|
},
|
methods: {
|
// initMap() {
|
// let map = new BMapGL.Map('map_container')
|
// map.centerAndZoom(new BMapGL.Point(118.183450598,39.6505309225),12)
|
// let goodsData = require('../../../assets/js/custom_map_config2')
|
// map.setMapStyleV2({
|
// styleJson: goodsData
|
// // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
|
// // style: 'bluish'
|
// })
|
// map.setTilt(0)
|
// map.setHeading(0)
|
// map.enableScrollWheelZoom(true) //开启缩放功能
|
//
|
// // //图层管理器（Api文档--图层管理器）
|
// // var view = new mapvgl.View({
|
// // map: map, //把生成的地图map传进来
|
// // });
|
// // //飞线图层的创建方式（Api文档--飞线图层）
|
// // var layer = new mapvgl.LineRainbowLayer({
|
// // // blend: 'lighter',
|
// // // width: 12,
|
// // //color: 'rgba(0, 96, 222, 1)',
|
// // // lineJoin:'bevel'
|
// // //style: 'road', // road, arrow, normal
|
// // width: 10,
|
// // //animation: true
|
// //
|
// // });
|
// // var layer2 = new mapvgl.LineFlowLayer({
|
// // // color: 'rgba(0, 255, 252, 1)',
|
// // // width: 14,
|
// // // animation: true,
|
// // // duration: 1, // 循环时间2s
|
// // // trailLength: 2, // 拖尾长度占间隔的0.4
|
// // // interval: 0.1, // 粒子长度占线整体长度的0.2
|
// // // //step:0.1,
|
// // // startTime: 0,
|
// // // endTime: 100,
|
// // // color: 'rgba(255, 71, 26, 0.9)',
|
// // // step: 0.1, // 动画的速度
|
// // // width: 10,
|
// // // animation: true,
|
// // // startTime:0,
|
// // // endTime:4,
|
// // // duration: 1, // 循环时间2s
|
// // // trailLength: 0.2, // 拖尾长度占间隔的0.4
|
// // // interval: 0.1 // 粒子长度占线整体长度的0.2
|
// // color: 'rgba(0, 255, 252, 1)',
|
// // width: 6,
|
// // animation: true,
|
// // duration: 1.5, // 循环时间2s
|
// // trailLength: 1, // 拖尾长度占间隔的0.4
|
// // interval: 0.05, // 粒子长度占线整体长度的0.2
|
// // step:0.02,
|
// // startTime: 0,
|
// // endTime: 100,
|
// // });
|
// // // let layer = new mapvgl.LineTripLayer({
|
// // // color: 'rgba(255, 71, 26, 0.9)',
|
// // // width: 16,
|
// // // animation: true,
|
// // // duration: 1, // 循环时间2s
|
// // // trailLength: 20, // 拖尾长度占间隔的0.4
|
// // // interval: 0.1 // 粒子长度占线整体长度的0.2
|
// // // });
|
// // view.addLayer(layer) //把图层添加到图层管理器重
|
// // view.addLayer(layer2) //把图层添加到图层管理器重
|
// // layer.setData(this.mapData2) //图层数据
|
// // layer2.setData(this.mapData2) //图层数据
|
// },
|
|
// getMapData() {
|
// this.mapData = []
|
// this.mapData2 = []
|
// let re2 = [
|
// [
|
// {
|
// lng: 118.144674,
|
// lat: 39.660641
|
// },
|
// {
|
// lng: 118.229198,
|
// lat: 39.763508
|
// },
|
// ],
|
// [
|
// {
|
// lng: 118.180618,
|
// lat: 39.753635
|
// },
|
// {
|
// lng: 118.229198,
|
// lat: 39.753635
|
// },
|
// ],
|
// [
|
// {
|
// lng: 118.232887,
|
// lat: 39.619857
|
// },
|
// {
|
// lng: 118.208669,
|
// lat: 39.596232
|
// }
|
// ],
|
// [
|
// {
|
// lng: 118.240577,
|
// lat: 39.661919
|
// },
|
// {
|
// lng: 118.187038,
|
// lat: 39.635918
|
// }
|
// ],
|
// [
|
// {
|
// lng: 118.185321,
|
// lat: 39.678277
|
// },
|
// {
|
// lng: 118.217221,
|
// lat: 39.677581
|
// }
|
// ],
|
// [
|
// {
|
// lng: 118.184038,
|
// lat: 39.631268
|
// },
|
// {
|
// lng: 118.184042,
|
// lat: 39.624384
|
// }
|
// ]
|
// ]
|
// let re = [
|
// [118.184038,39.631268],
|
// [118.184042,39.624384],
|
//
|
//
|
// ]
|
// let curve = new mapvgl.BezierCurve()
|
// for(let i=0; i<re2.length; i++) {
|
// //re[i].lng
|
// curve.setOptions({
|
// start:[re2[i][0].lng,re2[i][0].lat],
|
// end:[re2[i][1].lng,re2[i][1].lat]
|
// })
|
// let cureData = curve.getPoints()
|
// console.log(re2[i],'re[i]=====')
|
// this.mapData2.push({
|
// geometry: { //携带地理信息
|
// type: 'LineString',
|
// coordinates:cureData, //把贝塞尔曲线的数据放进来
|
// }
|
// })
|
// }
|
// console.log(this.mapData2,'mapData2===')
|
// this.mapData.push({
|
// geometry: { //携带地理信息
|
// type: 'LineString',
|
// coordinates:re, //把贝塞尔曲线的数据放进来
|
// },
|
// })
|
// console.log(this.mapData,'mapData===')
|
// }
|
handler({BMap, map}) {
|
this.mapObj = {BMap, map}
|
let goodsData = require('../../../assets/js/custom_map_config2')
|
let point = new BMap.Point(118.183450598,39.6505309225)
|
map.centerAndZoom(point, 15)
|
map.enableScrollWheelZoom(true) //鼠标滚动缩放
|
map.setMapStyleV2({
|
styleJson: goodsData
|
// styleId: '5f9b8a9639cf6e4ae8806379bedba141'
|
// style: 'bluish'
|
})
|
map.setCurrentCity('唐山') // 设置地图显示的城市 此项是必须设置的
|
this.addMarker()
|
|
},
|
|
addMarker() {
|
this.mapData = [
|
{
|
latitude: '118.20,39.63',
|
},
|
{
|
latitude: '118.117511,39.625670',
|
},
|
{
|
latitude: '118.114897,39.684427',
|
},
|
{
|
latitude: '118.119517,39.655598',
|
},
|
{
|
latitude: '118.116267,39.694433',
|
},
|
{
|
latitude: '118.311267,39.694433',
|
},
|
{
|
latitude: '118.211267,39.694433',
|
},
|
{
|
latitude: '118.011267,39.674433',
|
},
|
{
|
latitude: '118.011227,39.604433',
|
}
|
]
|
let BMap = this.mapObj.BMap
|
let map = this.mapObj.map
|
this.mapData.forEach(item => { //lng 经度 lat 经度
|
if(item.latitude != null && item.latitude != '') {
|
let longitude = item.latitude.split(',')[0]
|
let latitude = item.latitude.split(',')[1]
|
let myIcon = new BMap.Icon(
|
require("../../../assets/img/markerIcon.png"),
|
new BMap.Size(35, 35),
|
{ imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
|
let point = new BMap.Point(longitude,latitude)
|
let marker = new BMap.Marker(point,{icon:myIcon})
|
map.addOverlay(marker)
|
map.setZoom(12)
|
// 添加鼠标划入坐标点的显示内容
|
let str = '<div style="padding:4px 10px;width:300px;max-width: 400px;display: flex;flex-direction: row;">'
|
str += '<div>'
|
str += '<h1 style="font-size: 13px;text-align: center;line-height: 2"> ' + item.subjectName + '</h1>'
|
str += '<div style="display: flex;flex-direction: column">'
|
str += '<div><h1 style="font-size: 12px;padding:2px 0;width: 100%;white-space:pre-wrap">案件描述：'+item.casePoint+'</h1></div>'
|
str += '<div><h1 style="font-size: 12px;padding:2px 0"">地址：'+item.address+'</h1></div>'
|
str += '<div><h1 style="font-size: 12px;padding:2px 0">时间：'+item.time+'</h1></div>'
|
str += '</div>'
|
str += '</div>'
|
let opts = {
|
position: point,
|
offset: new BMap.Size(30,-30)
|
}
|
// 创建一个文本标注实例
|
let label = new BMap.Label(str,opts);
|
// 清除百度地图自带样式
|
label.setStyle({
|
border: 'none',
|
//backgroundColor: 'rgba(0,0,0,0.5)',
|
padding: '6px',
|
borderRadius:'4px',
|
boxShadow: '0 0 0 10px rgba(0,0,0,0)'
|
});
|
// 默认不显示文本标注
|
label.hide()
|
// 在全景场景内添加覆盖物
|
map.addOverlay(label);
|
marker.addEventListener('mouseover', function () {
|
//鼠标移入动画
|
let divElement = document.createElement('div')
|
divElement.className = 'before'
|
let divElement2 = document.createElement('div')
|
divElement2.className = 'after'
|
marker.gd.innerHtml = marker.gd.childNodes[0]
|
marker.gd.appendChild(divElement)
|
marker.gd.appendChild(divElement2)
|
marker.gd.className = ''
|
marker.gd.className = 'mapBGFault'
|
label.show()
|
})
|
marker.addEventListener('mouseout', function () {
|
marker.gd.className = ''
|
label.hide()
|
})
|
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.showIndex-wrap{
|
width: 100%;
|
height: calc(100% - 0.4167rem /* 80/192 */);
|
margin-top: 0.1042rem /* 20/192 */;
|
position: relative;
|
.indexMoudleBlock-box{
|
position: absolute;
|
left: 0.1823rem /* 35/192 */;
|
top: 0;
|
}
|
.yunwei-box{
|
position: absolute;
|
left: 0.1823rem /* 35/192 */;
|
top: 0.9375rem /* 180/192 */;
|
height: calc(100% - 0.9896rem /* 190/192 */);
|
max-height: 4.078125rem /* 783/192 */;
|
}
|
.rizhi-box{
|
position: absolute;
|
right: 0.15625rem /* 30/192 */;
|
top:0.9375rem /* 180/192 */;
|
height: calc(100% - 0.9896rem /* 190/192 */);
|
max-height: 4.078125rem /* 783/192 */;
|
}
|
.mapBox{
|
width: 100%;
|
position: absolute;
|
left: 0;
|
top: -0.4167rem /* -80/192 */;
|
bottom: 0;
|
right: 0;
|
.map_container{
|
width: 100%;
|
height: 100%;
|
}
|
.bm-view{
|
width: 100%;
|
height: 100%;
|
/*overflow: hidden;*/
|
}
|
}
|
}
|
</style>
|
