leaflet、cesium加载百度地图,加载自定义样式百度地图

1 leaflet、cesium加载百度地图(官方预设样式)

预留,待补充

2 leaflet、cesium加载百度自定义样式地图

样式编辑器新版地址:http://lbsyun.baidu.com/customv2/index.html

新版的自定义样式无法在leaflet、cesium中使用,只能在百度地图JavaScript API环境下使用,官方教程http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom

leaflet、cesium加载百度地图,加载自定义样式百度地图_第1张图片

样式编辑器旧版地址:https://developer.baidu.com/map/custom/

旧版的样式编辑器,使用起来没有新版方便。但是我们可以在leaflet、cesium中使用,还要啥自行车!使用方式如下:

1. 页面下方是图层样式编辑区,可以对各类图层进行样式的重新调整;

2. 样式调整完毕后,F12打开浏览器开发者工具(如图),查看地图瓦片的请求链接;

leaflet、cesium加载百度地图,加载自定义样式百度地图_第2张图片

leaflet、cesium加载百度地图,加载自定义样式百度地图_第3张图片

3. 复制瓦片请求连接中的styles对应的参数值(即蓝色部分);

Request URL:https://api.map.baidu.com/customimage/tile?&x=6170&y=2008&z=15&udt=20181205&scale=1&ak=8d6c8b8f3749aed6b1aff3aad6f40e37&styles=t%3Aland%7Ce%3Ag%7Cc%3A%23212121%2Ct%3Abuilding%7Ce%3Ag%7Cc%3A%232b2b2b%2Ct%3Ahighway%7Ce%3Aall%7Cl%3A-42%7Cs%3A-91%2Ct%3Aarterial%7Ce%3Ag%7Cl%3A-77%7Cs%3A-94%2Ct%3Agreen%7Ce%3Ag%7Cc%3A%231b1b1b%2Ct%3Awater%7Ce%3Ag%7Cc%3A%23181818%2Ct%3Asubway%7Ce%3Ag.s%7Cc%3A%23181818%2Ct%3Arailway%7Ce%3Ag%7Cl%3A-52%2Ct%3Aall%7Ce%3Al.t.s%7Cc%3A%23313131%2Ct%3Aall%7Ce%3Al.t.f%7Cc%3A%238b8787%2Ct%3Amanmade%7Ce%3Ag%7Cc%3A%231b1b1b%2Ct%3Alocal%7Ce%3Ag%7Cl%3A-75%7Cs%3A-91%2Ct%3Asubway%7Ce%3Ag%7Cl%3A-65%2Ct%3Arailway%7Ce%3Aall%7Cl%3A-40%2Ct%3Aboundary%7Ce%3Ag%7Cc%3A%238b8787%7Cl%3A-29%7Cw%3A1

4. leaflet中加载方式(地图框架初始化时需要指定为百度坐标系);

let styles = "上一步复制的长字符串";
let currentLayer = L.tileLayer.baidu({
    layer: 'custom',
    styles: styles
});
currentLayer.addTo(leafletMap);

5. cesium中加载方式(初始化BaiduImageryProvider之后);

let styles = "上一步复制的长字符串";
let option = {
    "layer": "custom",
    "styles": styles 
}
viewer.scene.imageryLayers.addImageryProvider(
    new BaiduImageryProvider(option)
)

你可能感兴趣的:(Leaflet,Cesium,百度)