<!doctype html>
<html>
<head>
<title>bmglNavigation Demo</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href='http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
<script src='http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<link rel="stylesheet" type="text/css" href="/bmgl/js/navigation/bmgl-navigation.css">
<script type="text/javascript" src="/bmgl/js/navigation/bmglNavigation.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
#map{
position: absolute;
height: 100%;
width: 100%;
}
</style>
<body>
<div id="map" ></div>
<script type="text/javascript">
bmgl.Config.HTTP_URL = "http://www.bigemap.com:9000"
var viewer = new bmgl.Viewer('map', {
mapId: 'bigemap.zhongkexingtu',
});
var options = {};
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是bmgl.Cartographic 和 bmgl.Rectangle.
options.defaultResetView = bmgl.Rectangle.fromDegrees(80, 22, 130, 50);
// 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
options.enableCompass = true;
// 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
options.enableZoomControls = true;
// 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
options.enableDistanceLegend = true;
// 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
options.enableCompassOuterRing = true;
bmglNavigation.umd(viewer, options);
</script>
</body>
</html>
源码