自定义点与地图覆盖物上的关系判断处理

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GeoUtils示例</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<style type="text/css">
    table{
        font-size:14px;
    }
</style>
</head>
<body>
<div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>
<div style="float:left;width:300px;height:500px;border:1px solid gray" id="control">
    <table style="width:100%;" >
        <tr>
            <td colspan="2">点与矩形的关系: </td>
        </tr>
        <tr>
            <td><input type="button" value="点在矩形内" onclick="ptInRect()" /></td>
            <td><input type="button" value="点在矩形外" onclick="ptOutRect()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">点与圆形的关系: </td>
        </tr>
        <tr>
            <td><input type="button" value="点在圆形内" onclick="ptInCircle()" /></td>
            <td><input type="button" value="点在圆形外" onclick="ptOutCircle()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">计算折线长度: </td>
        </tr>
        <tr>
            <td><input type="button" value="参数为折线" onclick="computeLenByPolyine()" /></td>
            <td><input type="button" value="参数为点数组" onclick="computeLenByArray()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">计算多边形面积: </td>
        </tr>
        <tr>
            <td><input type="button" value="参数为多边形" onclick="computeAreaByPolygon()" /></td>
            <td><input type="button" value="参数为点数组" onclick="computeAreaByArray()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">判断点是否在折线上: </td>
        </tr>
        <tr>
            <td><input type="button" value="点在折线上" onclick="ptOnPolyline()" /></td>
            <td><input type="button" value="点在折线外" onclick="ptOutPolyline()" /></td>
        </tr>
        <tr>
            <td><br/></td>
        </tr>
        <tr>
            <td colspan="2">判断点是否在多边形内: </td>
        </tr>
        <tr>
            <td><input type="button" value="点在多边形内" onclick="ptInPolygon()" /></td>
            <td><input type="button" value="点在多边形外" onclick="ptOutPolygon()" /></td>
        </tr>
    <table>
</div>
</body>
</html>
<script type="text/javascript">

var map = new BMap.Map("container");
var pt = new BMap.Point(116.404, 39.915);
map.centerAndZoom(pt, 16);

map.enableScrollWheelZoom();//开启滚动缩放
map.enableContinuousZoom();//开启缩放平滑

//点在矩形内
function ptInRect(){
    var pt = new BMap.Point(116.404, 39.915);//测试点

    var pt1 = new BMap.Point(116.400, 39.910);//西南脚点
    var pt2 = new BMap.Point(116.410, 39.920);//东北脚点
    var bds = new BMap.Bounds(pt1, pt2); //测试Bounds对象

    var result = BMapLib.GeoUtils.isPointInRect(pt, bds);
    if(result == true){
        alert("点在矩形内");
    } else {
        alert("点在矩形外")
    }

    //演示：将点与矩形添加到地图上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    var pts = [];
    //bds的四个脚点坐标
    var leftTop = new BMap.Point(pt1.lng, pt2.lat);
    var rightTop = new BMap.Point(pt2.lng, pt2.lat);
    var leftBottom = new BMap.Point(pt1.lng, pt1.lat);
    var rightBottom = new BMap.Point(pt2.lng, pt1.lat);
    pts.push(leftTop);
    pts.push(rightTop);
    pts.push(rightBottom);
    pts.push(leftBottom);
    var rect = new BMap.Polygon(pts);
    map.addOverlay(mkr);//添加测试点
    map.addOverlay(rect);//添加测试矩形    

}

//点在矩形外
function ptOutRect(){
    var pt = new BMap.Point(116.398, 39.915);//测试点

    var pt1 = new BMap.Point(116.400, 39.910);//西南脚点
    var pt2 = new BMap.Point(116.410, 39.920);//东北脚点
    var bds = new BMap.Bounds(pt1, pt2); //测试Bounds对象

    var result = BMapLib.GeoUtils.isPointInRect(pt, bds);
    if(result == true){
        alert("点在矩形内");
    } else {
        alert("点在矩形外")
    }

    //演示：将点与矩形添加到地图上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    var pts = [];
    //bds的四个脚点坐标
    var leftTop = new BMap.Point(pt1.lng, pt2.lat);
    var rightTop = new BMap.Point(pt2.lng, pt2.lat);
    var leftBottom = new BMap.Point(pt1.lng, pt1.lat);
    var rightBottom = new BMap.Point(pt2.lng, pt1.lat);
    pts.push(leftTop);
    pts.push(rightTop);
    pts.push(rightBottom);
    pts.push(leftBottom);
    var rect = new BMap.Polygon(pts);
    map.addOverlay(mkr);//添加测试点
    map.addOverlay(rect);//添加测试矩形
}

//点在圆内
function ptInCircle(){
    var pt = new BMap.Point(116.404, 39.915);//测试点
    var c = new BMap.Point(116.404, 39.915); //圆心
    var circle = new BMap.Circle(c, 500);//测试圆

    var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);
    if(result == true){
        alert("点在圆形内");
    } else {
        alert("点在圆形外")
    }

    //演示：将点与圆形添加到地图上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(circle);
}

//点在圆外
function ptOutCircle(){
    var pt = new BMap.Point(116.396, 39.915);//测试点
    var c = new BMap.Point(116.404, 39.915); //圆心
    var circle = new BMap.Circle(c, 500);//测试圆        

    var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);
    if(result == true){
        alert("点在圆形内");
    } else {
        alert("点在圆形外")
    }

    //演示：将点与圆形添加到地图上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(circle);
}

//计算长度，参数为折线
function computeLenByPolyine(){
    var pts = [];
    var pt1 = new BMap.Point(116.400,39.910);
    var pt2 = new BMap.Point(116.402,39.912);
    var pt3 = new BMap.Point(116.403,39.914);
    var pt4 = new BMap.Point(116.404,39.917);
    var pt5 = new BMap.Point(116.406,39.918);

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);

    var ply = new BMap.Polyline(pts);
    var dis = BMapLib.GeoUtils.getPolylineDistance(ply);
    alert("共" + dis.toFixed(2) + "米");

    //演示：将线添加到地图上
    map.clearOverlays();
    map.addOverlay(ply);
}

//计算长度，参数为点数组
function computeLenByArray(){
    var pts = [];
    var pt1 = new BMap.Point(116.400,39.910);
    var pt2 = new BMap.Point(116.402,39.912);
    var pt3 = new BMap.Point(116.403,39.914);
    var pt4 = new BMap.Point(116.404,39.917);
    var pt5 = new BMap.Point(116.406,39.918);

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);

    var dis = BMapLib.GeoUtils.getPolylineDistance(pts);
    alert("共" + dis.toFixed(2) + "米");

    //演示：将线添加到地图上
    var ply = new BMap.Polyline(pts, {strokeColor: "red", strokeStyle:"dashed"});
    map.clearOverlays();
    map.addOverlay(ply);
}

//计算面积，参数为多边形
function computeAreaByPolygon(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.394, 39.918);
    var pt3 = new BMap.Point(116.396, 39.919);
    var pt4 = new BMap.Point(116.404, 39.920);
    var pt5 = new BMap.Point(116.406, 39.913);    

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);    

    var ply = new BMap.Polygon(pts);
    var area = BMapLib.GeoUtils.getPolygonArea(ply);
    alert("共" + area.toFixed(2) + "平方米"); 

    //演示：将面添加到地图上
    map.clearOverlays();
    map.addOverlay(ply);
}

//计算面积，参数为数组
function computeAreaByArray(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.394, 39.918);
    var pt3 = new BMap.Point(116.396, 39.919);
    var pt4 = new BMap.Point(116.404, 39.920);
    var pt5 = new BMap.Point(116.406, 39.913);    

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);

    var area = BMapLib.GeoUtils.getPolygonArea(pts);
    alert("共" + area.toFixed(2) + "平方米"); 

    //演示：将面添加到地图上
    var ply = new BMap.Polygon(pts, {strokeColor: "red", strokeStyle:"dashed", fillColor:"gray"});
    map.clearOverlays();
    map.addOverlay(ply);
}

//点在折线上
function ptOnPolyline(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.405, 39.920);
    var pt3 = new BMap.Point(116.410, 39.920);

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    var ply = new BMap.Polyline(pts);

    var pt = new BMap.Point(116.400, 39.915);    

    var result = BMapLib.GeoUtils.isPointOnPolyline(pt, ply);
    if(result == true){
        alert("点在折线上");
    } else {
        alert("点在折线外")
    }

    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(ply);
}

//点在折线外
function ptOutPolyline(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.405, 39.920);
    var pt3 = new BMap.Point(116.410, 39.920);

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    var ply = new BMap.Polyline(pts);

    var pt = new BMap.Point(116.401, 39.915);    

    var result = BMapLib.GeoUtils.isPointOnPolyline(pt, ply);
    if(result == true){
        alert("点在折线上");
    } else {
        alert("点在折线外")
    }

    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(ply);
}

//点在多边形内
function ptInPolygon(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.394, 39.914);
    var pt3 = new BMap.Point(116.403, 39.920);
    var pt4 = new BMap.Point(116.402, 39.914);
    var pt5 = new BMap.Point(116.410, 39.913);    

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);
    var ply = new BMap.Polygon(pts);

    var pt =new BMap.Point(116.400, 39.914);

    var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
    if(result == true){
        alert("点在多边形内");
    } else {
        alert("点在多边形外")
    } 

    //演示：将面添加到地图上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(ply);
}

//点在多边形外
function ptOutPolygon(){
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.394, 39.914);
    var pt3 = new BMap.Point(116.396, 39.919);
    var pt4 = new BMap.Point(116.406, 39.920);
    var pt5 = new BMap.Point(116.410, 39.913);    

    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);
    pts.push(pt5);
    var ply = new BMap.Polygon(pts);

    var pt =new BMap.Point(116.410, 39.915);

    var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
    if(result == true){
        alert("点在多边形内");
    } else {
        alert("点在多边形外")
    } 

    //演示：将面添加到地图上
    map.clearOverlays();
    var mkr = new BMap.Marker(pt);
    map.addOverlay(mkr);
    map.addOverlay(ply);
}
</script>
时间： 2024-10-26 15:58:39

自定义点与地图覆盖物上的关系判断处理的相关文章

百度地图上自定义图片覆盖物上加点击事件

在百度地图上加自定义图片覆盖物之后,在这个覆盖物上加点击手势,发现并不识别.原因不太清楚.不过可以通过别的方法来实现这个功能. 需要用到BMKMapViewDelegate中的方法: - (void)mapView:(BMKMapView *)mapView onClickedMapBlank:(CLLocationCoordinate2D)coordinate 然后判断所点击的坐标是否在指定区域内,在指定区域内之后,调用自己写的相应地方法即可. 百度地图上自定义图片覆盖物上加点击事件,布布扣,

自定义地图覆盖物（包括view）

原文地址:http://my.oschina.net/freestyletime/blog/291638 官方例子 这个百度地图 android SDK 关于基础地图覆盖物的例子 http://developer.baidu.com/map/wiki/index.php?title=androidsdk/guide/basicmap#.E6.A0.87.E6.B3.A8.E8.A6.86.E7.9B.96.E7.89.A9 //定义Maker坐标点 LatLng point = new LatL

【07】覆盖物（百度地图覆盖物笔记）

[07]覆盖物 地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物.如标注.矢量图形元素(包括:折线和多边形和圆).信息窗口等.覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动. 地图API提供了如下几种覆盖物: Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法. Marker:标注表示地图上的点,可自定义标注的图标. Label:表示地图上的文本标注,您可以自定义标注的文本内容. Polyline:表示地图上的折线. Polygon:表示地图上的多边

03.(最新版)百度地图&#167;覆盖物OverlayOptions

转载请标明:http://blog.csdn.net/u012637501 目前百度地图SDK所提供的地图等级为3-19级,所包含的信息有建筑物.道路.河流.学校.公园等内容.所有叠加或覆盖到地图的内容,我们统称为地图覆盖物.如标注.矢量图形元素(包括:折线.多边形和圆等).定位图标等.覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动.我们可根据自己实际的业务需求,利用标注覆盖物,在地图指定的位置上添加标注信息. 一.APIs 1.LatLng类 (1)作用:地理坐标基本数据结构

Android自定义动态布局 — 多图片上传

Android自定义动态布局 - 多图片上传 本文介绍Android中动态布局添加图片,多图片上传. 项目中效果图:    技术点: 1.动态添加格局中的线条和添加图片的+号 2.多张图片异步上传 首先来看一下布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layo

百度地图覆盖物信息显示和隐藏

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;hidden;margin:

XNA 地图编辑器(上)

地图编辑器通常是用来设计世界地图或是游戏的关卡,网络上有很多免费的地图编辑器,像是Mappy.tIDE-其实操作起来原理都是一样的,今天要示范的是tIDE. 地图编辑器通常是用来设计世界地图或是游戏的关卡,网络上有很多免费的地图编辑器,像是Mappy.tIDE-其实操作起来原理都是一样的,今天要示范的是tIDE. 首先到官方网站下载回来安装 (官方载点) 安装完毕开启软件 先下载这张Tile Sheet回去,我们要用这个来拼出地图 (下载) 回到软件画面选择 Tile Sheet > New 按

JTS Geometry关系判断和分析

关系判断 Geometry之间的关系有如下几种: 相等(Equals): 几何形状拓扑上相等. 脱节(Disjoint): 几何形状没有共有的点. 相交(Intersects): 几何形状至少有一个共有点(区别于脱节) 接触(Touches): 几何形状有至少一个公共的边界点,但是没有内部点. 交叉(Crosses): 几何形状共享一些但不是所有的内部点. 内含(Within): 几何形状A的线都在几何形状B内部. 包含(Contains): 几何形状B的线都在几何形状A内部(区别于内含) 重叠

input type=&#39;file&#39; 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) var isE