Switch Tiles Source
NextBillion.ai Maps允许你在初始化map时，通过参数vectorTilesSourceUrl来使用第三方或你自定义的矢量瓦片。你也可以在初始化map后，设置备用的图源URL。
如果你只需要使用NextBillion.ai Maps的内置瓦片服务，你可以省略vectorTilesSourceUrl选项。
请注意切换瓦片图源会清除已经绘制的Shapes，Markers，Popups，Tooltips不受影响。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>NBMap Basic Example</title>
6 <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12 #map {
13 width: 100vw;
14 height: 100vh;
15 }
16 #toggle-btn {
17 position: absolute;
18 top: 20px;
19 right: 20px;
20 padding: 12px;
21 z-index: 99;
22 }
23 </style>
24 </head>
25 <body>
26 <button id="toggle-btn">Switch Tiles Source</button>
27 <div id="map"></div>
28 <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
29 <script>
30 ;(function () {
31 nextbillion.apiKey = 'your-api-key'
32 var map = new nextbillion.maps.Map(document.getElementById('map'), {
33 zoom: 12,
34 center: { lat: 28.6139, lng: 77.209 },
35 vectorTilesSourceUrl: 'https://example.com/tiles-service.json',
36 })
37
38 // alternatively, you can change the theme on the fly
39 document.getElementById('toggle-btn').onclick = function () {
40 map.setSource('https://example.com/alternative-tiles-service.json')
41 }
42 })()
43 </script>
44 </body>
45</html>Make a Map
