vue实现离线混合地图实现，带飞线，动态图标，提供瓦片下载器

这个是效果图，也是一段难过的回忆

 


npm install  leaflet
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

    initMap() {

      let url = window.location.origin
      const map = L.map(this.$refs.map, { zoomControl: false }).setView([34.7466, 113.6249], 10) // 隐藏缩放控件
      const satelliteLayer = L.tileLayer(url + '/satellite/{z}/{x}/{y}.jpg', {
        maxZoom: 5, // 修改为6
        minZoom: 4,
        opacity: 1,
        zoom: 6, // 调整为较大的缩放级别以放大地图
        noWrap: true // 不允许地图重复
      }).addTo(map)

      const overlayLayer = L.tileLayer(url + '/overlay/{z}/{x}/{y}.png', {
        maxZoom: 5, // 修改为6
        minZoom: 4,
        zoom: 6, // 调整为较大的缩放级别以放大地图
        opacity: 1,
        noWrap: true // 不允许地图重复
      }).addTo(map)

      // 定义地图的边界，这里假设中国的经纬度范围
      const southWest = L.latLng(3.86, 73.66)
      const northEast = L.latLng(53.55, 135.0)
      const bounds = L.latLngBounds(southWest, northEast)
      map.setMaxBounds(bounds)
      // 监听缩放结束事件
      let that=this
      map.on('zoomend', function () {
        if (map.getZoom() === 4) {
          // 在这里添加你的判断逻辑
          that.imgshow = true;
          // 进行其他操作
        }else {
          that.imgshow=false

        }
      });
      // 限制地图拖拽
      map.on('drag', function () {
        map.panInsideBounds(bounds, { animate: false })
      })
      // map.setView([35.0, 105.0], 1); // 初始视图
      // 设置最大边界
      // 标记郑州和武汉
      // 使用 divIcon 显示文本
      const zhengzhouIcon = L.divIcon({
        className: 'text-label',
        html: '
郑州
',
        iconSize: [50, 60],
      });

      const wuhanIcon = L.divIcon({
        className: 'text-label',
        html: '
武汉
',
        iconSize: [50, 10],
      });

    
      L.marker([35.6488, 85.1175], { icon: lasa }).addTo(map);
    
        L.marker([34.7466, 113.6249], { icon: zhengzhouIcon }).addTo(map);
        L.marker([30.5823, 114.2986], { icon: wuhanIcon }).addTo(map);
        this.addFlightLine(map, [34.7466, 113.6249], [30.5823, 114.2986],0); // 郑州到武汉的飞线
      
    addFlightLine(map, start, end,num) {
      // 创建弯曲的线条
      const controlPoint = [
        (start[0] + end[0]) / 2,
        (start[1] + end[1]) / 2 + 3 // 控制抛物线的高度
      ]
      const latlngs = this.getBezierPoints(start, controlPoint, end, 50) // 生成抛物线的点
      const polyline = L.polyline(latlngs, {
        color: 'rgb(150,231,240)', // 修改颜色
        weight: 3,
        opacity: 0.7,
        dashArray: num==0?'10, 5':'10,0' // 设置虚线，10px 线段，5px 间隔
      }).addTo(map)

      //添加箭头
      //  this.addArrows(latlngs, map);
      // 添加小飞机标记
      this.addAirplane(latlngs, map)
      // 视图适应飞线
      map.fitBounds(polyline.getBounds())
    },

    addAirplane(latlngs, map) {
      const airplaneIcon = L.icon({
        iconUrl: '/static/img/小货车.png', // 替换为飞机图标的 URL
        iconSize: [30, 30], // 调整图标大小
        iconAnchor: [17, 28] // 图标的锚点
      })

      // 创建飞机标记
      const airplaneMarker = L.marker(latlngs[0], { icon: airplaneIcon }).addTo(map)
      let index = 0 // 初始位置索引
      const speed = 80 // 控制滑动速度，增大值会减慢速度
      const moveAirplane = () => {
        if (index < latlngs.length) {
          airplaneMarker.setLatLng(latlngs[index])
          index++
          setTimeout(moveAirplane, speed) // 使用 setTimeout 控制更新间隔
        } else {
          index = 0 // 重置位置以实现循环效果
          setTimeout(moveAirplane, speed) // 继续动画
        }
      }

      // // 添加箭头效果
      // this.addArrowEffect(latlngs, map);

      moveAirplane() // 开始动画
    },

    // 贝塞尔曲线点生成函数
    getBezierPoints(start, control, end, numPoints) {
      const points = []
      for (let t = 0; t <= 1; t += 1 / numPoints) {
        const x = Math.pow(1 - t, 2) * start[0] + 2 * (1 - t) * t * control[0] + Math.pow(t, 2) * end[0]
        const y = Math.pow(1 - t, 2) * start[1] + 2 * (1 - t) * t * control[1] + Math.pow(t, 2) * end[1]
        points.push([x, y])
      }
      return points
    },
    addArrowEffect(latlngs, map) {
      const arrowIcon = L.divIcon({
        className: 'arrow-icon',
        html: '
',
        iconSize: [10, 10]
      })

      let arrowIndex = 0

      const animateArrows = () => {
        if (arrowIndex < latlngs.length - 1) {
          const arrowMarker = L.marker(latlngs[arrowIndex], { icon: arrowIcon }).addTo(map)
          arrowIndex++
          setTimeout(() => {
            arrowMarker.remove() // 移除箭头
            animateArrows() // 继续动画
          }, 5000) // 设置箭头持续时间
        } else {
          arrowIndex = 0 // 重置箭头索引
          animateArrows() // 循环动画
        }
      }

      animateArrows()
    },

链接: https://pan.baidu.com/s/1HIlpti8U0XK8OVsX0I1C2w?pwd=dfev 提取码: dfev 

这个是瓦片下载器