<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>测试百度自定义图层</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='../js/mapbox-gl.js'></script>
<link href='../css/mapbox-gl.css' rel='stylesheet' />
<script src="../js/jquery-2.2.3.min.js"></script>
<script src='../js/coordtransform.js'></script>
<script src='../js/mapbox_baidu_layer_new.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
function IniMapBox() {
var baiduStyle = {
"name": "mapbox_baidu",
'version': 8,
'sources': {},
'layers': []
};
mapboxgl.accessToken = 'token';
map = new mapboxgl.Map({
container: 'map',
style: baiduStyle,
center: [107.51335144042969, 26.27496910095215],
zoom: 12
});
map.on('load', function () {
map.addLayer(new MapboxBaiduLayer_new());
});
}
IniMapBox();
</script>
</body>
</html>