leaflet 集成百度地图小例子(2)
来源:互联网 发布:数据库雷景生清华答案 编辑:程序博客网 时间:2024/06/07 03:51
上节实现了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);
- leaflet 集成百度地图小例子(2)
- leaflet 集成百度地图小例子(1)
- leaflet加载百度地图
- leaflet加载百度地图
- 集成百度地图sdk小白操作
- leaflet加载百度地图(矫正篇)
- leaflet加载百度地图(矫正篇
- 百度地图集成
- 集成百度地图
- iOS- 集成百度地图
- 百度地图集成
- 百度地图集成
- 集成百度地图sdk
- 百度地图集成步骤
- 简单百度地图集成
- 百度地图集成(一)
- AndroidStudio集成百度地图
- 初步集成百度地图
- 使用Chrome DevTools的Timeline分析页面性能
- C#
- org.hibernate.StaleObjectStateException: Row was updated or deleted by another transaction (or unsav
- mybatis中的#和$的区别
- Angular4 第五章 响应式编程
- leaflet 集成百度地图小例子(2)
- java标识符
- 阿里云服务器上安装redis
- linux 防火墙相关信息
- Jsp详解
- 烦人又顽固的提示expected initializer before 'xxxxx'解决方案之一
- 安装xdebug
- 三星高端体验馆落地石家庄,以生活之名诠释科技创新
- React-Native基础环境搭建