leaflet

leaflet地图联动的简单实现

by giser · 2019-04-02

拖拽或放大一个地图的时候，其他地图进行相同操作。

  //将要联动的地图加入数组
  var maps = [mymap,mymap2,mymap3];
  //地图联动实现
  function maplink(e){
    var _this = this;
    maps.map(function (t) {
      t.setView(_this.getCenter(),_this.getZoom())
    })
  }
  //绑定
  maps.map(function (t) {
    t.on({drag:maplink,zoom:maplink})
  })

查看效果的话完整如下
地图随便摆的不要介意

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
          integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
            integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
            crossorigin=""></script>
    <style>

        #mapid { height: 500px;width:400px;}
        #mapid2 {position:fixed; left:500px;top:0;height: 500px;width:400px;}
        #mapid3 { height: 500px;width:400px;}
    </style>
</head>
<body>
<div id="mapid"></div>
<div id="mapid2"></div>
<div id="mapid3"></div>
<script>


  var mymap = L.map('mapid').setView([51.505, -0.09], 13);
  var mymap2=L.map('mapid2').setView([51.505, -0.09], 13);
  var mymap3=L.map('mapid3').setView([51.505, -0.09], 13);
  var lay = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox.streets'
  })
  var lay2 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox.streets'
  });
  var lay3 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox.streets'
  });
  lay.addTo(mymap);
  lay2.addTo(mymap2);
  lay3.addTo(mymap3);

  //将要联动的地图加入数组
  var maps = [mymap,mymap2,mymap3];
  //地图联动实现
  function maplink(e){
    var _this = this;
    maps.map(function (t) {
      t.setView(_this.getCenter(),_this.getZoom())
    })
  }
  //绑定
  maps.map(function (t) {
    t.on({drag:maplink,zoom:maplink})
  })
</script>
</body>
</html>

转载自：https://blog.csdn.net/zhishi_tudouni/article/details/77854088

相关推荐

Tags: leaflet leaflet地图联动的简单实现

You may also like...