leaflet 集成百度地图小例子二

匿名 (未验证) 提交于 2019-12-03 00:18:01
上节实现了leaflet的小例子,节集成百度地图  1.由于所有地图的经纬度计算的规则不统一,所以需要引如两个js实现坐标转换      <script src="proj4-compressed.js"></script>     <script src="proj4leaflet.js"></script>       <script src="proj4.js"></script>  2.初始化地图    //初始化地图         $(document).ready(function () {             var map = L.map('map', {                 crs: L.CRS.Baidu,                 minZoom: 3,                 maxZoom: 18,                 attributionControl: false,                 center: [31.834912, 117.220102],                 zoom: 12             });  3.引入proj后对百度地图经纬度进行调整  L.CRS.Baidu = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {     resolutions: function () {         level = 19         var res = [];         res[0] = Math.pow(2, 18);         for (var i = 1; i < level; i++) {             res[i] = Math.pow(2, (18 - i))         }         return res;     }(),     origin: [0, 0],     bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]) });  4.你可以按照自己的意愿进行分层  实际上是通过tab页进行数据的隐藏和显示  var groups = {     cities: new L.LayerGroup(),     restaurants: new L.LayerGroup(),     dogs: new L.LayerGroup(),     cats: new L.LayerGroup()   };  新建数组,里面分别是希望分层的数据.  例    L.marker([44.75185, 123.47533]).bindPopup('Golden, CO.').addTo(groups.cities);   var polygon = L.polygon([        [42.43967, 123.81592],        [43.86622, 126.60645],           [42.04929, 124.93652]       ]).addTo(groups.restaurants);  将点和多边形放进两个分别不同的区域里  5.页面初始化实体   window.ExampleData = {     LayerGroups: groups   };  6.如果单层地图跳过这部,多层地图进行如下操作进行地图合并以及切换.  L.tileLayer.baidu = function (option) {     option = option || {};       var layer;     var subdomains = '0123456789';     switch (option.layer) {         //单图层         case "vec":         default:             //'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&b=0&limit=60&scaler=1&udt=20170525'             layer = L.tileLayer('http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'ph' : 'pl') + '&scaler=1&p=1', {                 name:option.name,subdomains: subdomains, tms: true             });             break;         case "img_d":             layer = L.tileLayer('http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', {                 name: option.name, subdomains: subdomains, tms: true             });             break;         case "img_z":             layer = L.tileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'sh' : 'sl') + '&v=020', {                 name: option.name, subdomains: subdomains, tms: true             });             break;           case "custom"://Custom 各种自定义样式             //可选值:dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish             option.customid = option.customid || 'midnight';             layer = L.tileLayer('http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=' + option.customid, {                 name: option.name, subdomains: "012", tms: true             });             break;           case "time"://实时路况             var time = new Date().getTime();             layer = L.tileLayer('http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' + time + '&label=web2D&v=017', {                 name: option.name, subdomains: subdomains, tms: true             });             break;               //合并         case "img":             layer = L.layerGroup([ L.tileLayer.baidu({ name: "底图", layer: 'img_d', bigfont: option.bigfont }), L.tileLayer.baidu({ name: "注记", layer: 'img_z', bigfont: option.bigfont })             ]);             break;     }     return layer; };  7.控制底层地图以及对切换的控制,(最多显示3行)    L.control.layers(                 {                     "百度地图": L.tileLayer.baidu({ layer: 'vec' }).addTo(map),                     "百度卫星": L.tileLayer.baidu({ layer: 'img' })      //                "百度地图-大字体": L.tileLayer.baidu({ layer: 'vec',bigfont:true }),      //                "百度卫星-大字体": L.tileLayer.baidu({ layer: 'img', bigfont: true }), // "自定义样式-黑色地图": L.tileLayer.baidu({ layer: 'custom', customid:'dark' }), // "自定义样式-蓝色地图": L.tileLayer.baidu({ layer: 'custom', customid:'midnight' })                 },                 {                     "实时交通信息": L.tileLayer.baidu({ layer: 'time' }),                     "ct": ExampleData.LayerGroups.dogs,                     "restaurants" : ExampleData.LayerGroups.restaurants,                     "cities" : ExampleData.LayerGroups.cities,                       "dogs" : ExampleData.LayerGroups.dogs,                 },               {                    "cities" : ExampleData.LayerGroups.cities               },                 { position: "topright" }).addTo(map);

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!