开源中文网

您的位置: 首页 > 编程开发 > javascript > javascript编程 > 正文

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

来源: cnblogs  作者: 梦醒心晴

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

看了一下高德地图的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+次序的方式生成。

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

Tags:高德 多边形 区域
关于开源中文网 - 联系我们 - 广告服务 - 网站地图 - 版权声明