leaflet.js 开发地图

最近项目需要，接触了一下osm的地图实现。并使用leafletjs实现了一些功能，此地图与百度地图的一些POI信息点有所不同，百度地图的POI点是通过计算放到每张瓦片上去的，而osm的数据全都在地图上了。当然这个也可以改变，换成我们自己的POI信息点加上去，我觉得使用离线地图的话可以考虑下这个osm，当然前提是功能不是很复杂或者要求特别高的。（当然主要看老板，哈哈。。。）废话不多说了  。。

主要是利用leaflet.js实现功能，当然根据需求要使用到对应的js文件。

初始我需要引入leaflet的css  js 文件

<link rel=”stylesheet” type=”text/css” href=”leaflet.css” />
<link rel=”stylesheet” href=”leaflet/Leaflet.label-master/dist/leaflet.label.css” />

<script src=”http://www.jq22.com/jquery/jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”leaflet-src.js”></script>

其实最主要的就是要把osm的数据导入到服务器，然后我们去请求返回瓦片，渲染到页面

var osmUrl=’请求地址+/osm_tiles/{z}/{x}/{y}.png’;
        var osmAttrib=’map’;
        var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 18, attribution: osmAttrib});
        map = new L.Map(‘mapdiv’, {
            layers: [osm],
            center: new L.LatLng(纬度, 经度),
            zoom: 12,
            doubleClickZoom :false//不可以通过双击放大，因为双击的作用是添加矩形
        });
        //map.addControl(new customControl());//添加lengend按钮
        map.setView(new L.LatLng( 纬度，经度 ),10);//14
        map.addLayer(osm);//添加图层

以上代码这样就是在页面中添加上地图——–

//在地图上添加标记
        var plot = [
            {
                “name”:”I am Tom”,
                “lng”:”115.58000″,
                “lat”:”25.12000″,
                “details”:”this is a cat”
            },
            {
                “name”:”I am Jerry”,
                “lng”:”115.68000″,
                “lat”:”25.22000″,
                “details”:”this is a mouse”
            },
        ];
        for (let d =0;d<plot.length;d++){
            var plotll = new L.LatLng( plot[d].lat, plot[d].lng, true );//标记的坐标
            var mark = new L.Marker(plotll);
            mark.data = plot[d];
            map.addLayer(mark);//添加标记到地图
            mark.bindPopup(“<h4>” + plot[d].name + “</h4>” + plot[d].details);//绑定提示框
        }

以上代码这样就是在页面中添加上点Marker——–

//添加自定义工具
//    var customControl =  L.Control.extend({
//        options: {
//            position: ‘topleft’
//        },
//        onAdd: function (map) {
//            var container = L.DomUtil.create(‘div’, ‘leaflet-control-zoom leaflet-bar leaflet-control control-bot’);
//
//            container.style.backgroundColor = ‘white’;
//            container.style.backgroundSize = “30px 60px”;
//            container.style.width = ’30px’;
//            container.style.height = ’30px’;
//            container.style.marginTop = ‘0’;
//            container.onclick=function () {
//                console.log(‘命中！！！’);
//            };
//            return container;
//        }
//    });

有很多功能和百度地图类似，可以参考下。。。小弟只是简单说了一下入门，后续还有很多功能给大家说（大神勿喷）

转载自：https://blog.csdn.net/Ymm_0008/article/details/75667533