快速入门

　　欢迎您来到JavaScript API (html5)快速入门， GeoGlobe JavaScript API(html5)包含了构建地图功能的各种接口，能够帮助您在网站中构建功能丰富、交互性强的地图应用。本快速入门将介绍二维视图下地图的创建和图层加载定位功能。

GeoGlobe JavaScript API (html5) 快速入门

1.加载二维地图

加载二维地图源码:

上图为WMTS图层在二维视图下的显示效果。示例代码如下所示：

1.1.准备页面

下面将介绍如何使用 JavaScript API (html5)编写一个可运行显示二维地图的示例。首先在本地D:盘创建一个map文件夹，在map文件夹下创建一个map.html和js文件夹，结构如下图所示：

根据HTML标准，每一份HTML文档都应该声明正确的文档类型，打开map.html，在首行加入文档类型的定义描述语句。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.2.引用API文件

创建地图需要在map.html中引入mapbox-gl.js，GeoGlobeJS.min.js库文件。这些文件可以从开发中心网站的下载中心模块下载，点击下载中心->JavaScript API (html5)->开发包。

打开map.html文件，在head标签中键入如下的代码，添加对API库文件的引用。
<script src="js/mapbox-gl.js" type="text/javascript"></script>
<script src="js/GeoGlobeJS.min.js" type="text/javascript"></script>
如果直接从示例里拷贝代码，请粘贴到map.html文件后修改api库文件、样式表等文件的引用路径。

1.3.创建地图容器

<div id="map" style="width: 500px; height: 300px"></div>;
要让地图在网页上显示，必须为其指定一个容器。通常我们通过创建div元素并在浏览器的文档对象模型 (DOM)中获取此元素的引用执行此操作。例如定义名为"map"的div，并使用CSS样式属性设置其尺寸。

1.4.创建地图对象

var map = new GeoGlobe.Map(style);
GeoGlobe.Map类是表示地图的JavaScript类。此类的对象在页面上定义单个地图。我们使用JavaScript new操作符创建此类的一个新实例。当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是div元素）作为地图的容器。我们通过传入div元素的id值来获得该元素的引用。其中style为地图初始化需要的参数

1.5.创建图层

//创建一个WMTS矢量瓦片图层
var wmtsLayer = new GeoGlobe.Layer.WMTS({
    name : Cfg.mapWMTSLayer_Name,//图层名称
    url : Cfg.mapWMTSLayer_Url,//WMTS服务地址
    matrixSet : Cfg.mapWMTSLayer_MatrixSet,//矩阵集名称
    style : Cfg.mapWMTSLayer_StyleIdentifier,//图层样式
    layer : Cfg.mapWMTSLayer_LayerIdentifier,//图层标识
    resolutions: getRes(),//WMTS图层的比例尺值
    format : Cfg.mapWMTSLayer_Format,//服务返回数据格式
    maxResolution :getRes()[0],//最大分辨率
    minResolution :getRes()[getRes().length - 1],//最小分辨率
    zoomOffset:Cfg.mapWMTSLayer_ZoomOffset,//地图级别偏移量，取WMTS的最小层级
    tileFullExtent:Geo.Bounds.fromString(Cfg.mapWMTSLayer_TileFullExtent)//WMTS图层的范围
});
//创建一个WMTS矢量注记图层
var wmtsLayerAnno = new GeoGlobe.Layer.WMTS({
    name : Cfg.mapWMTSAnno_Name,//设置图层名称
    url : Cfg.mapWMTSAnno_Url,//WMTS服务地址
    matrixSet : Cfg.mapWMTSAnno_MatrixSet,//矩阵集名称
    style : Cfg.mapWMTSAnno_StyleIdentifier,//图层样式
    layer : Cfg.mapWMTSAnno_LayerIdentifier,//图层标识
    resolutions: getResAnno(),//WMTS图层的比例尺值
    format : Cfg.mapWMTSAnno_Format,//服务返回数据格式
    maxResolution :getResAnno()[0],//最大分辨率
    minResolution :getResAnno()[getResAnno().length - 1],//最小分辨率
    zoomOffset:Cfg.mapWMTSAnno_ZoomOffset,//地图级别偏移量，取WMTS的最小层级
    tileFullExtent:Geo.Bounds.fromString(Cfg.mapWMTSAnno_TileFullExtent)//WMTS图层的范围
});

1.6.向地图中添加图层

map.addLayer(wmtsLayer); map.addLayer(wmtsLayerAnno);

1.7.地图定位

map.setCenter(new GeoGlobe.LngLat(Cfg.LngLat.split(",")[0],Cfg.LngLat.split(",")[1]));
调用地图对象的setCenter方法，定位到事先定义好的中心点和缩放级别。