<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天地圖</title> <style> /*設置地圖顯示大小*/ #mapDiv{ width: 600px; height: 400px; position: relative; float: left; } </style> </head> <body onLoad="onLoad()"> <!--地圖容器--> <div id="mapDiv"></div> <div> <span>操作</span> <input type="button" onClick="drawMarker()" value="繪制點"/> <input type="button" onClick="drawLine()" value="繪制線"/> <input type="button" onClick="drawRectangle()" value="繪制矩形"/> <input type="button" onClick="drawPolygon()" value="繪制多邊形"/> <input type="button" onClick="drawCircle()" value="繪制圓形"/> <input type="button" onClick="drawRanging()" value="測距"/> <input type="button" onClick="drawPolygonTool()" value="測面"/> <input type="button" onClick="getDrawNumber()" value="獲取圖層個數"/> <p>說明： 測距出現的點 框 和 線都屬於圖層 故一條線 + 倆個點 +連個點的說明 總共5個圖層 </p> <p>測面 是 面和 說明 共倆個圖層</p> </div> </body> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密鑰"></script> <script type="text/javascript"> var map; var zoom = 12; function onLoad() { map = new T.Map('mapDiv'); map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); } //繪制標注(點) function drawMarker(){ var markerTool = new T.MarkTool(map, {follow: true}); map.clearOverLays(); markerTool.open(); //綁定mouseup事件 在用戶每完成一次標注時觸發事件。 markerTool.addEventListener("mouseup",getPoints1); } function getPoints1(e){ var points = e.currentLnglat; //標注點的坐標 console.log(points); } //繪制線 function drawLine(){ var PolylineTool = new T.PolylineTool(map); map.clearOverLays(); PolylineTool.open(); //綁定draw事件 用戶每次完成拉框操作時觸發事件。 PolylineTool.addEventListener("draw",getPoints2); } function getPoints2(e){ //用戶當前繪制的折線的點坐標數組 console.log(e.currentLnglats); console.log("用戶當前繪制的折線的地理長度:"+e.currentDistance); } //繪制矩形 function drawRectangle(){ var rectTool = new T.RectangleTool(map); map.clearOverLays(); rectTool.open(); //綁定draw事件 用戶每次完成拉框操作時觸發事件。 rectTool.addEventListener("draw",getPoints3); } function getPoints3(e){ var points = e.currentBounds; console.log(points); } //繪制多邊形 function drawPolygon(){ var PolygonTool = new T.PolygonTool(map); map.clearOverLays(); PolygonTool.open(); //綁定draw事件 用戶雙擊完成一次折線繪制時觸發事件。 PolygonTool.addEventListener("draw",getPoints4); } function getPoints4(e){ //用戶當前繪制的多邊形的點坐標數組 console.log(e.currentLnglats); console.log("用戶最后繪制的多邊形的地理面積:"+e.currentArea); } //測距 function drawRanging(){ var config = { showLabel: true }; lineTool = new T.PolylineTool(map, config); lineTool.open(); //綁定addpoint事件 用戶測距過程中，每次點擊底圖添加節點時觸發事件。 lineTool.addEventListener("addpoint",getAddpoint); } function getAddpoint(e){ //用戶當前繪制的折線的點坐標數組。 console.log(e.currentLnglats); console.log("用戶當前繪制的折線的地理長度:"+e.currentDistance) } //測面 function drawPolygonTool(){ var config = { showLabel: true, color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 }; //創建標注工具對象 polygonTool = new T.PolygonTool(map, config); polygonTool.open(); //綁定addpoint事件 用戶測距過程中，每次點擊底圖添加節點時觸發事件。 polygonTool.addEventListener("draw",getDraw); } function getDraw(e){ //最后繪制的多邊形的頂點坐標數組 console.log(e.currentLnglats); console.log("用戶最后繪制的多邊形的地理面積:"+e.currentArea); } //繪制圓形 function drawCircle(){ var config = { color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 } var circleTool = new T.CircleTool(map,config); circleTool.open(); //綁定drawend事件 用戶完成繪制圓時觸發 circleTool.addEventListener("drawend",getDrawend); } function getDrawend(e){ //中心點坐標 console.log(e.currentCenter); var radius = e.currentRadius; console.log("半徑，單位為米:"+radius); console.log("面積，單位為平方米:"+Math.PI * radius*radius); } //獲取圖層個數 function getDrawNumber(){ var len = map.getOverlays().length; console.log("圖層個數:"+len); } </script> </html>
在圖層上繪制圖形和相關坐標面積的獲取