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

GeoGlobe JavaScript API 快速入门

1.加载二维地图

2.加载三维地图

1.加载二维地图:

加载二维地图源码:

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

1.1.准备页面

下面将介绍如何使用JavaScript API编写一个可运行显示二维地图的示例。首先在本地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中引入OpenLayers-min.js,GeoGlobeJS.min.js库文件。这些文件可以从开发中心网站的下载中心模块下载,点击下载中心->JavaScript API->开发包

下载开发包文件,将OpenLayers文件夹和GeoGlobeJS.min.js文件拷贝到js文件夹下,结构如下图所示:

在OpenLayers文件夹下存放图片img文件夹、样式theme文件夹和OpenLayers-min.js文件,结构如下图所示:

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

1.3.创建地图容器

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

1.4.创建地图对象

var map = new Geo.View2D.Map("simpleMap");
Geo.View2D.Map类是表示地图的JavaScript类。此类的对象在页面上定义单个地图。我们使用JavaScript new操作符创建此类的一个新实例。当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是div元素)作为地图的容器。我们通过传入div元素的id值来获得该元素的引用。

1.5.创建图层

//创建一个WMTS矢量瓦片图层
var wmtsLayer = new Geo.View2D.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 Geo.View2D.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.addLayers([wmtsLayer,wmtsLayerAnno]);

1.7.地图定位

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

2.加载三维地图:

下面介绍三维视图加载图层,示例代码如下所示:

2.1.运行三维地图相关的准备

现在将介绍如何使用JavaScript API编写一个可运行显示三维地图的示例。由于三维视图的地图显示需要三维插件的支持,所以请先安装好三维插件。

2.2.准备页面

首先在本地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">

2.3.引用API文件

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

下载开发包文件,将OpenLayers文件夹和GeoGlobeJS.min.js文件拷贝到js文件夹下,结构如下图所示:

在OpenLayers文件夹下存放图片img文件夹、样式theme文件夹和OpenLayers-min.js文件,结构如下图所示:
打开map.html文件,在head标签中键入如下的代码,添加对API文件的引用。
<script src="js/OpenLayers/OpenLayers-min.js" type="text/javascript"></script>
<script src="js/GeoGlobeJS.min.js" type="text/javascript"></script>
如果直接从示例里拷贝代码,请粘贴到map.html文件后修改api库文件、样式表等文件的引用路径。

2.4.创建地图容器

地图需要一个HTML元素作为容器才能展现到页面上,示例中使用的是id为simpleMap的div。

2.5.创建地图对象

var map = new Geo.View3D.Map("simpleMap");

2.6.创建图层

//WMTS服务底图
var map3DLayer = new Geo.View3D.Layer.WMTS({
    name:Cfg.mapWMTSLayer_Name,//服务名称
    url:Cfg.mapWMTSLayer_Url,//服务地址
    matrixSet:Cfg.mapWMTSLayer_MatrixSet,//矩阵集名称
    style:Cfg.mapWMTSLayer_StyleIdentifier,//样式标识
    layer:Cfg.mapWMTSLayer_LayerIdentifier,//图层标识
    format:Cfg.mapWMTSLayer_Format,//数据格式
    topLevel:Cfg.mapWMTSLayer_topLevel,//图层顶层级别
    bottomLevel:Cfg.mapWMTSLayer_bottomLevel,//图层底层级别
    tileFullExtent:Geo.Bounds.fromString(Cfg.mapWMTSLayer_TileFullExtent),//图层范围
    projection: "EPSG:4326",//当前图层使用的投影
    opacity : 1//图层透明度
});
//WMTS服务注记底图
var map3DAnno = new Geo.View3D.Layer.WMTS({
    name:Cfg.mapWMTSAnno_Name,//服务名称
    url:Cfg.mapWMTSAnno_Url,//服务地址
    matrixSet:Cfg.mapWMTSAnno_MatrixSet,//矩阵集名称
    style:Cfg.mapWMTSAnno_StyleIdentifier,//样式标识
    layer:Cfg.mapWMTSAnno_LayerIdentifier,//图层标识
    format:Cfg.mapWMTSAnno_Format,//数据格式
    topLevel:Cfg.mapWMTSAnno_topLevel,//图层顶层级别
    bottomLevel:Cfg.mapWMTSAnno_bottomLevel,//图层底层级别
    tileFullExtent:Geo.Bounds.fromString(Cfg.mapWMTSAnno_TileFullExtent),//图层范围
    projection: "EPSG:4326",//当前图层使用的投影
    opacity : 1//图层透明度
});

2.7.向地图中添加图层

map.addLayers([map3DLayer,map3DAnno]);

2.8.地图定位

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