核心思想:每次动态加载标记点,都会重新刷新地图,所以要实时监听地图放大活缩小的倍数,每次加载地图都要给其赋值,每次获取标记点的第一个数作为地图的中心点,这样视野也不会丢失。
<template>
<div class="container">
<div id="bigmap" v-show="isMap"></div>
<div class="bigmap" v-show="!isMap">
<img :src='imgSrc' alt="" style="display: inline-block;width:550px;height:660px;position: absolute;left:32%;top:13">
</div>
</div>
</template>
<script>
import * as L from "leaflet";
import "leaflet-html-legend";
import "leaflet/dist/leaflet.css";
import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标
import iconShadow from "leaflet/dist/images/marker-shadow.png" // 引入leaflet默认图标
import defaultMark from '../../assets/left/dna.png'
export default {
name: 'LeafletMap',
data() {
return {
imgSrc:`${this.PIC_URL}`,
isMap:false,
bigmap: null,
defaultMark,
mapData:[],
mapList:[],
mapboxList:[],
maphollowOutList:[],
scale:8,
center:[36.3, 107.6]
}
},
mounted() {
this.initMap()
},
methods: {
// 使用id为vue-leaflet的div容器初始化地图
initMap() {
this.bigmap = L.map("bigmap", {
center: this.center, // 地图中心
zoom: this.scale, //缩放比列
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false, // 移除右下角leaflet标识
});
// 加载底图
// let gaoDeLayer = L.tileLayer(
//
// )
// gaoDeLayer.addTo(this.bigmap);
var imageBounds = [[38.08566944, 106.5496139], [34.88218611, 109.5753083]];//图片的经纬度范围,西南角点,东北角点(纬度、经度)
var imageUrl=`${this.PIC_URL}`;//图片的地址
var imageLayer =L.imageOverlay(imageUrl, imageBounds,{opacity:0.8});//opacity是透明度
this.bigmap.addLayer(imageLayer);
// 这是重新获取点,渲染地图,地图的放大尺寸不变
this.bigmap.on('zoomend', (e) => {
//获取当前放大或者缩小的等级
this.scale = e.target.getZoom();
})
// 矩形背景色
// L.rectangle([
// [37.27613333, 106.4944583],
// [34.92549167, 106.5440528],
// [34.95300833, 108.9911944],
// [37.27478056, 109.0339222]
// ], {color: "rgba(155,194,230)", weight: 1,fillOpacity: 1,}).addTo(this.bigmap);
// 绘制镂空背景
// this.mapList.map((res)=>{
// var polygon = L.polygon(
// [res],
// {
// color: "",
// fillColor: "rgb(255,206,63)",
// fillOpacity: 1,
// weight: 1,
// }).addTo(this.bigmap);
// this.bigmap.fitBounds(polygon.getBounds());
// })
// this.maphollowOutList.map((res)=>{
// var polygon = L.polygon(
// [res],
// {
// color: "",
// fillColor: "rgba(155,194,230)",
// fillOpacity: 1,
// weight: 1,
// }).addTo(this.bigmap);
// this.bigmap.fitBounds(polygon.getBounds());
// })
// 绘制井坐标
this.mapData.map((item)=>{
let svgContent = `<div style="width:100px;height:20px;display:flex;align-items:center"><span style='width:15px;height:15px;border-radius:50%;margin-right:5px; display: inline-block;background:red'></span><span style='font-weight:bold;font-size:18px;z-index:9999'>${item.name}</span></div>`;
L.marker([item.lat, item.lng], {
icon: new L.divIcon({
iconSize: [30, 30],
className: "custom-color-icon",
html: svgContent
})
}).addTo(this.bigmap)
})
}
},
watch:{
'$store.state.wellCoordinates.wellList':{
handler(newVal,oldVal){
//对数据执行操作
if(newVal){
console.log(newVal,oldVal)
this.mapData = []
this.mapData = newVal
if(newVal.length>0){
this.isMap = true
}else{
this.isMap = false
}
this.center = newVal[0]
this.$nextTick(()=>{
if(newVal){
this.bigmap.remove();
}
this.initMap();
})
}
},
deep:true,
immediate:true
}
}
}
</script>
<style scoped>
.anim-tooltip{
border:none;
color:black;
font-weight: bold;
background-image: none;
}
.container {
width: 100%;
height: 100%;
}
#bigmap {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #42B983;
position: relative;
}
.bigmap{
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #42B983;
position: relative;
background-color:rgba(221,221,221);
}
</style>