n第一条博客，leaflet的双屏对比或者说地图联动。n话不多说直接上代码nnn
n
n
leafletdemo</title&a
</p>
</div><!--/.entry-->
</div><!--/.post-content-->
</div><!--/.post-inner-->
</article><!--/.post-->
<nav class="pagination group">
<ul class="group">
<li class="prev left"></li>
<li class="next right"></li>
</ul>
</nav><!--/.pagination-->
</div><!--/.pad-->
</div><!--/.content-->
<div class="sidebar s1 ">
<a class="sidebar-toggle" title="Expand Sidebar"><i class="fa icon-sidebar-toggle"></i></a>
<div class="sidebar-content">
<div id="categories-12" class="widget widget_categories"><h3 class="group"><span>分类</span></h3><form action="https://www.giserdqy.com" method="get"><label class="screen-reader-text" for="cat">分类</label><select name='cat' id='cat' class='postform'>
<option value='-1'>选择分类</option>
<option class="level-0" value="2921">3.x</option>
<option class="level-0" value="2913">4.x</option>
<option class="level-0" value="18915">AI</option>
<option class="level-0" value="71">ArcEngine</option>
<option class="level-0" value="43">ArcGIS</option>
<option class="level-0" value="70">arcgis api for javascript</option>
<option class="level-0" value="3291">ArcGIS API For JavaScript官方文档</option>
<option class="level-0" value="3262">ArcGISServer</option>
<option class="level-0" value="2676">ArcMap</option>
<option class="level-0" value="3321">ArcPy</option>
<option class="level-0" value="311">bootstrap</option>
<option class="level-0" value="52">C#</option>
<option class="level-0" value="2984">CAD</option>
<option class="level-0" value="3274">centos</option>
<option class="level-0" value="2952">cesium</option>
<option class="level-0" value="2967">cesium中级教程1</option>
<option class="level-0" value="2966">cesium初级入门1</option>
<option class="level-0" value="10464">ChatGPT</option>
<option class="level-0" value="56">CSS</option>
<option class="level-0" value="10350">d3js</option>
<option class="level-0" value="10367">datasource</option>
<option class="level-0" value="10377">deck.gl</option>
<option class="level-0" value="1177">echarts</option>
<option class="level-0" value="110">es6</option>
<option class="level-0" value="5708">GDAL</option>
<option class="level-0" value="10361">geoanalysis</option>
<option class="level-0" value="45">GeoServer</option>
<option class="level-0" value="3735">geospatial</option>
<option class="level-0" value="2968">geotools</option>
<option class="level-0" value="6208">Geotrellis</option>
<option class="level-0" value="67">GIS</option>
<option class="level-0" value="10373">gis-career</option>
<option class="level-0" value="10372">gis-software</option>
<option class="level-0" value="2663">GIS+BIM</option>
<option class="level-0" value="2664">GIS人工智能</option>
<option class="level-0" value="9">GIS前沿</option>
<option class="level-0" value="2665">GIS大数据</option>
<option class="level-0" value="3444">GIS应用</option>
<option class="level-0" value="10075">GIS数据</option>
<option class="level-0" value="316">GIS新闻</option>
<option class="level-0" value="2701">GIS理论</option>
<option class="level-0" value="7005">GIS项目</option>
<option class="level-0" value="3024">git</option>
<option class="level-0" value="10272">homebrew</option>
<option class="level-0" value="55">html5</option>
<option class="level-0" value="51">Java</option>
<option class="level-0" value="50">JavaScript</option>
<option class="level-0" value="1414">leaflet</option>
<option class="level-0" value="18854">Lidar</option>
<option class="level-0" value="10088">linux</option>
<option class="level-0" value="3277">macos</option>
<option class="level-0" value="10095">mapboxgl</option>
<option class="level-0" value="10364">maps-cartography</option>
<option class="level-0" value="3045">MongoDB</option>
<option class="level-0" value="2752">MySQL</option>
<option class="level-0" value="10290">nacos</option>
<option class="level-0" value="2844">nodejs</option>
<option class="level-0" value="249">ogc</option>
<option class="level-0" value="6815">OGR</option>
<option class="level-0" value="2970">openlayers</option>
<option class="level-0" value="3034">Oracle</option>
<option class="level-0" value="6264">oraclespatial</option>
<option class="level-0" value="46">PostGreSQL</option>
<option class="level-0" value="6777">PROJ</option>
<option class="level-0" value="3000">pyspider</option>
<option class="level-0" value="53">Python</option>
<option class="level-0" value="3150">Python教程</option>
<option class="level-0" value="3193">Python数据分析</option>
<option class="level-0" value="10478">reality map</option>
<option class="level-0" value="10098">redis</option>
<option class="level-0" value="3235">Scrapy教程</option>
<option class="level-0" value="10468">smart-transportation</option>
<option class="level-0" value="10091">SQLServer</option>
<option class="level-0" value="10023">svn</option>
<option class="level-0" value="2951">threejs</option>
<option class="level-0" value="2965">threejs初级</option>
<option class="level-0" value="3275">ubuntu</option>
<option class="level-0" value="10470">VR/AR</option>
<option class="level-0" value="10270">vscode</option>
<option class="level-0" value="247">vue</option>
<option class="level-0" value="300">WebGIS 原理、设计、实现</option>
<option class="level-0" value="3276">windows</option>
<option class="level-0" value="10260">wordpress</option>
<option class="level-0" value="3431">ztree</option>
<option class="level-0" value="2950">三维开发</option>
<option class="level-0" value="9828">二次开发</option>
<option class="level-0" value="18868">元宇宙</option>
<option class="level-0" value="1379">入门</option>
<option class="level-0" value="18894">土地利用</option>
<option class="level-0" value="18898">土地土壤属性</option>
<option class="level-0" value="10362">地图和制图</option>
<option class="level-0" value="18860">地质灾害</option>
<option class="level-0" value="1362">安装</option>
<option class="level-0" value="18839">实景三维</option>
<option class="level-0" value="19960">工具</option>
<option class="level-0" value="90">开发工具</option>
<option class="level-0" value="42">开源GIS</option>
<option class="level-0" value="8">技术积累</option>
<option class="level-0" value="10455">数字孪生</option>
<option class="level-0" value="18879">数据中心</option>
<option class="level-0" value="2753">数据库</option>
<option class="level-0" value="10073">数据源</option>
<option class="level-0" value="1412">数据设置</option>
<option class="level-0" value="10121">无人机</option>
<option class="level-0" value="18900">智慧农场</option>
<option class="level-0" value="18847">智慧水利</option>
<option class="level-0" value="2903">栅格数据</option>
<option class="level-0" value="2975">水文分析</option>
<option class="level-0" value="1">测试</option>
<option class="level-0" value="18857">电力</option>
<option class="level-0" value="1413">矢量数据</option>
<option class="level-0" value="18845">矿山</option>
<option class="level-0" value="6428">空间分析</option>
<option class="level-0" value="10282">空间分析</option>
<option class="level-0" value="6654">空间统计</option>
<option class="level-0" value="97">算法</option>
<option class="level-0" value="9593">精选文章</option>
<option class="level-0" value="2649">网站建设</option>
<option class="level-0" value="10359">自动驾驶</option>
<option class="level-0" value="289">资源下载</option>
<option class="level-0" value="18871">车路协同</option>
<option class="level-0" value="10369">遥感</option>
</select>
</form><script type="text/javascript">
/* <![CDATA[ */
(function() {
var dropdown = document.getElementById( "cat" );
function onCatChange() {
if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
dropdown.parentNode.submit();
}
}
dropdown.onchange = onCatChange;
})();
/* ]]> */
</script>
</div><div id="tag_cloud-12" class="widget widget_tag_cloud"><h3 class="group"><span>标签</span></h3><div class="tagcloud"><a href="https://www.giserdqy.com/tag/arcengine/" class="tag-cloud-link tag-link-27 tag-link-position-1" style="font-size: 15.616580310881pt;" aria-label="arcengine (205 项)">arcengine</a>
<a href="https://www.giserdqy.com/tag/arcgis/" class="tag-cloud-link tag-link-817 tag-link-position-2" style="font-size: 8.2901554404145pt;" aria-label="ArcGIS (19 项)">ArcGIS</a>
<a href="https://www.giserdqy.com/tag/arcgis-api-for-javascript/" class="tag-cloud-link tag-link-3629 tag-link-position-3" style="font-size: 8.2901554404145pt;" aria-label="arcgis api for javascript (19 项)">arcgis api for javascript</a>
<a href="https://www.giserdqy.com/tag/arcgis-api-for-javascript%e4%b8%93%e6%a0%8f/" class="tag-cloud-link tag-link-3630 tag-link-position-4" style="font-size: 8.2901554404145pt;" aria-label="arcgis api for javascript专栏 (19 项)">arcgis api for javascript专栏</a>
<a href="https://www.giserdqy.com/tag/arcgis-api-for-js/" class="tag-cloud-link tag-link-22 tag-link-position-5" style="font-size: 9.8134715025907pt;" aria-label="arcgis api for js (31 项)">arcgis api for js</a>
<a href="https://www.giserdqy.com/tag/arcmap/" class="tag-cloud-link tag-link-3018 tag-link-position-6" style="font-size: 16.559585492228pt;" aria-label="arcmap (276 项)">arcmap</a>
<a href="https://www.giserdqy.com/tag/arcpy/" class="tag-cloud-link tag-link-3326 tag-link-position-7" style="font-size: 22pt;" aria-label="ArcPy (1,545 项)">ArcPy</a>
<a href="https://www.giserdqy.com/tag/datasource/" class="tag-cloud-link tag-link-10365 tag-link-position-8" style="font-size: 10.538860103627pt;" aria-label="datasource (40 项)">datasource</a>
<a href="https://www.giserdqy.com/tag/es6/" class="tag-cloud-link tag-link-285 tag-link-position-9" style="font-size: 9.5958549222798pt;" aria-label="es6 (29 项)">es6</a>
<a href="https://www.giserdqy.com/tag/gdal/" class="tag-cloud-link tag-link-347 tag-link-position-10" style="font-size: 15.544041450777pt;" aria-label="GDAL (199 项)">GDAL</a>
<a href="https://www.giserdqy.com/tag/geosanalysis/" class="tag-cloud-link tag-link-6692 tag-link-position-11" style="font-size: 15.253886010363pt;" aria-label="geosanalysis (179 项)">geosanalysis</a>
<a href="https://www.giserdqy.com/tag/geoserver/" class="tag-cloud-link tag-link-16 tag-link-position-12" style="font-size: 21.056994818653pt;" aria-label="geoserver (1,158 项)">geoserver</a>
<a href="https://www.giserdqy.com/tag/geostatistic/" class="tag-cloud-link tag-link-6653 tag-link-position-13" style="font-size: 13.00518134715pt;" aria-label="geostatistic (88 项)">geostatistic</a>
<a href="https://www.giserdqy.com/tag/geotools/" class="tag-cloud-link tag-link-395 tag-link-position-14" style="font-size: 15.544041450777pt;" aria-label="Geotools (197 项)">Geotools</a>
<a href="https://www.giserdqy.com/tag/geotrellis/" class="tag-cloud-link tag-link-6209 tag-link-position-15" style="font-size: 10.683937823834pt;" aria-label="geotrellis (42 项)">geotrellis</a>
<a href="https://www.giserdqy.com/tag/gis/" class="tag-cloud-link tag-link-337 tag-link-position-16" style="font-size: 10.321243523316pt;" aria-label="GIS (37 项)">GIS</a>
<a href="https://www.giserdqy.com/tag/gis-software-2/" class="tag-cloud-link tag-link-10370 tag-link-position-17" style="font-size: 12.787564766839pt;" aria-label="gis-software (82 项)">gis-software</a>
<a href="https://www.giserdqy.com/tag/gis-analysis/" class="tag-cloud-link tag-link-10360 tag-link-position-18" style="font-size: 13.367875647668pt;" aria-label="GIS ANALYSIS (98 项)">GIS ANALYSIS</a>
<a href="https://www.giserdqy.com/tag/gis-career/" class="tag-cloud-link tag-link-3029 tag-link-position-19" style="font-size: 12.569948186528pt;" aria-label="GIS Career (76 项)">GIS Career</a>
<a href="https://www.giserdqy.com/tag/gis%e8%81%8c%e4%b8%9a/" class="tag-cloud-link tag-link-10228 tag-link-position-20" style="font-size: 12.569948186528pt;" aria-label="gis职业 (76 项)">gis职业</a>
<a href="https://www.giserdqy.com/tag/gis%e8%bd%af%e4%bb%b6/" class="tag-cloud-link tag-link-10371 tag-link-position-21" style="font-size: 12.787564766839pt;" aria-label="GIS软件 (82 项)">GIS软件</a>
<a href="https://www.giserdqy.com/tag/git/" class="tag-cloud-link tag-link-25 tag-link-position-22" style="font-size: 12.20725388601pt;" aria-label="git (68 项)">git</a>
<a href="https://www.giserdqy.com/tag/leaflet/" class="tag-cloud-link tag-link-327 tag-link-position-23" style="font-size: 19.461139896373pt;" aria-label="leaflet (698 项)">leaflet</a>
<a href="https://www.giserdqy.com/tag/mongodb/" class="tag-cloud-link tag-link-3047 tag-link-position-24" style="font-size: 11.336787564767pt;" aria-label="mongodb (51 项)">mongodb</a>
<a href="https://www.giserdqy.com/tag/ogr/" class="tag-cloud-link tag-link-6816 tag-link-position-25" style="font-size: 15.326424870466pt;" aria-label="ogr (185 项)">ogr</a>
<a href="https://www.giserdqy.com/tag/openayers%e7%b3%bb%e5%88%97%e6%95%99%e7%a8%8b/" class="tag-cloud-link tag-link-3549 tag-link-position-26" style="font-size: 8.2901554404145pt;" aria-label="openayers系列教程 (19 项)">openayers系列教程</a>
<a href="https://www.giserdqy.com/tag/ol/" class="tag-cloud-link tag-link-7 tag-link-position-27" style="font-size: 21.274611398964pt;" aria-label="openlayers (1,219 项)">openlayers</a>
<a href="https://www.giserdqy.com/tag/opens/" class="tag-cloud-link tag-link-10325 tag-link-position-28" style="font-size: 11.989637305699pt;" aria-label="opens (63 项)">opens</a>
<a href="https://www.giserdqy.com/tag/oracle-spatial/" class="tag-cloud-link tag-link-6265 tag-link-position-29" style="font-size: 15.181347150259pt;" aria-label="oracle spatial (178 项)">oracle spatial</a>
<a href="https://www.giserdqy.com/tag/postgis/" class="tag-cloud-link tag-link-373 tag-link-position-30" style="font-size: 20.113989637306pt;" aria-label="PostGIS (855 项)">PostGIS</a>
<a href="https://www.giserdqy.com/tag/postgresql/" class="tag-cloud-link tag-link-5616 tag-link-position-31" style="font-size: 20.113989637306pt;" aria-label="postgresql (848 项)">postgresql</a>
<a href="https://www.giserdqy.com/tag/proj4/" class="tag-cloud-link tag-link-6778 tag-link-position-32" style="font-size: 10.466321243523pt;" aria-label="proj4 (39 项)">proj4</a>
<a href="https://www.giserdqy.com/tag/python%e6%95%99%e7%a8%8b/" class="tag-cloud-link tag-link-3152 tag-link-position-33" style="font-size: 10.466321243523pt;" aria-label="python教程 (39 项)">python教程</a>
<a href="https://www.giserdqy.com/tag/python%e6%95%b0%e6%8d%ae%e5%88%86%e6%9e%90/" class="tag-cloud-link tag-link-3195 tag-link-position-34" style="font-size: 10.538860103627pt;" aria-label="Python数据分析 (40 项)">Python数据分析</a>
<a href="https://www.giserdqy.com/tag/remote-sensing/" class="tag-cloud-link tag-link-963 tag-link-position-35" style="font-size: 10.974093264249pt;" aria-label="remote sensing (46 项)">remote sensing</a>
<a href="https://www.giserdqy.com/tag/vue/" class="tag-cloud-link tag-link-272 tag-link-position-36" style="font-size: 8pt;" aria-label="vue (17 项)">vue</a>
<a href="https://www.giserdqy.com/tag/vue3/" class="tag-cloud-link tag-link-10327 tag-link-position-37" style="font-size: 11.989637305699pt;" aria-label="vue3 (63 项)">vue3</a>
<a href="https://www.giserdqy.com/tag/webgis/" class="tag-cloud-link tag-link-12 tag-link-position-38" style="font-size: 8.4352331606218pt;" aria-label="webgis (20 项)">webgis</a>
<a href="https://www.giserdqy.com/tag/%e5%9c%b0%e5%9b%be/" class="tag-cloud-link tag-link-320 tag-link-position-39" style="font-size: 10.466321243523pt;" aria-label="地图 (39 项)">地图</a>
<a href="https://www.giserdqy.com/tag/%e5%9c%b0%e5%9b%be%e5%92%8c%e5%88%b6%e5%9b%be/" class="tag-cloud-link tag-link-10363 tag-link-position-40" style="font-size: 11.626943005181pt;" aria-label="地图和制图 (57 项)">地图和制图</a>
<a href="https://www.giserdqy.com/tag/%e5%9c%b0%e7%90%86%e4%bf%a1%e6%81%af/" class="tag-cloud-link tag-link-345 tag-link-position-41" style="font-size: 10.321243523316pt;" aria-label="地理信息 (37 项)">地理信息</a>
<a href="https://www.giserdqy.com/tag/%e6%95%b0%e5%ad%97%e5%ad%aa%e7%94%9f/" class="tag-cloud-link tag-link-10422 tag-link-position-42" style="font-size: 8.8704663212435pt;" aria-label="数字孪生 (23 项)">数字孪生</a>
<a href="https://www.giserdqy.com/tag/%e6%95%b0%e6%8d%ae%e6%ba%90/" class="tag-cloud-link tag-link-10366 tag-link-position-43" style="font-size: 12.932642487047pt;" aria-label="数据源 (86 项)">数据源</a>
<a href="https://www.giserdqy.com/tag/%e7%a9%ba%e9%97%b4%e5%88%86%e6%9e%90/" class="tag-cloud-link tag-link-74 tag-link-position-44" style="font-size: 15.253886010363pt;" aria-label="空间分析 (181 项)">空间分析</a>
<a href="https://www.giserdqy.com/tag/%e7%a9%ba%e9%97%b4%e7%bb%9f%e8%ae%a1/" class="tag-cloud-link tag-link-6608 tag-link-position-45" style="font-size: 13.00518134715pt;" aria-label="空间统计 (88 项)">空间统计</a></div>
</div>
<div id="recent-posts-10" class="widget widget_recent_entries">
<h3 class="group"><span>近期文章</span></h3>
<ul>
<li>
<a href="https://www.giserdqy.com/ai/41861/">地理人工智能（GeoAI）最新进展</a>
</li>
<li>
<a href="https://www.giserdqy.com/gisnews/41859/">埃隆·马斯克和其他伟大思想家心智模型的信仰</a>
</li>
<li>
<a href="https://www.giserdqy.com/gisnews/41828/">50年地理洞察：专访Esri联合创始人Jack Dangermond，探讨Esri的旅程和GIS的未来</a>
</li>
<li>
<a href="https://www.giserdqy.com/gis/gisknowledge/41806/">比例尺、分辨率瓦片级别对应表</a>
</li>
<li>
<a href="https://www.giserdqy.com/gis/opengisnews/41793/">不断发展的位置智能领域：关键趋势和最佳实践</a>
</li>
</ul>
</div>
</div><!--/.sidebar-content-->
</div><!--/.sidebar-->
</div><!--/.main-inner-->
</div><!--/.main-->
</div><!--/.container-inner-->
</div><!--/.container-->
<footer id="footer">
<img id="footer-logo" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2018/09/cropped-giserdqy.png" alt="GIS开发者">
<div class="container dark" id="footer-widgets">
<div class="container-inner">
<div class="pad group">
<div class="footer-widget-1 grid one-full last">
<div id="custom_html-27" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"> <div style="text-align:center;width:100%;height:30px;line-height:30px;"><a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener">京ICP备 18040113号</a></div></div></div> </div>
</div><!--/.pad-->
</div><!--/.container-inner-->
</div><!--/.container-->
<div id="wrap-nav-footer" class="wrap-nav">
<div class="container-inner">
<nav id="nav-footer-nav" class="main-navigation nav-menu">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
<span class="screen-reader-text">Expand Menu</span><div class="menu-toggle-icon"><span></span><span></span><span></span></div> </button>
<div class="menu-%e5%ba%95%e9%83%a8%e9%93%be%e6%8e%a5-container"><ul id="nav-footer" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><span class="menu-item-wrapper"><a href="https://blog.csdn.net/gisdoer">CSDN</a></span></li>
<li id="menu-item-12036" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12036"><span class="menu-item-wrapper"><a href="http://www.pydeveloper.com">GeoAI</a></span></li>
<li id="menu-item-11647" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11647"><span class="menu-item-wrapper"><a href="http://www.yulekong.cn">中国程序员</a></span></li>
<li id="menu-item-985" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-985"><span class="menu-item-wrapper"><a href="http://www.cnblogs.com/dqygiser/">博客园</a></span></li>
<li id="menu-item-3659" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3659"><span class="menu-item-wrapper"><a href="https://www.giserdqy.com/sitemap_index.xml">站点地图</a></span></li>
<li id="menu-item-37139" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37139"><span class="menu-item-wrapper"><a href="http://www.52geo.cn">吾爱地理</a></span></li>
<li id="menu-item-37140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37140"><span class="menu-item-wrapper"><a href="http://www.nav.52geo.cn">地理导航</a></span></li>
</ul></div> </nav>
</div>
</div>
<div class="container" id="footer-bottom">
<div class="container-inner">
<a id="back-to-top" href="#"><i class="fas fa-angle-up"></i></a>
<div class="pad group">
<div class="grid one-half">
<div id="copyright">
<p>GIS开发者 © 2025. All Rights Reserved.</p>
</div><!--/#copyright-->
<div id="credit">
<p>Powered by <a href="http://wordpress.org" rel="nofollow">WordPress</a>. Theme by <a href="http://alx.media" rel="nofollow">Alx</a>.</p>
</div><!--/#credit-->
</div>
<div class="grid one-half last">
</div>
</div><!--/.pad-->
</div><!--/.container-inner-->
</div><!--/.container-->
</footer><!--/#footer-->
</div><!--/#wrapper-->
<script type="text/javascript" src="https://www.giserdqy.com/wp-content/themes/kontrast/js/jquery.fitvids.js?ver=6.5.5" id="kontrast-fitvids-js"></script>
<script type="text/javascript" src="https://www.giserdqy.com/wp-content/themes/kontrast/js/scripts.js?ver=6.5.5" id="kontrast-scripts-js"></script>
<script type="text/javascript" src="https://www.giserdqy.com/wp-content/themes/kontrast/js/nav.js?ver=1673022885" id="kontrast-nav-script-js"></script>
<script>
/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
</script>
</body>
</html>
