iClient for Leaflet实现多屏地图联动

最新推荐文章于 2024-05-29 09:54:06 发布

supermapsupport

最新推荐文章于 2024-05-29 09:54:06 发布

阅读量1.7k

点赞数 1

分类专栏： WebGIS 文章标签： Leaflet 分屏联动

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/102778455

版权

WebGIS 专栏收录该内容

136 篇文章 29 订阅

订阅专栏

作者：LX

在实际项目中用多个屏幕地图联动来实现地图信息对比查看的应用还是挺多的，下面我就给大家简单介绍一下如何基于iClient for Leaflet来实现多屏地图联动的效果。
先上效果：
在这里插入图片描述

实现思路：

1、分屏：这里的分屏其实是将地图分别加载到不同的地图容器，分多少屏就创建多少个地图容器
2、联动：首先要监听地图的缩放和拖拽事件，事件触发的时候获取当前地图的中心点和缩放级别，然后把获取的中心点和地图缩放级别设置给需要联动的地图，让联动的地图中心点和缩放级别一致从而达到视图范围一致实现分屏联动的效果。

实现代码：

1、引入leaflet的js库

<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>

2、建立map容器，分几屏就建立几个map容器，这里以两个为例

<div id="mapcontainer">
    <p id="map0"></p>
    <p id="map1"></p>
</div>

3、根据map容器的个数创建map对象，每个容器对应一个map对象

 var maps=[];
 var divnum = document.getElementById('mapcontainer').children.length;
 for(var i=0;i<divnum;i++){
     //地图容器id值
    idvalue="map"+i;
    //map对象数组
     maps[i]=L.map(idvalue, {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [-10, 40],
        maxZoom: 18,
        zoom: 3
    });
}

4、图层添加到地图上（图层可以根据实际需求添加）

//添加底图
 L.supermap.tiledMapLayer(url).addTo(maps[0]);//左屏添加地图
 L.supermap.tiledMapLayer(url1).addTo(maps[1]); //右屏添加地图
//添加叠加图层
 addLayers();
 function addLayers() {
     //创建一个热力图在左屏上显示
     heatMapLayer = L.supermap.heatMapLayer(
         "heatMap",
         {
             // "map": maps[0],
             "id": "heatmap",
             "radius": 45,
             "featureWeight": "value",
         }
     ).addTo(maps[0]);
     var num = parseInt(200);
     var radius = parseInt(30);
     var unit = "px";
     heatMapLayer.useGeoUnit = false;
     heatMapLayer.radius = radius;

     //创建一个要素组在右屏上显示
     featureGroup = L.featureGroup().addTo(maps[1]);

     //给图层添加要素
     var features = [];
     for (var i = 0; i < num; i++) {
         var point = [Math.random() * 160 - 80, Math.random() * 340 - 170];
         var marker = L.circleMarker(point, { color: "blue", radius: 5, stroke: false, fillcolor: "blue", fillOpacity: 1 });
         featureGroup.addLayer(marker);
         var geometry = L.point(Math.random() * 340 - 170, Math.random() * 160 - 80);
         var attributions = {
             "value": Math.random() * 9,
         };
         features[i] = L.supermap.heatMapFeature(geometry, attributions);

         heatMapLayer.addFeatures(features);
     }
 }

5、联动实现

 function maplink(e) {
       var _this = this;
       maps.map(function (t) {
       //拖动和缩放地图的时候获取当前地图的中心点和缩放级别并设置给maps数组中的地图实现联动
           t.setView(_this.getCenter(), _this.getZoom())
       })
   }
   //绑定拖动和缩放地图事件
   maps.map(function (t) {
       t.on({ drag: maplink, zoom: maplink })
   })

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_tiledMapLayer4326"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>
<style>
    #map0 {
        height: 500px;
        width: 500px;
        margin: 0px;
    }

    #map1 {
        position: fixed;
        left: 505px;
        top: 0;
        height: 500px;
        width: 500px;
        margin: unset;
    }
</style>
</head>

<body style="background: #fff;width: 100%;height:100%;position: absolute;top: 0;margin: unset;">
    <div id="mapcontainer">
        <p id="map0"></p>
        <p id="map1"></p>
    </div>
    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090",
        url = host + "/iserver/services/map-world/rest/maps/World",
        url1 = host + "/iserver/services/map-world/rest/maps/世界地图_Night";
        var divnum = document.getElementById('mapcontainer').children.length;
        var maps = [];
        for (var i = 0; i < divnum; i++) {
            //地图容器id值
            idvalue = "map" + i;
            //map对象数组
            maps[i] = L.map(idvalue, {
                preferCanvas: true,
                crs: L.CRS.EPSG4326,
                center: [-10, 40],
                maxZoom: 18,
                zoom: 3
            });
        }
        //图层添加到地图上
        //添加底图
        L.supermap.tiledMapLayer(url).addTo(maps[0]);//左屏添加地图
        L.supermap.tiledMapLayer(url1).addTo(maps[1]); //右屏添加地图
        addLayers();
        function addLayers() {
            //创建一个热力图在左屏上显示
            heatMapLayer = L.supermap.heatMapLayer(
                "heatMap",
                {
                    // "map": maps[0],
                    "id": "heatmap",
                    "radius": 45,
                    "featureWeight": "value",
                }
            ).addTo(maps[0]);
            var num = parseInt(200);
            var radius = parseInt(30);
            var unit = "px";
            heatMapLayer.useGeoUnit = false;
            heatMapLayer.radius = radius;

            //创建一个要素组在右屏上显示
            featureGroup = L.featureGroup().addTo(maps[1]);

            //给图层添加要素
            var features = [];
            for (var i = 0; i < num; i++) {
                var point = [Math.random() * 160 - 80, Math.random() * 340 - 170];
                var marker = L.circleMarker(point, { color: "blue", radius: 5, stroke: false, fillcolor: "blue", fillOpacity: 1 });
                featureGroup.addLayer(marker);
                var geometry = L.point(Math.random() * 340 - 170, Math.random() * 160 - 80);
                var attributions = {
                    "value": Math.random() * 9,
                };
                features[i] = L.supermap.heatMapFeature(geometry, attributions);

                heatMapLayer.addFeatures(features);
            }
        }


        //地图联动实现
        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>

ps：将上面的代码直接粘贴到http://iclient.supermap.io站点上任意一个范例中即可看到运行效果。

supermapsupport

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
iClient for Leaflet实现多屏地图联动

作者：LX在实际项目中用多个屏幕地图联动来实现地图信息对比查看的应用还是挺多的，下面我就给大家简单介绍一下如何基于iClient for Leaflet来实现多屏地图联动的效果。先上效果：实现思路：1、分屏：这里的分屏其实是将地图分别加载到不同的地图容器，分多少屏就创建多少个地图容器2、联动：首先要监听地图的缩放和拖拽事件，事件触发的时候获取当前地图的中心点和缩放级别，然后把获取的...
复制链接

扫一扫