<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet'/>
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.select{
background-color: #f1f1f1;
position: absolute;
z-index: 99;
top:20px;
right: 20px;
}
.bmgl-widget-credits{display:none}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div class="select">
<label>
<input type="radio" checked name="layer" value="satellite">
衛星
</label>
<label>
<input type="radio" name="layer" value="streets">
電子地圖
</label>
</div>
<script>
var satellite,streets;
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
mapId:'bigemap.zhongkexingtu',
});
satellite=viewer.imageryLayers.get(0);
streets=new bmgl.ImageryLayer(new bmgl.BMImageryProvider({
mapId: 'bigemap.arcgis-map',
}));
$('.select').on('click','input[type=radio]',function(){
var value=$(this).val();
switch (value) {
case 'satellite':
viewer.imageryLayers.remove(streets,false);
viewer.imageryLayers.add(satellite);
break;
case 'streets':
// if(!streets){
// streets= viewer.imageryLayers.addImageryProvider();
// }
viewer.imageryLayers.remove(satellite,false);
viewer.imageryLayers.add(streets);
break;
}
});
</script>
</body>
</html>