html 快速入门,快速入门

欢迎您来到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，在首行加入文档类型的定义描述语句。

-//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库文件的引用。

如果直接从示例里拷贝代码，请粘贴到map.html文件后修改api库文件、样式表等文件的引用路径。

1.3.创建地图容器

要让地图在网页上显示，必须为其指定一个容器。通常我们通过创建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方法，定位到事先定义好的中心点和缩放级别。