百度地图绘制网格展示以及点击的展示与否，弹框样式自定义
绘制百度地图的网格以及点击的时候添加网格，再次点击的时候删除网格。以及相关的点的展示与否。相关的map.js见轨迹中的整理。具体展示形式根据实际情况来
图片展示
组件代码：
<template>
<div class="data_map" style="height:100%;position:relative">
<div class="bg_heights" style="position: relative;width:100%;" :style="{height:height}">
<div :id="mapId" style="width:100%;" :style="{height:height}"></div>
</div>
<div class="tabClickA">
<div class="tabList" @click="clickGrid('1')">警务区</div>
<div class="tabList">网格</div>
</div>
</div>
</template>
<style scoped lang="scss">
</style>
<style>
.anchorBL{
display: none;
}
body, html,#map {
height: 100%;
margin:auto ;
font-family:"微软雅黑";
}
</style>
<script type="text/ecmascript-6">
// require('echarts/extension/bmap/bmap.min');
// import * as zrender from 'zrender' //引入zrender库
import { loadBMap } from './map'
export default {
props:{
height:{
type:String,
default:'100%'
},
mapId:{
type:String,
default:'mapId'
},
//商圈区域
businessList:{
type:Array,
default:()=>[]
},
//绘制商铺点
shopList:{
type:Array,
default:()=>[]
},
//绘制设备点
equList:{
type:Array,
default:()=>[]
},
//警务区网格
policeArea:{
type:Array,
default:()=>[]
},
//综治网格
gridArea:{
type:Array,
default:()=>[]
},
//警务区展示与否
isShowPolice:{
type:Boolean,
default:false
},
//网格展示与否
isShowGrid:{
type:Boolean,
default:false
},
//热力地图数据
houtData:{
type:Array,
default:()=>[
// {coor:[118.711996,37.440117], count: 45},
// {coor:[118.714751,37.439935], count: 56},
// {coor:[118.709006,37.442001], count: 127},
// {coor:[118.707861,37.438914], count: 89},
// {coor:[118.712757,37.434551], count: 13},
// {coor:[118.649018, 37.453269], count: 234},
// {coor:[118.718937,37.434179], count: 46},
// {coor:[118.718398,37.443677], count: 339},
// {coor:[118.713907,37.448061], count: 95},
// {coor:[118.713907,37.448061], count: 354},
]
},
//点击设备展示设备信息还是video
isShowVideo:{
type:Boolean,
default:false
},
},
data(){
return {
mapLoading:false,
bgHeight:'668px',
map:'',
currentLat:118.711996,
currentLon : 37.440117,
getZoom:16, //地图当前的等级
}
},
watch: {
businessList: {
handler: function(newObj, oldObj) {
let that=this;
that.addMarker(this.businessList,'business')
},
deep: true, // 深度监听
immediate: true // 会在监测开始时调用一次该处理函数
},
shopList: {
handler: function(newObj, oldObj) {
let that=this;
that.drawPoint(that.shopList,'shop')
},
deep: true, // 深度监听
immediate: true // 会在监测开始时调用一次该处理函数
},
equList: {
handler: function(newObj, oldObj) {
let that=this;
that.drawPoint(that.equList,'camera')
},
deep: true, // 深度监听
immediate: true // 会在监测开始时调用一次该处理函数
},
policeArea: {
handler: function(newObj, oldObj) {
let that=this;
that.addMarker(that.policeArea,'police')
},
deep: true, // 深度监听
immediate: true // 会在监测开始时调用一次该处理函数
},
gridArea: {
handler: function(newObj, oldObj) {
let that=this;
that.addMarker(that.gridArea,'grid')
},
deep: true, // 深度监听
immediate: true // 会在监测开始时调用一次该处理函数
},
houtData: {
handler: function(newObj, oldObj) {
let that=this;
setTimeout(function(){
that.initHotMap()
},100)
},
deep: true, // 深度监听
immediate: true // 会在监测开始时调用一次该处理函数
},
},
methods:{
//初始化百度地图
initBdMap() {
let that = this, point,dataArry = [],lng=118.711996,lat=37.440117,areaText='';
point = new BMapGL.Point(lng,lat);
let map = new window.BMapGL.Map(this.mapId, {minZoom: 8, maxZoom: 20});
map.centerAndZoom(point, 17);
map.enableScrollWheelZoom();
that.map = map;
},
//绘制点
drawPoint(data,type){
var that = this
for(var i = 0;i<data.length;i++){
if(data[i].longitude!=''&&data[i].longitude!=null&&data[i].latitude!=''&&data[i].latitude!=null){
var point = new BMapGL.Point(Number(data[i].longitude), Number(data[i].latitude));
var myIcon;
if(type=='shop'){
var aa = require("../../assets/base/shop.png")
myIcon = new BMapGL.Icon(aa, new BMapGL.Size(36, 47));
}else{
var bb = require("../../assets/base/equ.png")
myIcon = new BMapGL.Icon(bb, new BMapGL.Size(36, 47));
}
var marker = new BMapGL.Marker(point,{
icon: myIcon
});
this.map.addOverlay(marker);
let customOverlay = new BMapGL.CustomOverlay(createDOM, {
point: new BMapGL.Point(Number(data[i].longitude),Number(data[i].latitude)),
opacity: 0.5,
// offsetY: -40,
// offsetX: -120,
properties: {
imgSrc: 'http://218.56.180.213:8035/shopping/static/file/pic/202307/picF7530AYm1689155182124.jpg',
name:type=='shop'?data[i].shopName:data[i].name,
longitude:data[i].longitude,
latitude:data[i].latitude,
id:data[i].id,
user:data[i].userName +' ('+data[i].phone+')',
address:data[i].addressName
}
});
//弹框
marker.addEventListener('click', function () {
// 1.获取图层中所有的覆盖物
let all=that.map.getOverlays()
all.map(item=>{
if (item.toString() === "CustomOverlay") {
that.map.removeOverlay(item);
}
})
if(!that.isShowVideo){
that.map.addOverlay(customOverlay);
}else{
that.$emit('showRight',customOverlay.properties)
// console.log(customOverlay.properties)
}
});
//添加标注位置
function createDOM() {
var div = document.createElement('div');
div.style.zIndex = BMapGL.Overlay.getZIndex(Number(this.properties.latitude));
div.setAttribute('class','divOutMap')
//上方的top
var topDiv = document.createElement('div');
topDiv.setAttribute('class','topDiv')
var topLeft = document.createElement('div');
topLeft.setAttribute('class','topLeft')
var topRight = document.createElement('div');
topRight.setAttribute('class','topRight')
topDiv.appendChild(topLeft);
topLeft.appendChild(document.createTextNode(this.properties.name));
topDiv.appendChild(topRight);
if(type=='shop'){
topRight.appendChild(document.createTextNode('查看更多'));
}else{
topRight.appendChild(document.createTextNode('抓拍记录'));
}
div.appendChild(topDiv);
//商铺的内容
if(type=='shop'){
//上方的top
var shopBox = document.createElement('div');
shopBox.setAttribute('class','shopBoxMap')
var shopOne = document.createElement('div');
shopOne.setAttribute('class','shopOne')
var shopTwo = document.createElement('div');
shopTwo.setAttribute('class','shopOne')
shopBox.appendChild(shopOne);
shopOne.appendChild(document.createTextNode(this.properties.user));
shopBox.appendChild(shopTwo);
shopTwo.appendChild(document.createTextNode(this.properties.address));
div.appendChild(shopBox);
}else{
let img = document.createElement('img');
img.setAttribute('class','mapShowImgA')
img.src = this.properties.imgSrc;
div.appendChild(img);
}
let self = this.properties
//点击跳转
topRight.addEventListener('click', function (e) {
if(type=='shop'){
that.$router.push("/business/shopDetail?id="+self.id );
}
});
return div;
}
}
}
},
//弹框展示
addPopSHow(){
},
//绘制区域描边
addMarker(data,type) {
let that = this
//添加警务网格
var business = data;
for(var i = 0;i<business.length;i++){
if(business[i].border!=''&&business[i].border!=null){
var policeGrid = business[i].border.split(';'),newArr = []
if(policeGrid.length>0){
policeGrid.forEach(item=>{
newArr.push(new BMapGL.Point(Number(item.split(',')[0]),Number(item.split(',')[1])))
})
var gridPolice;
let all=that.map.getOverlays()
if(type=='business'){
var gridPoliceA = new BMapGL.Polygon(newArr,{
strokeColor:"#4BADF8",
strokeWeight:2,
strokeOpacity:1,
strokeStyle:'dashed',
fillColor:'#4BADF8',
fillOpacity:0.3
})
this.map.addOverlay(gridPoliceA);
}else if(type=='police'){
// console.log(this.isShowPolice)
var gridPoliceB = new BMapGL.Polygon(newArr,{
strokeColor:"#FF5663",
strokeWeight:2,
strokeOpacity:1,
strokeStyle:'dashed',
fillColor:'#FF5663',
fillOpacity:0.3
})
gridPoliceB.class='police'
if(this.isShowPolice){
this.map.addOverlay(gridPoliceB);
}else{
all.map(item=>{
if (item.class === "police") {
that.map.removeOverlay(item);
}
})
}
}else if(type=='grid'){
console.log(this.isShowPolice)
var gridPoliceB = new BMapGL.Polygon(newArr,{
strokeColor:"#FF642E",
strokeWeight:2,
strokeOpacity:1,
strokeStyle:'dashed',
fillColor:'#FF642E',
fillOpacity:0.3
})
gridPoliceB.class='grid'
if(this.isShow){
this.map.addOverlay(gridPoliceB);
}else{
all.map(item=>{
if (item.class === "grid") {
that.map.removeOverlay(item);
}
})
}
}
}
}
}
},
clickGrid(data){
this.$emit('clickGrid',data)
},
//热力图
initHotMap(){
let that = this, point,dataArry = [],lng=118.711996,lat=37.440117,areaText='';
point = new BMapGL.Point(lng,lat);
let map = new window.BMapGL.Map(this.mapId, {minZoom: 8, maxZoom: 20});
map.centerAndZoom(point, 17);
map.enableScrollWheelZoom();
that.map = map;
var newArr = [];
let data= this.houtData;
for(var i = 0;i<data.length;i++){
// console.log(data[i])
let item = {
geometry: {
type: 'Point',
coordinates: data[i].coor
},
properties: {
count: data[i].count
}
}
newArr.push(item)
}
let view = new mapvgl.View({
map: map
});
let heatmap = new mapvgl.HeatmapLayer({
size: 100, // 单个点绘制大小
max: 500, // 最大阈值
height: 0, // 最大高度，默认为0
unit: 'm', // 单位，m:米，px: 像素
// gradient: { // 对应比例渐变色
// 0.15: "#416AFF",
// 0.25: "#fffc90",
// 0.45: "#ffd45a",
// 0.65: "#ff9e60",
// 0.85: "#ff6f52",
// 1: "#ff524d"
// // 0: '#33ff33',
// // 0.25: '#FFEA49',
// // 0.55: '#FF7430',
// // 0.85: '#FF3831',
// // 1: '#416AFF'
// }
gradient: { // 对应比例渐变色
0.25: 'rgba(0, 0, 255, 1)',
0.55: 'rgba(0, 255, 0, 1)',
0.85: 'rgba(255, 255, 0, 1)',
1: 'rgba(255, 0, 0, 1)'
}
});
view.addLayer(heatmap);
heatmap.setData(newArr);
// let data= [
// {
// geometry: {
// coordinates: [117.311792,34.800829],
// },
// properties: { count: 45}},
// {geometry: {coordinates: [117.313746,34.799956],}, properties: { count: 56}},
// {geometry: {coordinates: [117.31335,34.802772],}, properties: { count: 127}},
// {geometry: {coordinates: [117.310548,34.800905],}, properties: { count: 89}},
// {geometry: {coordinates: [117.309003,34.802417],}, properties: { count: 13}},
// {geometry: {coordinates: [118.649018, 37.453269],}, properties: { count: 234}},
// {geometry: {coordinates: [117.309254,34.798682],}, properties: { count: 46}},
// {geometry: {coordinates: [117.315363,34.798385],}, properties: { count: 572}},
// {geometry: {coordinates: [117.312704,34.796874],}, properties: { count: 95}},
// {geometry: {coordinates: [117.314141,34.804699],}, properties: { count: 354}},
// ];
},
},
//调用方法
mounted() {
var that = this
that.$nextTick(() => {
loadBMap("ahwEn9BozQOKSBXhe02qQtCOABvFu2hr").then(() => {
that.initBdMap();
})
})
}
}
</script>
<style lang="scss">
.tabClickA{
position: absolute;
top:20px;
right:20px;
display: flex;
z-index: 10;
cursor: pointer;
.tabList{
width: 93px;
height: 38px;
background: #53C9FC;
color: #ffffff;
font-size:14px;
text-align: center;
line-height: 38px;
margin-left: 10px;
}
}
.divOutMap{
width: 290px;
height: 185px;
background: url('http://218.56.180.213:8035/shopping/static/file/pic/202307/picrXBtW1uh1689581712300.png');
margin-top: -50px;
margin-left: -145px;
.topDiv{
display: flex;
padding: 25px 10px 0px 20px;
justify-content: space-between;
.topLeft{
font-size:16px;
color:rgba(235, 251, 255, 0.8);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topRight{
font-size: 14px;
color: #53C9FC;
text-decoration: underline;
width: 56px;
}
}
.shopBoxMap{
padding: 0px 10px 0px 20px;
.shopOne{
background: rgba(58,129,200,0.26);
border-radius: 5px;
height: 40px;
margin-top: 15px;
box-shadow: 0px 0px 15px rgba(50, 121, 198, 1) inset;
line-height: 40px;
color: #ffffff;
font-size:14px;
padding: 0px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.mapShowImgA{
width: 250px;
height: 106px;
margin-top: 10px;
margin-left: 25px;
}
}
</style>
浙公网安备 33010602011771号