<!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>
在图层上绘制图形和相关坐标面积的获取