zoukankan      html  css  js  c++  java
  • 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{
     50%;
    height: 100%;
    float: left;
    /* border: 1px solid #f40; */
    }
    .right {
     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>
    • 创建左右地图初始化
    //左侧地图
    const LMap = L.map("LMap", {
    attributionControl: false
    }).setView(config.mapInitParams.center, config.mapInitParams.zoom);
    //右侧地图
    const RMap = L.map("RMap", {
    attributionControl: false
    }).setView(config.mapInitParams.center, config.mapInitParams.zoom);

    完整demo源码见小专栏文章尾部GIS之家leaflet小专栏

    文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

  • 相关阅读:
    [转载]C#.NET中Dns类的常用方法及说明
    [转载]如何辨别真假百度蜘蛛
    Lottie的json动画
    iOT
    iOS字体大小
    针对Xcode 9 + iOS11 的修改,及iPhone X的适配
    shell脚本之 给PNG图片添加后缀@3x
    正则表达式
    CSS
    XcodeProj,使用Ruby更改工程文件
  • 原文地址:https://www.cnblogs.com/giserhome/p/11075439.html
Copyright © 2011-2022 走看看