openlayers加载百度地图一——定制百度地图_openlayers vue实现百度地图

在开发中，我们常常会用到一些炫酷的地图，尤其是一些大屏项目，其实就是自定义地图。
国内的自定义地图服务有
①高德自定义地图，
②百度自定义地图，
③百度地图个性在线编辑器。
国外的有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"
	                    }
	          }
	]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

也可以直接复制json生成个性化地图

3、调用地图。
用百度api调用非常简单，

	map.setMapStyle({
	  styleJson:[[上面的json对象]]
	});
1
2
3

但是怎么用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调用呢？我们下节再来分析…