高德地图开发：绘制多边形小工具，支持编辑和获取坐标

我是前端max

已于 2024-02-23 14:18:51 修改

阅读量1.3k

点赞数 18

分类专栏：前端文章标签：前端

于 2024-02-23 10:35:23 首次发布

本文链接：https://blog.csdn.net/qq_34718221/article/details/136249254

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先上效果图

支持绘制多个多边形，编辑，获取坐标和删除功能。点击右下角“绘制一个新多边形”按钮开始绘制新图形，双击或右键完成闭合结束绘制。

之前是做的一个单页面小工具，如果你需要整合到项目里，注意高德js api的版本问题。官网很多demo是2.0版本的，这里是v1.4.15，不排除语法会有区别。

正式开发请更换为自己的高德key！这里的仅供测试用。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
    #panel {
	    position: absolute;
	    background-color: white;
	    max-height: 90%;
	    overflow-y: auto;
	    top: 86px;
	    right: 10px;
	    width: 280px;
	}
    </style>
    <title>绘制和编辑</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <!-- TODO 仅供测试，换成你自己的key -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=76cd7a9d26c06fd2bc32dbf32cab3129&plugin=AMap.MouseTool"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
    <table style="width: 266px;">
        <tr>
            <td>
                <label>请输入关键字：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="input" onchange="searchPlace()" style="width: 100%;" />
            </td>
        </tr>
    </table>
</div>
<div id="panel"></div>
<div class="input-card" style="width: 200px">
   <h4 style="margin-bottom: 10px; font-weight: 600">双击或右键结束绘制</h4>
   点击多边形开启编辑和获取坐标: <div id="points"></div>
   <button class="btn" onclick="drawPolygon()" style="margin-bottom: 5px">绘制一个新多边形</button>
   <button class="btn" onclick="closeEdit()">结束编辑</button>
   <button class="btn" onclick="removeThis()">清除当前所选</button>
   <button class="btn" onclick="removeAll()">清除所有</button>
</div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        zoom: 14,
        // 可根据需要开启图层，现在使用的是默认地图
        // layers: [
        //     // 开启卫星地图层
        //     new AMap.TileLayer.Satellite(),
        //     // 路网
        //     new AMap.TileLayer.RoadNet()
        // ],
        resizeEnable: true
    });

    var searchStr = ''
    var mouseTool = new AMap.MouseTool(map)
    var polygon = null
    var editor = []
    var isDraw = false

    function searchPlace() {
    	let value = document.querySelector('#input').value
    	if (value && value.trim()) {
    		document.querySelector('#panel').style.display = 'block'
    		AMap.service(["AMap.PlaceSearch"], function() {
		        //构造地点查询类
		        var placeSearch = new AMap.PlaceSearch({ 
		            pageSize: 5, // 单页显示结果条数
		            pageIndex: 1, // 页码
		            city: "021", // 兴趣点城市
		            citylimit: true,  //是否强制限制在设置的城市内搜索
		            map: map, // 展现结果的地图实例
		            panel: "panel", // 结果列表将在此容器中进行展示。
		            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
		        });
		        //关键字查询
		        placeSearch.search(value, function(status, result) {
		        	console.log(result)
		        });
		    });
    	} else {
    		document.querySelector('#panel').style.display = 'none'
    	}
    }
    

    function drawPolygon () {
      isDraw = true
      closeEdit()

      mouseTool.polygon({
        strokeColor: "#FF33FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: "solid"
      })
    }


    AMap.event.addListener(mouseTool,'draw', function(e){
      isDraw = false
      mouseTool.close()
      polygon = e.obj
      map.plugin(["AMap.PolyEditor"],function(){
         // 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
      });
      polygon.on('click', e => {
        // 绘制新图形时关闭编辑
        if (isDraw) return
        mouseTool.close()
        closeEdit()
        // 获取坐标
        getPoints(e)
        // 点击开启编辑
        polygon = e.target
        enablePolyEdit(e)
      });
    });

    function enablePolyEdit(e) {
		setTimeout(() => {
          editor = new AMap.PolyEditor(map, polygon); 
          editor.open();
          isDraw = false

          editor.on('addnode', function(event) {
	        getPoints(e)
	      })	

	      editor.on('adjust', function(event) {
	        getPoints(e)
	      })

	      editor.on('removenode', function(event) {
	        getPoints(e)
	      })
        }, 100)
    }


    function getPoints(e) {
    	let points = e.target.getPath()
        let arr = []
        points.map(v => {
          arr.push(JSON.stringify([v.lng, v.lat])) 
        })
        arr.push(arr[0])
        document.querySelector('#points').innerText = arr + ','
    }

    function clearPoints() {
    	document.querySelector('#points').innerText && (document.querySelector('#points').innerText = '')
    }

    function closeEdit() {
      editor && editor.CLASS_NAME === "AMap.PolyEditor" && editor.close(); 
      clearPoints()
    }

    function removeThis() {
      closeEdit()
      map.remove(polygon)
    }
    function removeAll() {
      closeEdit()
      mouseTool.close(true)
    }
</script>
</body>
</html>

我是前端max

关注

18
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
高德地图开发：绘制多边形小工具，支持编辑和获取坐标

官网很多demo是2.0版本的，这里是v1.4.15，不排除语法会有区别。之前是做的一个单页面小工具，如果你需要整合到项目里，注意高德js api的。点击右下角“绘制一个新多边形”按钮开始绘制新图形，正式开发请更换为自己的高德key！
复制链接

扫一扫