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;
//        }
//    });


有很多功能和百度地圖類似,可以參考下。。。小弟只是簡單說了一下入門,後續還有很多功能給大家說(大神勿噴)



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章