高德地图JS API绘制三角形

zhy

发布于 2020.02.16 12:55 阅读 2659 评论 0

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。

JS API 提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。下面我们以绘制三角形练习高德地图的API。

我们先来了解一下绘制三角形需要用到的API： Polygon和PolyEditor

了解了API后，我们就要实现绘制图形的功能：

基本思路：

1. 申请高德地图的开发者账号，登陆之后，在进入「应用管理」页面「创建新应用」，为应用添加Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

2. 获取地图上三个点的坐标（通过添加点击事件监听器获取）

3. 根据坐标创建Polygon对象

4. 创建PolyEditor对象，打开编辑功能绘制Polygon图形

具体代码：

<!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"/><style type="text/css">#tipinput {
	z-index: auto;
}
    #container {
	z-index: -1;
} 
    //下面的key填高德上建立的应用的key
    </style><script src="http://webapi.amap.com/maps?v=1.3&key=a64536b5a5606f9a5dcf4103220c6208&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>

<script>
    //初始化map对象（"container"是用于显示地图的div的ID）
    var 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);
    }
    
    function mapOnClick(e) {
        
        beginMarks.push(addMarker(e.lnglat));
        beginPoints.push(e.lnglat);
        beginNum++;
        //地图上标记点为3个
        if(beginNum == 3){
            AMap.event.removeListener(clickListener);
            var polygon = createPolygon(beginPoints);
            polygonEditor = createEditor(polygon);
            clearMarks();
        }
    };

    // 实例化点标记
    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;
    }

    function createPolygon(arr){
        var polygon = new AMap.Polygon({
            map: map,                //要显示该polygon的地图对象 
            path: arr,		     //多边形轮廓线的节点坐标数组
            strokeColor: "#0000ff",  //线条颜色
            strokeOpacity: 1,        //轮廓线透明度
            strokeWeight: 3,         //轮廓线宽度 
            fillColor: "#f5deb3",    //多边形填充颜色
            fillOpacity: 0.35        //多边形填充透明度
        });
        return polygon;
    }
    //创建polygonEditor并绘制polygon
    function createEditor(polygon){
        var polygonEditor = new AMap.PolyEditor(map, polygon);
        polygonEditor.open();
        AMap.event.addListener(polygonEditor,'end',polygonEnd);
        polygonEditor.close();
        return polygonEditor;
    }

    //绘制结束，重置标记
    function polygonEnd(res){
        resPolygon.push(res.target);
        
        resNum++;
        init();

    }

    //移除所以标记
    function clearMarks(){
        map.remove(beginMarks);
    }
</script>
</body>
</html>

最终效果：

个人总结：

Polygon和PolyEditor要配合使用才能有效果，绘制结束后PolyEditor并没有关闭，要调用close方法手动关闭本次绘制。

发表评论