A96525b2edad20d3fd8d437d8c3b9613
leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

前言

leaflet-webpack 入门开发系列环境知识点了解:

内容概览

leaflet 地图分屏对比
源代码 demo 下载

效果图如下:


实现思路:创建左右并排的两个 div,各种渲染左右两个不同地图对象,然后同时监听左右两个地图的 drag 以及 mousemove 事件,在事件里面设置两个地图的当前范围一致 map. setView(_this.getCenter(),_this.getZoom());

  • html 地图界面
<html>
  <head>
    <title>Leaflet入门开发系列地图分屏</title>
    <style>
      html, body{
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .left{
          width: 50%;
          height: 100%;
          float: left;
          /* border: 1px solid #f40; */
      }
      .right {
          width: 50%;
          height: 100%;
          float: left;
          /* border: 1px solid #f40; */
      }
  </style>
  </head>
  <body>
    <div class="left" id="LMap"></div>
    <div class="right" id="RMap"></div>
  <script src="splitScreen.js"></script>
  </body>
</html>
  • 创建左右地图初始化
    ```
top Created with Sketch.