leaflet 双屏对比

本章主要讲的是leaflet的双屏对比，本文参考了插件：Leaflet.Sync，我这里对原有的文件进行了重写，去掉了一部分不需要的内容，增加了flyTo和panTo方法，新的方法，如果需要可以自行下载资源。

目录

一、下载引用

二、使用

三、完整代码

---

leaflet 详情总目录：传送

一、下载引用

L.Map.Copy.js该文件可以在资源中下载，保存到本地

import './L.Map.Copy'

二、使用

this.map.copy(this.otherMap)
this.otherMap.copy(this.map)

第一行是把otherMap绑定到map上，以便对map拖拽，移动等时，otherMap会进行同样的操作；

第二行同理，是把map绑定到otherMap上

三、完整代码

<template>
  <div class="container">
    <div class="map" id="map_container1"></div>
    <div class="map" id="map_container2"></div>
    <div
      class="base_layer item1"
      :class="{ active: isShowUavBaseLayer }"
      @click="handleChangeBaseLayer(1)"
    >setView</div>
    <div
      class="base_layer item2"
      :class="{ active: isShowUavBaseLayer }"
      @click="handleChangeBaseLayer(2)"
    >flyTo</div>
    <div
      class="base_layer item3"
      :class="{ active: isShowUavBaseLayer }"
      @click="handleChangeBaseLayer(3)"
    >panTo</div>
  </div>
</template>

<script>
import './L.Map.Copy'
export default {
  data() {
    return {
      map: null,
      otherMap: null
    }
  },
  methods: {
    initMap(id) {
      return new Promise((resolve) => {
        let map = L.map(id, {
          crs: L.CRS.EPSG4326, //坐标系
          center: [29.4785541, 119.55847441], //地图中心
          maxNativeZoom: 16, //地图瓦片放大最大级别
          minNativeZoom: 5, //地图瓦片缩小最小级别
          maxZoom: 21, //地图放大最大级别
          minZoom: 5, //地图缩小最小级别
          zoom: 10, //地图当前级别
        })
        this.addSateLayer(map)
        resolve(map)
      })
    },
//添加底图图层
    addSateLayer(map) {
      let layerType = "vec" 
      let labelType = "cva" 
      L.tileLayer(
        `https://t{s}.tianditu.gov.cn/DataServer?T=${layerType}_c&x={x}&y={y}&l={z}&tk=${天地图key}`, {
          minZoom: 5,
          maxZoom: 21,
          maxNativeZoom: 17,
          minNativeZoom: 5,
          subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
          zoomOffset: 1,
          tileSize: 256,
        }
      ).addTo(map)
      L.tileLayer(
        `https://t{s}.tianditu.gov.cn/DataServer?T=${labelType}_c&x={x}&y={y}&l={z}&tk=${天地图key}`, {
          subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
          transparent: true,
          zIndex: 3,
          zoomOffset: 1,
          minZoom: 5,
          maxZoom: 21,
          tileSize: 256,
        }
      ).addTo(map)
    },
    handleChangeBaseLayer(type) {
      if(type == 1){
        this.map.setView([28.989823278, 118.33232445], 16)
      }else if(type == 2){
        this.map.flyTo([28.589823278, 118.93232445], 16)
      }else if(type == 3){
         this.map.panTo([28.189823278, 118.43232445])
      }
      
    },
  },
  async mounted() {
    await this.$nextTick()
    this.map = await this.initMap('map_container1')
    this.otherMap = await this.initMap('map_container2')
    this.map.copy(this.otherMap)
    this.otherMap.copy(this.map)
  },
}
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 16px);
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  .map {
    height: 100%;
    width: 50%;
    position: relative;
    z-index: 400;
  }
  .base_layer {
    position: absolute;
    right: 20px;
    z-index: 500;
    font-size: 18px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
  }
  .item1{
    top: 20px;
  }
  .item2{
    top: 80px;
  }
  .item3{
    top: 140px;
  }
}
</style>

效果如下：