在开发中，我们常常会用到一些炫酷的地图，尤其是一些大屏项目，其实就是自定义地图。
国内的自定义地图服务有
①高德自定义地图，
②百度自定义地图，
③百度地图个性在线编辑器。
国外的有mapbox的④mapbox-studio，
其中①和②都只能用在自己的平台，④是国外的，地图上会有英文的地名，这里我们重点说下③。
一、编辑百度自定义地图
1、打开百度地图个性在线编辑器 /map/custom/
2、根据业务定制你需要的地图（下图是我定制的蓝色风格地图）
对应的style的json
[{"featureType": "land","elementType": "all","stylers": {"color": "#00121cff"}},{"featureType": "water","elementType": "all","stylers": {"color": "#00445dff"}},{"featureType": "highway","elementType": "all","stylers": {"color": "#07313fff"}},{"featureType": "subway","elementType": "all","stylers": {"visibility": "off"}},{"featureType": "arterial","elementType": "all","stylers": {"color": "#003242ff","visibility": "on"}},{"featureType": "green","elementType": "all","stylers": {"visibility": "off"}},{"featureType": "districtlabel","elementType": "labels.text.stroke","stylers": {"color": "#35bd8500","visibility": "on"}},{"featureType": "railway","elementType": "all","stylers": {"visibility": "off"}},{"featureType": "districtlabel","elementType": "labels.text.fill","stylers": {"color": "#35bd85ff","weight": "1","visibility": "on"}},{"featureType": "building","elementType": "all","stylers": {"color": "#1692beff","visibility": "on"}},{"featureType": "manmade","elementType": "all","stylers": {"visibility": "off"}},{"featureType": "green","elementType": "all","stylers": {"visibility": "off"}},{"featureType": "poilabel","elementType": "labels.text.fill","stylers": {"color": "#35bd85ff","visibility": "on"}},{"featureType": "poilabel","elementType": "labels.text.stroke","stylers": {"color": "#35bd8500","visibility": "on"}},{"featureType": "poilabel","elementType": "labels.icon","stylers": {"visibility": "off"}},{"featureType": "local","elementType": "all","stylers": {"visibility": "off"}},{"featureType": "road","elementType": "labels.icon","stylers": {"visibility": "off"}}]
也可以直接复制json生成个性化地图
3、调用地图。
用百度api调用非常简单，
map.setMapStyle({styleJson:[[上面的json对象]]});
但是怎么用openlayer调用呢？
首先需要得到地图的url。F12到控制台的network，找到任意一个tile接口
复制request url，并把x、y、z改造成变量，得到如下url
“https://api./customimage/tile?&x=”+x+"&y="+y+"&z="+z+"&udt=&scale=1&styles=t%3Aland%7Ce%3Aall%7Cc%3A%2300121cff%2Ct%3Awater%7Ce%3Aall%7Cc%3A%2300445dff%2Ct%3Ahighway%7Ce%3Aall%7Cc%3A%2307313fff%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23003242ff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%7Cw%3A1%2Ct%3Abuilding%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231692beff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Apoi%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%2Ct%3Apoi%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Apoi%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aroad%7Ce%3Al.i%7Cv%3Aoff"
怎么用openlayers调用呢？我们下节再来分析…
