百度地图API画多边型，测面积

最新推荐文章于 2024-06-07 15:59:46 发布

tiz198183

最新推荐文章于 2024-06-07 15:59:46 发布

阅读量4.4k

点赞数

分类专栏：百度/Google地图API

本文链接：https://blog.csdn.net/litao2/article/details/9836419

版权

这篇博客介绍了如何利用百度地图API来画一个多边形，并且提到了GeoUtils.js脚本在计算多边形面积中的应用，但需要注意的是，该方法不适用于计算自相交多边形的面积。

摘要由CSDN通过智能技术生成

效果：

脚本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>耕地分布图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="Js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Js/GeoUtils.js" type="text/javascript"></script>
<style type="text/css">
  html,body
    {
        height:100%;
        margin:0;
    }
</style>
</head>

<body>
<div style="width:100%; height:100%;z-index:9;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("container", { mapType: BMAP_HYBRID_MAP });      //设置卫星图为底图
    map.centerAndZoom(new BMap.Point(112.244629, 32.094896), 15);                     // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom();                            //启用滚轮放大缩小
    map.addControl(new BMap.NavigationControl());  //添加鱼骨控件
    map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
    map.setCurrentCity("襄阳");          // 设置3D地图显示的城市 此项是必须设置的


    fun(1, "112.254474,32.088357", "new BMap.Point(112.25221,32.091263),new BMap.Point(112.252785,32.091202),new BMap.Point(112.252929,32.090621),new BMap.Point(112.253576,32.090407),new BMap.Point(112.253576,32.090896),new BMap.Point(112.256199,32.090468),new BMap.Point(112.256558,32.091416),new BMap.Point(112.258319,32.091355),new BMap.Point(112.256055,32.085114),new BMap.Point(112.254007,32.085451),new BMap.Point(112.252785,32.085512),new BMap.Point(112.252282,32.085145),new BMap.Point(112.251851,32.085145),new BMap.Point(112.251635,32.084625),new BMap.Point(112.251025,32.084533),new BMap.Point(112.252138,32.091018)", '已播', 'green');
    fun(2, "112.244543,32.085696", "new BMap.Point(112.24086,32.087332),new BMap.Point(112.244561,32.087669),new BMap.Point(112.248065,32.087791),new BMap.Point(112.248658,32.087883),new BMap.Point(112.249125,32.086047),new BMap.Point(112.24952,32.086063),new BMap.Point(112.250023,32.084258),new BMap.Point(112.241435,32.082973),new BMap.Point(112.240609,32.084548)", '未播', 'blue');
    fun(3, "112.248244,32.088342", "new BMap.Point(112.247737,32.087975),new BMap.Point(112.248442,32.089149),new BMap.Point(112.248536,32.089149),new BMap.Point(112.248572,32.088036)", '未播', 'green');

    //变量名,标签坐标,多边形坐标,文本,边框颜色
    function fun(i,xy,arr,wb,ys) {
        //创建经纬度数组
        eval("var secRingCenter" + i+" = new BMap.Point("+xy+")");
        eval("var secRing"+i+" = ["+arr+"]");
        //创建多边形
        eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { strokeColor: \"" + ys + "\", strokeWeight: 4})");
        //eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { FillColor:\"red\", strokeColor: \"blue\", strokeWeight: 2, strokeOpacity: 0.3 })");

        //添加多边形到地图上
        map.addOverlay(eval("secRingPolygon"+i));

        var resultArea = BMapLib.GeoUtils.getPolygonArea(eval("secRingPolygon" + i)); //计算多边形的面积（单位米）

        //给多边形添加鼠标事件
        eval("secRingPolygon"+i).addEventListener("mouseover", function () {//鼠标经过时
            eval("secRingPolygon" + i).setStrokeColor("red"); //多边形边框为红色
            //eval("secRingPolygon" + i).setFillColor(ys); 
            map.addOverlay(eval("secRingLabel"+i)); //添加多边形遮照
            //map.panTo(eval("secRingCenter"+i)); //将地图移动到指定点
        });
        eval("secRingPolygon"+i).addEventListener("mouseout", function () {
            eval("secRingPoly