對於天地圖的使用，其官網給的資料及網上的資料太少，以下給出天地圖標註並連線的方法
工具/原料
天地圖AjaxAPI
vs2012
方法/步驟
下載天地圖AjaxAPI檔案，得到如下檔案
新建專案，將下載的檔案新增入專案中，我將檔案放在了tianditu_Js資料夾下
新建網頁檔案，在頭部引入以下檔案：
宣告地圖，並載入地圖，程式碼如下：
var map;
var vectorlayer;
var markers;
var dialog;
var extent = new NBounds(108.332, 28.881, 116.39, 33.441);//wmts對應bounds
map = new NMap('map', { units: 'dd', projection: 'epsg:4490' });
map.maxExtent = extent;
layer = new NSimpleWMTSLayer("湖北省", //圖層名稱
";,//WMTS服務GetTile介面的訪問地址
"ZWVector", //WMTS服務GetTile介面的layer引數值
"TileMatrixSet_0", //WMTS服務GetTile介面的tileMatrixSet引數值
"Default", //WMTS服務GetTile介面的style引數值
//WMTS服務GetTile介面的format引數值
{
tileOrigin: new NLatLng(-180, 90),
serviceMode: 'RESTful',
format: "image/png"
},
// 以JSON結構對所要建立的< NSimpleWMTSLayer >物件的其他屬性進行賦值
{
resolutions: [0.01098632812500002, 0.00549316406250001, 0.0027465820312500017, 0.0013732910156250009, 0.000686645507812499, 0.0003433227539062495, 0.00017166137695312503, 0.00008583068847656251, 0.000042915344238281406, 0.000021457672119140645, 0.000010728836059570307, 0.000005364418029785169, 0.000002682210361715995, 0.0000013411051808579975],
VERSION: "1.0.0",
format: "image/png",
isBasicLayer: true
}
);
//根據WMTS的GetCapabilites構建 TileMatrix與resolution的關聯陣列
layer.serverResolutions = { "0": 0.01098632812500002, "1": 0.00549316406250001, "2": 0.0027465820312500017, "3": 0.0013732910156250009, "4": 0.000686645507812499, "5": 0.0003433227539062495, "6": 0.00017166137695312503, "7": 0.00008583068847656251, "8": 0.000042915344238281406, "9": 0.000021457672119140645, "10": 0.000010728836059570307, "11": 0.000005364418029785169, "12": 0.000002682210361715995, "13": 0.0000013411051808579975 };
map.addLayer(layer);
map.addControl(new NPanZoomBarControl());
map.addControl(new NCursorPositionControl());
map.addControl(new NScaleBarControl());
map.zoomToMaxExtent();
map.zoomToExtent(extent);
//設定地圖中心、縮放比例
map.setCenter(new NLatLng(112.135099, 32.07939), 1);
//新增向量圖層
vectorlayer = new NVectorLayer("向量圖層");
map.addLayer(vectorlayer);
//新增點標註圖層
markers = new NMarkersLayer("標註圖層");
markers.layersort = 8888;
markers.visible = true;
markers.showInLayerList = true;
map.addLayer(markers);
效果如下：
編寫線標註函式：
/*新增線*/
function drawLine() {
var arr = new Array();
var imageurl = '../Images/mark_red.png';//點標註圖示
var size = new NSize(25, 21);//圖示大小
var offset = new NPixel(-(size.w / 2), -size.h);//圖示偏移量
var bounds = map.getBounds();//獲取當前檢視地圖上下左右座標
var lngSpan = Math.abs(bounds.left - bounds.right);
var latSpan = Math.abs(bounds.top - bounds.bottom);
//隨機向地圖中新增5個標註點
for (var i = 0; i < 5; i++) {
var point = new NLatLng(bounds.left + lngSpan * (Math.random() * 0.7), bounds.top - latSpan * (Math.random() * 0.7));
arr.push(new NGeometry.Point(point.lon, point.lat));
var marker = new NIcon(imageurl, size, offset);
markers.addMarker(new NMarker(point, marker));
}
var line = new NVectorFeature(new NGeometry.LineString(arr));//將標註的點連成線
vectorlayer.addFeatures(line);//將線物件新增到向量圖層中
}
在網頁body中新增如下程式碼，點選“標註畫線”，即可得到一條線注。
注意事項
天地圖AjaxAPI檔案一定要引入
宣告map時，注意修改繫結的div的id