百度地图绘制扇形
2018-08-06 本文已影响0人
马丁路德东
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
width: 100%;
height: 500px;
}
p {
margin-left: 5px;
font-size: 14px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tb3xO9tSnOggEciyQBO03vEUydIvdTsY"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
<title>添加椭圆</title>
</head>
<body>
<div id="allmap"></div>
<p>在地图上添加一个椭圆，圆的颜色为蓝色、线宽6px、透明度为1，填充颜色为白色，透明度为0.5</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 10);
//centre:椭圆中心点,X:横向经度,Y:纵向纬度
function add_oval(centre, x, y) {
var assemble = new Array();
var angle;
var dot;
var tangent = x / y;
for(i = 0; i < 36; i++) {
angle = (2 * Math.PI / 36) * i;
dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);
assemble.push(dot);
}
return assemble;
}
//以画多边形区域的方法画扇形区域 画出以point2点为圆心，半径为radius，夹角从sDegree到eDegree的扇形
//Sector1(point,300,10,60,"hello")
function Sector1(point2, radius, sDegree, eDegree, opts) {
var points = []; //创建构成多边形的点数组
var step = ((eDegree - sDegree) / 10) || 10; //根据扇形的总夹角确定每步夹角度数，最大为10
points.push(point2);
for(var i = sDegree; i < eDegree + 0.001; i += step) { //循环获取每步的圆弧上点的坐标，存入点数组
points.push(EOffsetBearing(point2, radius, i));
}
points.push(point2);
if(sDegree == eDegree) {
var planepoint = points[1];
var myIcon = new BMap.Icon("../images/uav.png",
new BMap.Size(36, 36));
var marker = new BMap.Marker(planepoint, {
icon: myIcon
});
var infoWindow = new BMap.InfoWindow("信息:", opts); // 创建信息窗口对象
marker.addEventListener("click", function() {
map.openInfoWindow(infoWindow, planepoint); // 开启信息窗口
//window.external.Test(sDegree);
});
map.addOverlay(marker);
}
return points;
}
//使用数学的方法计算需要画扇形的圆弧上的点坐标
function EOffsetBearing(point3, dist, bearing) {
var lngConv = map.getDistance(point3, new BMap.Point(point3.lng + 0.1, point3.lat)) * 10; //计算1经度与原点的距离
var latConv = map.getDistance(point3, new BMap.Point(point3.lng, point3.lat + 0.1)) * 10; //计算1纬度与原点的距离
var lat = dist * Math.sin(bearing * Math.PI / 180) / latConv; //正弦计算待获取的点的纬度与原点纬度差
var lng = dist * Math.cos(bearing * Math.PI / 180) / lngConv; //余弦计算待获取的点的经度与原点经度差
return new BMap.Point(point3.lng + lng, point3.lat + lat);
}
var oval = new BMap.Polygon(Sector1(point,300000,20,60,"hello"), {
strokeColor: "blue",
strokeWeight: .9,
strokeOpacity: 0.5
});
map.addOverlay(oval);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
</script>
