天地图多边形工具
http://lbs.tianditu.gov.cn/api/js4.0/examples.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 5 <title>天地图－地图API－范例－工具集合</title> 6 <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script> 7 <style type="text/css"> 8 body, html { 9 width: 100%; 10 height: 100%; 11 margin: 0; 12 font-family: "微软雅黑"; 13 } 14 15 #mapDiv { 16 height: 400px; 17 width: 100%; 18 } 19 20 p,input { 21 margin-top: 10px; 22 margin-left: 5px; 23 font-size: 14px; 24 } 25 </style> 26 <script> 27 var map, zoom = 12, handler; 28 function onLoad() { 29 //初始化地图对象 30 map = new T.Map("mapDiv"); 31 //设置显示地图的中心点和级别 32 map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom); 33 //允许鼠标双击放大地图 34 map.enableScrollWheelZoom(); 35 36 var config = { 37 showLabel: true, 38 color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 39 }; 40 //创建标注工具对象 41 polygonTool = new T.PolygonTool(map, config); 42 } 43 44 function openPolygonTool() { 45 if (handler) handler.close(); 46 handler = new T.PolygonTool(map); 47 handler.open(); 48 } 49 50 function openPolylineTool() { 51 if (handler) handler.close(); 52 handler = new T.PolylineTool(map); 53 handler.open(); 54 } 55 56 function openMarkerTool() { 57 if (handler) handler.close(); 58 handler = new T.MarkTool(map, {follow: true}); 59 handler.open(); 60 } 61 62 function openRectangleTool() { 63 if (handler) handler.close(); 64 handler = new T.RectangleTool(map, {follow: true}); 65 handler.open(); 66 } 67 function openCircleTool() { 68 if (handler) handler.close(); 69 handler = new T.CircleTool(map, {follow: true}); 70 handler.open(); 71 } 72 73 function getLayerCount() { 74 return map.getOverlays().length; 75 76 } 77 78 </script> 79 </head> 80 <body onLoad="onLoad()"> 81 <div id="mapDiv"></div> 82 <p>本例演示多种覆盖物工具</p> 83 <div> 84 <input type="button" value="点工具" onClick='openMarkerTool() '/> 85 <input type="button" value="多边形工具" onClick='openPolygonTool() '/> 86 <input type="button" value="线工具" onClick='openPolylineTool() '/> 87 <input type="button" value="矩形工具" onClick='openRectangleTool() '/> 88 <input type="button" value="画圆工具" onClick='openCircleTool() '/> 89 <input type="button" value="获取图层个数" onClick='alert(getLayerCount()) '/> 90 <input type="button" value="清除所有" onClick='map.clearOverLays()'/> 91 </div> 92 </body> 93 </html>
