使用高德地图绘制多边形区域（转）

Posted 2020-10-10 持之以恒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用高德地图绘制多边形区域（转）相关的知识，希望对你有一定的参考价值。

转自：http://www.cnblogs.com/mengxingxinqing/p/6087201.html

最近遇到一个需求，在网页上面编辑多边形的区域，并且需要能够判断一个点是否在这个多边形区域里面。

看了一下高德地图的jsapi，简单的做了一个demo。

1.你需要一个高德地图的账号，注册地址点击这里

2.登陆进去创建一个应用，这个时候就会给你一个对应的Key

3.查看高德地图的的demo，进入示例中心

4.学习一下左侧分类里面的 点标记 的示例，点标记里有涉及到高德地图事件，以及基础的类。

5.看完上面的，接下来我们接着学习折线，多边形，圆，这里我们就可以接触到AMap.Polygon这个类，以及高德地图提供编辑多边形的类AMap.PolyEditor

6.下面我们就要开始将上面的功能组合起来，进行高德地图多边形的编辑了

6.1 首先，我先用点标记在地图上选中3个点，组成一个最基本的多边形（三角形）

//用来存储3个基本点的数组 第一个存点坐标 第二个存Marker（点标记）对象
var beginPoints;
var beginMarks ;
//地图上面的click事件对象
var clickListener ;
//当前绘制的点个数，用来控制前面3个点
var beginNum;
//初始化
function init(){
        beginPoints = [];
        beginMarks = [];
        beginNum = 0;
        clickListener = AMap.event.addListener(map, "click", mapOnClick);
    }
init();
//地图上面绑定的点击事件
function mapOnClick(e) {
        // document.getElementById("lnglat").value = e.lnglat.getLng() + \',\' + e.lnglat.getLat()
        beginMarks.push(addMarker(e.lnglat));
        beginPoints.push(e.lnglat);
        beginNum++;
        if(beginNum == 3){
            //处理有了3个点以后，转化为多边形的逻辑
        }
    };

// 实例化点标记
function addMarker(lnglat) {
        
        var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: lnglat
        });
        marker.setMap(map);
        return marker;
    }

　在上面的代码里需要说一点的是，高德地图的事件绑定跟java的事件绑定有些类似 clickListener = AMap.event.addListener(map, "click", mapOnClick);

其中第一个参数是要绑定事件的对象，第二个参数是事件类型，第三个参数是对应是事件函数。取消绑定事件的方法AMap.event.removeListener(clickListener);

6.2 绘制好3个点之后，构建多边形对象，绑定对应的多边形编辑对象

//在上面的留空处，处理有了3个点以后的逻辑，继续开始
AMap.event.removeListener(clickListener);
var polygon = createPolygon(beginPoints);
polygonEditor = createEditor(polygon);
clearMarks();
//处理结束

//上面用到的几个函数
//创建一个多边形对象
function createPolygon(arr){
        var polygon = new AMap.Polygon({
            map: map,
            path: arr,
            strokeColor: "#0000ff",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f5deb3",
            fillOpacity: 0.35
        });
        return polygon;
    }
//创建一个多边形对象的编辑类对象
function createEditor(polygon){
        var polygonEditor = new AMap.PolyEditor(map, polygon);
        polygonEditor.open();
        AMap.event.addListener(polygonEditor,\'end\',polygonEnd);
        return polygonEditor;
    }
//编辑结束事件
function polygonEnd(res){
        resPolygon.push(res.target);
        alert(resPolygon[resNum].contains([116.386328, 39.913818]));
        appendHideHtml(resNum,res.target.getPath());
        
        resNum++;
        init();
    }
//将多边形路径保存到html隐藏域里
function appendHideHtml(index,arr){
        var strify = JSON.stringify(arr);
        var html = \'<input type="hidden" id="index\'+index+\'" name="paths[]" value="\'+strify+\'">\';
        $(\'body\').append(html);
        console.log(html);
    }

//清除前面的3个点标记
function clearMarks(){
        map.remove(beginMarks);
}

上面的代码里需要主要的主要是 1.高德地图清除点标记，支持清除一组，按照数组清除。2.PolyEditor这个多边形编辑对象，主要使用到了open()和close()两个函数，以及end事件（当调用了close函数后触发）3.我按照多边形的次序，将他们append到html的隐藏域中，并且将id使用了index+次序的方式生成。

然后可以选择将隐藏域中的内容提交到服务器，或者做其他的处理。

完整demo如下：

<!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">
<title>编辑折线、多边形、圆</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=这里写上你的key&plugin=AMap.PolyEditor"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" value="地图编辑完成" onClick="closeEditPolygon();"/>
</div>
<script>
var editorTool, map = new AMap.Map("container", {
resizeEnable: true,
center: [116.403322, 39.900255],//地图中心点
zoom: 13 //地图显示的缩放级别
});
var beginNum = 0;
var clickListener ;
var beginPoints;
var beginMarks ;
var polygonEditor;
var resPolygon = [];
var resNum = 0;
init();
function init(){
beginPoints = [];
beginMarks = [];
beginNum = 0;
polygonEditor = \'\';
clickListener = AMap.event.addListener(map, "click", mapOnClick);

// var str = \'[{"J":39.91789947393269,"G":116.36744477221691,"lng":116.367445,"lat":39.917899},{"J":39.91184292800211,"G":116.40658356616223,"lng":116.406584,"lat":39.911843},{"J":39.88616249265181,"G":116.37963272998047,"lng":116.379633,"lat":39.886162}]\';
// var arr = json2arr(str);
// createPolygon(arr);
}

function mapOnClick(e) {
// document.getElementById("lnglat").value = e.lnglat.getLng() + \',\' + e.lnglat.getLat()
beginMarks.push(addMarker(e.lnglat));
beginPoints.push(e.lnglat);
beginNum++;
if(beginNum == 3){
AMap.event.removeListener(clickListener);
var polygon = createPolygon(beginPoints);
polygonEditor = createEditor(polygon);
clearMarks();
}
};


function createPolygon(arr){
var polygon = new AMap.Polygon({
map: map,
path: arr,
strokeColor: "#0000ff",
strokeOpacity: 1,
strokeWeight: 3,
fillColor: "#f5deb3",
fillOpacity: 0.35
});
return polygon;
}

function createEditor(polygon){
var polygonEditor = new AMap.PolyEditor(map, polygon);
polygonEditor.open();
AMap.event.addListener(polygonEditor,\'end\',polygonEnd);
return polygonEditor;
}

function closeEditPolygon(){
polygonEditor.close();
}

function polygonEnd(res){
resPolygon.push(res.target);
alert(resPolygon[resNum].contains([116.386328, 39.913818]));
appendHideHtml(resNum,res.target.getPath());

resNum++;
init();
}

function appendHideHtml(index,arr){
var strify = JSON.stringify(arr);
var html = \'<input type="hidden" id="index\'+index+\'" name="paths[]" value="\'+strify+\'">\';
$(\'body\').append(html);
console.log(html);
}

 

function clearMarks(){
map.remove(beginMarks);
}

function json2arr(json){
var arr = JSON.parse(json);
var res = [];
for (var i = 0; i < arr.length; i++) {
var line = [];
line.push(arr[i].lng);
line.push(arr[i].lat);
res.push(line);
};
return res;
}


// 实例化点标记
function addMarker(lnglat) {

var marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: lnglat
});
marker.setMap(map);
return marker;
}

</script>
</body>
</html>

以上是关于使用高德地图绘制多边形区域（转）的主要内容，如果未能解决你的问题，请参考以下文章

高德地图判断点的位置是否在浏览器可视区域内

用C#代码写，ArcEngine开发，在加载的地图上绘制多边形后，导出绘制区域内的所有矢量要素（点线面）

iOS高德地图让指定区域或者点显示在屏幕中间

如何利用JavaScript API绘制高德地图

在地图上查找城市或区域的多边形