Leaflet and cesium load Baidu map, and load custom style Baidu map

1 leaflet、cesium Load baidu map （ Official preset style ）

reserve , To be added

2 leaflet、cesium Load Baidu custom style map

Style editor New address ：http://lbsyun.baidu.com/customv2/index.html

The new version of custom styles cannot be used in leaflet、cesium Use in , Only in Baidu map JavaScript API Environmental use , The official tutorial http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom

Style editor Old version address ：https://developer.baidu.com/map/custom/

Old style editor , It's not as convenient to use as the new version . But we can leaflet、cesium Use in , What more bicycles? ！ Use as follows ：

1. At the bottom of the page is the layer style editing area , You can readjust the styles of various layers ;

2. After style adjustment ,F12 Open browser developer tools （ Pictured ）, Request link to view map tiles ;

3. Copy tile request connection styles The corresponding parameter value （ The blue part ）;

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 Loading method in （ The map frame needs to be specified as Baidu coordinate system when initializing ）;

let styles = " The long string copied in the previous step ";
let currentLayer = L.tileLayer.baidu({
    layer: 'custom',
    styles: styles
});
currentLayer.addTo(leafletMap);

5. cesium Loading method in （ initialization BaiduImageryProvider after ）;

let styles = " The long string copied in the previous step ";
let option = {
    "layer": "custom",
    "styles": styles 
}
viewer.scene.imageryLayers.addImageryProvider(
    new BaiduImageryProvider(option)
)