一、源代码 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title&gt;天地图地图API-范例-工具集合</title&gt;
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&amp;tk=您的密钥"&gt;</script>
    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: '微软雅黑';
      }
 
      #mapDiv {
        height: 400px;
        width: 100%;
      }
 
      p,
      input {
        margin-top: 10px;
        margin-left: 5px;
        font-size: 14px;
      }
    </style>
    <script>
      var map,
        zoom = 16,
        handler;
      function onLoad() {
        //初始化地图对象
        map = new T.Map('mapDiv');
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(117.61961, 27.24944), zoom);
        //允许鼠标双击放大地图
        map.enableScrollWheelZoom();
 
        var config = {
          showLabel: true,
          color: 'blue',
          weight: 3,
          opacity: 0.5,
          fillColor: '#FFFFFF',
          fillOpacity: 0.5
        };
        //创建标注工具对象
        polygonTool = new T.PolygonTool(map, config);
      }
 
      function openPolygonTool() {
        if (handler) handler.close();
        handler = new T.PolygonTool(map);
        handler.open();
      }
      function drawFinish(e) {
        let arry = e.currentLnglats;
     
        let res = [];
        arry.forEach(function (item) {
          res.push([item.lat, item.lng]);
        });
           alert(JSON.stringify(res));
      }
      function openPolylineTool() {
        if (handler) handler.close();
        handler = new T.PolylineTool(map);
        handler.open();
        handler.addEventListener('draw', drawFinish);
      }
 
      function openMarkerTool() {
        if (handler) handler.close();
        handler = new T.MarkTool(map, { follow: true });
        handler.open();
      }
 
      function openRectangleTool() {
        if (handler) handler.close();
        handler = new T.RectangleTool(map, { follow: true });
        handler.open();
      }
      function openCircleTool() {
        if (handler) handler.close();
        handler = new T.CircleTool(map, { follow: true });
        handler.open();
      }
 
      function getLayerCount() {
        return map.getOverlays().length;
      }
    </script>
  </head>
  <body onLoad="onLoad()">
    <div id="mapDiv"></div>
    <p>本例演示多种覆盖物工具</p>
    <div>
      <input type="button" value="点工具" onClick="openMarkerTool() " />
      <input type="button" value="多边形工具" onClick="openPolygonTool() " />
      <input type="button" value="线工具" onClick="openPolylineTool() " />
      <input type="button" value="矩形工具" onClick="openRectangleTool() " />
      <input type="button" value="画圆工具" onClick="openCircleTool() " />
      <input type="button" value="获取图层个数" onClick="alert(getLayerCount()) " />
      <input type="button" value="清除所有" onClick="map.clearOverLays()" />
    </div>
  </body>
</html>

二、效果(绘制线、多边形)

 绘制线完成后双击鼠标获取线,数据格式如下:

 参考链接天地图API

原文地址:https://blog.csdn.net/yb305/article/details/132042101

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_13455.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注