天地图 JAVASCRIPT SDK API

分类 道路交通 关键字 天地图,API,JS,JAVASCRIPT 下载次数 60
开放等级 完全开放 版本号 V1.0 浏览次数 572
创建时间 2016-06-25 13:47:29 最后修改时间 2016-06-25 13:58:36


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  2. <html xmlns="http://www.w3.org/1999/xhtml">  

  3.     <head>  

  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

  5.         <title>快速入门</title>  

  6.         <script type="text/javascript" src="../js/OpenLayers/OpenLayers-min.js"></script>  

  7.         <script type="text/javascript" src="../js/GeoGlobeJS.min.js"></script>  

  8.     </head>  

  9.     <body>  

  10.         <!-- 示例页面的地图容器div对象 -->  

  11.           <div id="simpleMap" style="width:100%;height:100%;position: absolute;"></div>  

  12.         <!-- 脚本 -->     

  13.         <script type="text/javascript">  

  14.             //定义配置对象  

  15.             var Cfg = {};  

  16.             //定位的中心点  

  17.             Cfg.lonLat = "112.939,31.377";  

  18.             //定位的缩放级别  

  19.             Cfg.zoom = "4";  

  20.             //每英寸对应的像素值  

  21.             Cfg.DOTS_PER_INCH = 96;  

  22.             //设置dpi  

  23.             Geo.setDPI(Cfg.DOTS_PER_INCH);  

  24.             //WMTS服务名称  

  25.             Cfg.mapWMTSLayer_Name = "1-18级WMTS矢量底图";  

  26.             //WMTS服务地址  

  27.             Cfg.mapWMTSLayer_Url = "http://t0.tianditu.com/vec_c/wmts";    

  28.             //图层标识  

  29.             Cfg.mapWMTSLayer_LayerIdentifier = "vec";   

  30.             //矩阵集名称    

  31.             Cfg.mapWMTSLayer_MatrixSet = "c";   

  32.             //图层样式  

  33.             Cfg.mapWMTSLayer_StyleIdentifier = "default";    

  34.             //WMTS图层的比例尺值   

  35.             Cfg.mapWMTSLayer_Scales = "2.958293554545656E8,

  36. 1.479146777272828E8,7.39573388636414E7,

  37. 3.69786694318207E7,1.848933471591035E7,9244667.357955175 

  38.             //地图级别偏移量,取WMTS的最小层级   

  39.             Cfg.mapWMTSLayer_ZoomOffset = 1;  

  40.             //WMTS图层的范围  

  41.             Cfg.mapWMTSLayer_TileFullExtent = "-180.0,-90.0,180.0,90.0" ;   

  42.             //服务返回数据格式  

  43.             Cfg.mapWMTSLayer_Format = "tiles";  

  44.             //WMTS注记服务名称  

  45.             Cfg.mapWMTSAnno_Name = "1-18级WMTS矢量注记底图";  

  46.             //WMTS服务地址  

  47.             Cfg.mapWMTSAnno_Url = "http://t0.tianditu.com/cva_c/wmts";    

  48.             //图层标识  

  49.             Cfg.mapWMTSAnno_LayerIdentifier = "cva";   

  50.             //矩阵集名称    

  51.             Cfg.mapWMTSAnno_MatrixSet = "c";   

  52.             //图层样式  

  53.             Cfg.mapWMTSAnno_StyleIdentifier = "default";    

  54.             //WMTS图层的比例尺值   

  55.             Cfg.mapWMTSAnno_Scales = "2.958293554545656E8,1.479146777272828E8,

  56. 7.39573388636414E7,3.697 86694318207E7,

  57. 1.848933471591035E7,9244667.357955175

  58.             //地图级别偏移量,取WMTS的最小层级   

  59.             Cfg.mapWMTSAnno_ZoomOffset = 1;  

  60.             //WMTS图层的范围  

  61.             Cfg.mapWMTSAnno_TileFullExtent = "-180.0,-90.0,180.0,90.0" ;   

  62.             //服务返回数据格式  

  63.             Cfg.mapWMTSAnno_Format = "tiles";     

  64.             //构造地图对象实例,并添加到id为simpleMap的div容器中  

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

  66.             //获取wmts的比例尺数组  

  67.             function getRes() {  

  68.                 var res = [];  

  69.                 var scaleStr = Cfg.mapWMTSLayer_Scales.split(",");  

  70.                 for(var i = 0, j = scaleStr.length; i < j;i++) {  

  71.                     res.push(map.pyramid.getResolutionForScale(parseFloat(scaleStr[i])));  

  72.                 }  

  73.                 return res;  

  74.             }  

  75.             //获取wmts的比例尺数组  

  76.             function getResAnno() {  

  77.                 var res = [];  

  78.                 var scaleStr = Cfg.mapWMTSAnno_Scales.split(",");  

  79.                 for(var i = 0, j = scaleStr.length; i < j;i++) {  

  80.                     res.push(map.pyramid.getResolutionForScale(parseFloat(scaleStr[i])));  

  81.                 }  

  82.                 return res;  

  83.             }  

  84.             //创建WMTS图层对象  

  85.             var wmtsLayer = new Geo.View2D.Layer.WMTS({  

  86.                 name : Cfg.mapWMTSLayer_Name,  

  87.                 url : Cfg.mapWMTSLayer_Url,  

  88.                 matrixSet : Cfg.mapWMTSLayer_MatrixSet,  

  89.                 style : Cfg.mapWMTSLayer_StyleIdentifier,  

  90.                 layer : Cfg.mapWMTSLayer_LayerIdentifier,  

  91.                 resolutions: getRes(),  

  92.                 format : Cfg.mapWMTSLayer_Format,  

  93.                 maxResolution :getRes()[0],//最大分辨率  

  94.                 minResolution :getRes()[getRes().length - 1],//最小分辨率  

  95.                 zoomOffset:Cfg.mapWMTSLayer_ZoomOffset,  

  96.                 tileFullExtent:Geo.Bounds.fromString(Cfg.mapWMTSLayer_TileFullExtent)  

  97.             });           

  98.             //创建WMTS注记图层对象  

  99.             var wmtsLayerAnno = new Geo.View2D.Layer.WMTS({  

  100.                 name : Cfg.mapWMTSAnno_Name,  

  101.                 url : Cfg.mapWMTSAnno_Url,  

  102.                 matrixSet : Cfg.mapWMTSAnno_MatrixSet,  

  103.                 style : Cfg.mapWMTSAnno_StyleIdentifier,  

  104.                 layer : Cfg.mapWMTSAnno_LayerIdentifier,  

  105.                 resolutions: getResAnno(),  

  106.                 format : Cfg.mapWMTSAnno_Format,  

  107.                 maxResolution :getResAnno()[0],//最大分辨率  

  108.                 minResolution :getResAnno()[getResAnno().length - 1],//最小分辨率  

  109.                 zoomOffset:Cfg.mapWMTSAnno_ZoomOffset,  

  110.                 tileFullExtent:Geo.Bounds.fromString(Cfg.mapWMTSAnno_TileFullExtent)  

  111.             });  

  112.             //添加WMTS图层到地图  

  113.             map.addLayers([wmtsLayer, wmtsLayerAnno]);  

  114.             //定位到中心点和缩放级别  

  115.             map.setCenter(new Geo.LonLat(Cfg.lonLat.split(",")[0],Cfg.lonLat.split(",")[1]), Cfg.zoom);  

  116.         </script>  

  117.     </body>  

  118. </html>  

1.1.准备页面

在本地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文件

创建地图需要OpenLayers-min.js,GeoGlobeJS.min.js地图API文件。点击下载开发包

下载开发包文件,并将文件放在本地指定路径下即可,存放路径如下所示。 
在js文件夹下存放OpenLayers文件和GeoGlobeJS.min.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>

1.3.创建地图容器

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

1.4.创建地图对象

var map = new Geo.View2D.Map("first_map");
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(116.404, 39.915), 8);
默认情况下地图中心点为经纬度地理坐标(0,0)。现在我们需要调用地图对象的setCenter方法,定位到北京的地理位置和相应缩放级别,以便得到一个恰当的显示效果。

2.加载二维Flash

> <