leaflet 动态标点，后面的图片不动，只刷新标点

核心思想：每次动态加载标记点，都会重新刷新地图，所以要实时监听地图放大活缩小的倍数，每次加载地图都要给其赋值，每次获取标记点的第一个数作为地图的中心点，这样视野也不会丢失。

<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>