GeoGlobe JavaScript API (html5) 快速入门
1.加载二维地图
欢迎您来到JavaScript API (html5)快速入门, GeoGlobe JavaScript API(html5)包含了构建地图功能的各种接口,能够帮助您在网站中构建功能丰富、交互性强的地图应用。本快速入门将介绍二维视图下地图的创建和图层加载定位功能。
1.加载二维地图
上图为WMTS图层在二维视图下的显示效果。示例代码如下所示:
下面将介绍如何使用 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">
创建地图需要在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库文件、样式表等文件的引用路径。
<div id="map" style="width: 500px; height: 300px"></div>; 要让地图在网页上显示,必须为其指定一个容器。通常我们通过创建div元素并在浏览器的文档对象模型 (DOM)中获取此元素的引用执行此操作。例如定义名为"map"的div,并使用CSS样式属性设置其尺寸。
var map = new GeoGlobe.Map(style); GeoGlobe.Map类是表示地图的JavaScript类。此类的对象在页面上定义单个地图。我们使用JavaScript new操作符创建此类的一个新实例。当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是div元素)作为地图的容器。我们通过传入div元素的id值来获得该元素的引用。其中style为地图初始化需要的参数
//创建一个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图层的范围
});
map.addLayer(wmtsLayer); map.addLayer(wmtsLayerAnno);
map.setCenter(new GeoGlobe.LngLat(Cfg.LngLat.split(",")[0],Cfg.LngLat.split(",")[1])); 调用地图对象的setCenter方法,定位到事先定义好的中心点和缩放级别。