Leaflet双屏对比,地图联动

n第一条博客,leaflet的双屏对比或者说地图联动。n话不多说直接上代码nnnn 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/gisbim/41736/">从CAD到BIM:建筑技术的演进</a> </li> <li> <a href="https://www.giserdqy.com/gisnews/41730/">领先GeoAI技术潮流:走在GIS新时代前沿</a> </li> <li> <a href="https://www.giserdqy.com/gis/opengisnews/41727/">Ordnance Survey推出重要建筑和交通改进</a> </li> <li> <a href="https://www.giserdqy.com/gis/opengisnews/41723/">GMV引领AVIS项目,优化自主船舶导航</a> </li> <li> <a href="https://www.giserdqy.com/remote-sensing/41715/">AI揭秘:卫星图像显示人类海洋活动影响日益扩大</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开发者 © 2024. 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=5.7.11' id='kontrast-fitvids-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/themes/kontrast/js/scripts.js?ver=5.7.11' 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 type='text/javascript' src='https://www.giserdqy.com/wp-includes/js/wp-embed.min.js?ver=5.7.11' id='wp-embed-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>