leaflet入门教程(二):地图控件与地图事件

已被阅读 2159 次 | 文章分类:leafLet | 2018-07-30 23:22

该教程主要介绍leaflet如何在地图上添加一些基本的操作控件，以及如何使用地图事件

一:地图控件

1.可以直接通过Controls类给地图添加四个基本控件:比例尺，缩放控件，右下角属性标签，图层控制控件;

                                        
//添加缩放控件
    L.control.zoom().addTo(map);
    //添加比例尺
    L.control.scale({
        metric:true,   // /km
        imperial:true  // foot
    }).addTo(map);
    //添加描述标签
    L.control.attribution({
        prefix:'小白GIS'
    }).addTo(map);
// 图层控制控件
  var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {minZoom: 0, maxZoom: 18,attribution:'OSM' ,});
  var tdt = new L.TileLayer('http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles', {maxZoom: 18,minZoom:0,attribution:'天地图' , subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] });
  var baseLayers = {
   "osm": osm,
   "tdt": tdt
  };
  var map = L.map('map_MapBox', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [osm, tdt]
 });
 L.control.layers(baseLayers).addTo(map);

图层控制控件需要强调一下,如果引入的css文件是在线文件，则图层控制图标是官方默认的;当然如果是本地样式文件，需要在leaflet.css的同级目录中新建一个images/layers.png文件，替换为任意的图标文件

小白GIS

如果要动态添加缩放控件，需设置 zoomControl:false,防止出现两个的情况

                                        
 var map = new L.Map('map_MapBox',{
        zoomControl:false,    //默认隐藏缩放控件
        attributionControl:false  //隐藏默认的属性前缀:leaflet
    });

二:地图事件

1.使用如下方式添加map事件

                                        
map.on('事件类型',function(e){})   //具体的事件类型可参考API文档

2.在这里添加如下几个类型介绍一下如何使用map的各种事件

                                        
map.on('click', onMapClick):地图点击事件
map.on('zoom',onMapZoom):地图缩放事件
map.on('move',onMapmove):地图移动事件
map.on('moveend',onMapmoveend):地图移动结束事件
map.on('mousemove',onmouseMove):鼠标移动事件

3.完整代码

                                        
<!DOCTYPE HTML>
<html>
    <head>
        <title>地图事件</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="../leaflet/leaflet.css">
        <script src="../leaflet/leaflet.js"></script> 
        <style type="text/css">
        html,body{
            height: 100%;
            width: 100%;
        }
        #map_MapBox{
            height:500px;
            width:100%;
            position:relative;
        }
    </style>
    </head>
    <body>
        <div id='map_MapBox'>
            <div id="stateDiv" style='position:absolute;top:0;right:10px;height:70px;width:200px;background-color:#0a0a0a;z-index:401;'>
                <p id='mouseCoor' style='color:white;margin:0 10px;'></p>
                <p id='mapLevel' style='color:white;margin:0 10px;'></p> 
                <p id='mapstate' style='color:green;margin:10px 10px;'></p> 
            </div>
        </div>
        <script>
            //加载MapBox
            var map = new L.Map('map_MapBox');
            var map_MapBoxUrl='https://api.mapbox.com/styles/v1/popstar/cjklf93zr6alb2qruedu6ioq4/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicG9wc3RhciIsImEiOiJjamcwdDhtNnQxZDk4MndwYzR0bmJyeWx2In0.3RFc0AGJgsh-eI5Gsqf7kQ';
            var MapBox = new L.TileLayer(map_MapBoxUrl, {id:'MapBox.streets', maxZoom: 18,minZoom:0,attribution:'http://xiaobaigis.com' });
            map.setView(new L.LatLng(31.864942016,117.2882028929),0);
            map.addLayer(MapBox);
            document.getElementById('mapLevel').innerText='当前级别:'+map._zoom;
            function onMapClick(e) {
                var popup = L.popup();
                popup.setLatLng(e.latlng)
                    .setContent("You clicked the map at " + e.latlng.toString())
                    .openOn(map);
            }
            function onMapZoom(){
                document.getElementById('mapLevel').innerText='当前级别:'+map._zoom;
               
            }
            function onmouseMove(e){
                console.log('e');
                document.getElementById('mouseCoor').innerText='坐标:('+e.latlng.lat.toString().substring(0,6)+','+e.latlng.lng.toString().substring(0,6)+')';
            }
            function onMapmove(e){
                document.getElementById('mapstate').innerText='地图移动中';
            }
            function onMapmoveend(){
                document.getElementById('mapstate').innerText=' ';
            }
                map.on('click', onMapClick);
                map.on('zoom',onMapZoom);
                map.on('move',onMapmove);
                map.on('moveend',onMapmoveend);
                map.on('mousemove',onmouseMove);
        </script>   
    </body>
</html>

小白GIS

上一篇:leaflet入门教程(三):添加几何图形到地图

下一篇:leaflet入门教程(一):加载在线地图

浏览热榜: