openlayers加载百度地图一——定制百度地图

在开发中，我们常常会用到一些炫酷的地图，尤其是一些大屏项目，其实就是自定义地图。
国内的自定义地图服务有
①高德自定义地图，
②百度自定义地图，
③百度地图个性在线编辑器。
国外的有mapbox的④mapbox-studio，
其中①和②都只能用在自己的平台，④是国外的，地图上会有英文的地名，这里我们重点说下③。

一、编辑百度自定义地图

1、打开百度地图个性在线编辑器 https://developer.baidu.com/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.map.baidu.com/customimage/tile?&x=”+x+"&y="+y+"&z="+z+"&udt=20201022&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调用呢？我们下节再来分析…