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

效果：

脚本：

[javascript] view plaincopy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>耕地分布图</title>
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
  7. <script src="Js/jquery-1.3.2.js" type="text/javascript"></script>
  8. <script src="Js/GeoUtils.js" type="text/javascript"></script>
  9. <style type="text/css">
  10. html,body
  11. {
  12. height:100%;
  13. margin:0;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div style="width:100%; height:100%;z-index:9;border:1px solid gray" id="container"></div>
  19. </body>
  20. </html>
  21. <script type="text/javascript">
  22. var map = new BMap.Map("container", { mapType: BMAP_HYBRID_MAP });      //设置卫星图为底图
  23. map.centerAndZoom(new BMap.Point(112.244629, 32.094896), 15);                     // 初始化地图,设置中心点坐标和地图级别。
  24. map.enableScrollWheelZoom();                            //启用滚轮放大缩小
  25. map.addControl(new BMap.NavigationControl());  //添加鱼骨控件
  26. map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
  27. map.setCurrentCity("襄阳");          // 设置3D地图显示的城市 此项是必须设置的
  28. 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‘);
  29. 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‘);
  30. 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‘);
  31. //变量名,标签坐标,多边形坐标,文本,边框颜色
  32. function fun(i,xy,arr,wb,ys) {
  33. //创建经纬度数组
  34. eval("var secRingCenter" + i+" = new BMap.Point("+xy+")");
  35. eval("var secRing"+i+" = ["+arr+"]");
  36. //创建多边形
  37. eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { strokeColor: \"" + ys + "\", strokeWeight: 4})");
  38. //eval("var secRingPolygon" + i + "= new BMap.Polygon(secRing" + i + ", { FillColor:\"red\", strokeColor: \"blue\", strokeWeight: 2, strokeOpacity: 0.3 })");
  39. //添加多边形到地图上
  40. map.addOverlay(eval("secRingPolygon"+i));
  41. var resultArea = BMapLib.GeoUtils.getPolygonArea(eval("secRingPolygon" + i)); //计算多边形的面积（单位米）
  42. //给多边形添加鼠标事件
  43. eval("secRingPolygon"+i).addEventListener("mouseover", function () {//鼠标经过时
  44. eval("secRingPolygon" + i).setStrokeColor("red"); //多边形边框为红色
  45. //eval("secRingPolygon" + i).setFillColor(ys);
  46. map.addOverlay(eval("secRingLabel"+i)); //添加多边形遮照
  47. //map.panTo(eval("secRingCenter"+i)); //将地图移动到指定点
  48. });
  49. eval("secRingPolygon"+i).addEventListener("mouseout", function () {
  50. eval("secRingPolygon" + i).setStrokeColor(ys);
  51. //eval("secRingPolygon" + i).setFillColor("");
  52. map.removeOverlay(eval("secRingLabel"+i));
  53. });
  54. eval("secRingPolygon"+i).addEventListener("click", function () {
  55. map.zoomIn();
  56. eval("secRingPolygon" + i).setStrokeColor(ys);
  57. //eval("secRingPolygon" + i).setFillColor("");
  58. map.setCenter(eval("secRingCenter"+i));
  59. });
  60. //创建标签
  61. eval("var secRingLabel" + i + "= new BMap.Label(\"<b>" + wb + " 面积(㎡)：" + Math.floor(resultArea) + "</b>\", { offset: new BMap.Size(0, 0), position: secRingCenter" + i + "})");
  62. eval("secRingLabel"+i).setStyle({ "z-index": "999999", "padding": "2px",  "border": "1px solid #ccff00" });
  63. }
  64. </script>

GeoUtils.js

[javascript] view plaincopy

  1. /**
  2. * @fileoverview GeoUtils类提供若干几何算法，用来帮助用户判断点与矩形、
  3. * 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。
  4. * 主入口类是<a href="symbols/BMapLib.GeoUtils.html">GeoUtils</a>，
  5. * 基于Baidu Map API 1.2。
  6. *
  7. * @author Baidu Map Api Group
  8. * @version 1.2
  9. */
  10. //BMapLib.GeoUtils.degreeToRad(Number)
  11. //将度转化为弧度
  12. //BMapLib.GeoUtils.getDistance(Point, Point)
  13. //计算两点之间的距离,两点坐标必须为经纬度
  14. //BMapLib.GeoUtils.getPolygonArea(polygon)
  15. //计算多边形面或点数组构建图形的面积,注意：坐标类型只能是经纬度，且不适合计算自相交多边形的面积(封闭的面积)
  16. //BMapLib.GeoUtils.getPolylineDistance(polyline)
  17. //计算折线或者点数组的长度
  18. //BMapLib.GeoUtils.isPointInCircle(point, circle)
  19. //判断点是否在圆形内
  20. //BMapLib.GeoUtils.isPointInPolygon(point, polygon)
  21. //判断点是否多边形内
  22. //BMapLib.GeoUtils.isPointInRect(point, bounds)
  23. //判断点是否在矩形内
  24. //BMapLib.GeoUtils.isPointOnPolyline(point, polyline)
  25. //判断点是否在折线上
  26. //BMapLib.GeoUtils.radToDegree(Number)
  27. //将弧度转化为度
  28. /**
  29. * @namespace BMap的所有library类均放在BMapLib命名空间下
  30. */
  31. var BMapLib = window.BMapLib = BMapLib || {};
  32. (function () {
  33. /**
  34. * 地球半径
  35. */
  36. var EARTHRADIUS = 6370996.81;
  37. /**
  38. * @exports GeoUtils as BMapLib.GeoUtils
  39. */
  40. var GeoUtils =
  41. /**
  42. * GeoUtils类，静态类，勿需实例化即可使用
  43. * @class GeoUtils类的<b>入口</b>。
  44. * 该类提供的都是静态方法，勿需实例化即可使用。
  45. */
  46. BMapLib.GeoUtils = function () {
  47. }
  48. /**
  49. * 判断点是否在矩形内
  50. * @param {Point} point 点对象
  51. * @param {Bounds} bounds 矩形边界对象
  52. * @returns {Boolean} 点在矩形内返回true,否则返回false
  53. */
  54. GeoUtils.isPointInRect = function (point, bounds) {
  55. //检查类型是否正确
  56. if (!(point instanceof BMap.Point) ||
  57. !(bounds instanceof BMap.Bounds)) {
  58. return false;
  59. }
  60. var sw = bounds.getSouthWest(); //西南脚点
  61. var ne = bounds.getNorthEast(); //东北脚点
  62. return (point.lng >= sw.lng && point.lng <= ne.lng && point.lat >= sw.lat && point.lat <= ne.lat);
  63. }
  64. /**
  65. * 判断点是否在圆形内
  66. * @param {Point} point 点对象
  67. * @param {Circle} circle 圆形对象
  68. * @returns {Boolean} 点在圆形内返回true,否则返回false
  69. */
  70. GeoUtils.isPointInCircle = function (point, circle) {
  71. //检查类型是否正确
  72. if (!(point instanceof BMap.Point) ||
  73. !(circle instanceof BMap.Circle)) {
  74. return false;
  75. }
  76. //point与圆心距离小于圆形半径，则点在圆内，否则在圆外
  77. var c = circle.getCenter();
  78. var r = circle.getRadius();
  79. var dis = GeoUtils.getDistance(point, c);
  80. if (dis <= r) {
  81. return true;
  82. } else {
  83. return false;
  84. }
  85. }
  86. /**
  87. * 判断点是否在折线上
  88. * @param {Point} point 点对象
  89. * @param {Polyline} polyline 折线对象
  90. * @returns {Boolean} 点在折线上返回true,否则返回false
  91. */
  92. GeoUtils.isPointOnPolyline = function (point, polyline) {
  93. //检查类型
  94. if (!(point instanceof BMap.Point) ||
  95. !(polyline instanceof BMap.Polyline)) {
  96. return false;
  97. }
  98. //首先判断点是否在线的外包矩形内，如果在，则进一步判断，否则返回false
  99. var lineBounds = polyline.getBounds();
  100. if (!this.isPointInRect(point, lineBounds)) {
  101. return false;
  102. }
  103. //判断点是否在线段上，设点为Q，线段为P1P2 ，
  104. //判断点Q在该线段上的依据是：( Q - P1 ) × ( P2 - P1 ) = 0，且 Q 在以 P1，P2为对角顶点的矩形内
  105. var pts = polyline.getPath();
  106. for (var i = 0; i < pts.length - 1; i++) {
  107. var curPt = pts[i];
  108. var nextPt = pts[i + 1];
  109. //首先判断point是否在curPt和nextPt之间，即：此判断该点是否在该线段的外包矩形内
  110. if (point.lng >= Math.min(curPt.lng, nextPt.lng) && point.lng <= Math.max(curPt.lng, nextPt.lng) &&
  111. point.lat >= Math.min(curPt.lat, nextPt.lat) && point.lat <= Math.max(curPt.lat, nextPt.lat)) {
  112. //判断点是否在直线上公式
  113. var precision = (curPt.lng - point.lng) * (nextPt.lat - point.lat) - (nextPt.lng - point.lng) * (curPt.lat - point.lat);
  114. if (precision < 2e-10 && precision > -2e-10) {//实质判断是否接近0
  115. return true;
  116. }
  117. }
  118. }
  119. return false;
  120. }
  121. /**
  122. * 判断点是否多边形内
  123. * @param {Point} point 点对象
  124. * @param {Polyline} polygon 多边形对象
  125. * @returns {Boolean} 点在多边形内返回true,否则返回false
  126. */
  127. GeoUtils.isPointInPolygon = function (point, polygon) {
  128. //检查类型
  129. if (!(point instanceof BMap.Point) ||
  130. !(polygon instanceof BMap.Polygon)) {
  131. return false;
  132. }
  133. //首先判断点是否在多边形的外包矩形内，如果在，则进一步判断，否则返回false
  134. var polygonBounds = polygon.getBounds();
  135. if (!this.isPointInRect(point, polygonBounds)) {
  136. return false;
  137. }
  138. var pts = polygon.getPath(); //获取多边形点
  139. //下述代码来源：http://paulbourke.net/geometry/insidepoly/，进行了部分修改
  140. //基本思想是利用射线法，计算射线与多边形各边的交点，如果是偶数，则点在多边形外，否则
  141. //在多边形内。还会考虑一些特殊情况，如点在多边形顶点上，点在多边形边上等特殊情况。
  142. var N = pts.length;
  143. var boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
  144. var intersectCount = 0; //cross points count of x
  145. var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
  146. var p1, p2; //neighbour bound vertices
  147. var p = point; //测试点
  148. p1 = pts[0]; //left vertex
  149. for (var i = 1; i <= N; ++i) {//check all rays
  150. if (p.equals(p1)) {
  151. return boundOrVertex; //p is an vertex
  152. }
  153. p2 = pts[i % N]; //right vertex
  154. if (p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) {//ray is outside of our interests
  155. p1 = p2;
  156. continue; //next ray left point
  157. }
  158. if (p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) {//ray is crossing over by the algorithm (common part of)
  159. if (p.lng <= Math.max(p1.lng, p2.lng)) {//x is before of ray
  160. if (p1.lat == p2.lat && p.lng >= Math.min(p1.lng, p2.lng)) {//overlies on a horizontal ray
  161. return boundOrVertex;
  162. }
  163. if (p1.lng == p2.lng) {//ray is vertical
  164. if (p1.lng == p.lng) {//overlies on a vertical ray
  165. return boundOrVertex;
  166. } else {//before ray
  167. ++intersectCount;
  168. }
  169. } else {//cross point on the left side
  170. var xinters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng; //cross point of lng
  171. if (Math.abs(p.lng - xinters) < precision) {//overlies on a ray
  172. return boundOrVertex;
  173. }
  174. if (p.lng < xinters) {//before ray
  175. ++intersectCount;
  176. }
  177. }
  178. }
  179. } else {//special case when ray is crossing through the vertex
  180. if (p.lat == p2.lat && p.lng <= p2.lng) {//p crossing over p2
  181. var p3 = pts[(i + 1) % N]; //next vertex
  182. if (p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat)) {//p.lat lies between p1.lat & p3.lat
  183. ++intersectCount;
  184. } else {
  185. intersectCount += 2;
  186. }
  187. }
  188. }
  189. p1 = p2; //next ray left point
  190. }
  191. if (intersectCount % 2 == 0) {//偶数在多边形外
  192. return false;
  193. } else { //奇数在多边形内
  194. return true;
  195. }
  196. }
  197. /**
  198. * 将度转化为弧度
  199. * @param {degree} Number 度
  200. * @returns {Number} 弧度
  201. */
  202. GeoUtils.degreeToRad = function (degree) {
  203. return Math.PI * degree / 180;
  204. }
  205. /**
  206. * 将弧度转化为度
  207. * @param {radian} Number 弧度
  208. * @returns {Number} 度
  209. */
  210. GeoUtils.radToDegree = function (rad) {
  211. return (180 * rad) / Math.PI;
  212. }
  213. /**
  214. * 将v值限定在a,b之间，纬度使用
  215. */
  216. function _getRange(v, a, b) {
  217. if (a != null) {
  218. v = Math.max(v, a);
  219. }
  220. if (b != null) {
  221. v = Math.min(v, b);
  222. }
  223. return v;
  224. }
  225. /**
  226. * 将v值限定在a,b之间，经度使用
  227. */
  228. function _getLoop(v, a, b) {
  229. while (v > b) {
  230. v -= b - a
  231. }
  232. while (v < a) {
  233. v += b - a
  234. }
  235. return v;
  236. }
  237. /**
  238. * 计算两点之间的距离,两点坐标必须为经纬度
  239. * @param {point1} Point 点对象
  240. * @param {point2} Point 点对象
  241. * @returns {Number} 两点之间距离，单位为米
  242. */
  243. GeoUtils.getDistance = function (point1, point2) {
  244. //判断类型
  245. if (!(point1 instanceof BMap.Point) ||
  246. !(point2 instanceof BMap.Point)) {
  247. return 0;
  248. }
  249. point1.lng = _getLoop(point1.lng, -180, 180);
  250. point1.lat = _getRange(point1.lat, -74, 74);
  251. point2.lng = _getLoop(point2.lng, -180, 180);
  252. point2.lat = _getRange(point2.lat, -74, 74);
  253. var x1, x2, y1, y2;
  254. x1 = GeoUtils.degreeToRad(point1.lng);
  255. y1 = GeoUtils.degreeToRad(point1.lat);
  256. x2 = GeoUtils.degreeToRad(point2.lng);
  257. y2 = GeoUtils.degreeToRad(point2.lat);
  258. return EARTHRADIUS * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));
  259. }
  260. /**
  261. * 计算折线或者点数组的长度
  262. * @param {Polyline|Array<Point>} polyline 折线对象或者点数组
  263. * @returns {Number} 折线或点数组对应的长度
  264. */
  265. GeoUtils.getPolylineDistance = function (polyline) {
  266. //检查类型
  267. if (polyline instanceof BMap.Polyline ||
  268. polyline instanceof Array) {
  269. //将polyline统一为数组
  270. var pts;
  271. if (polyline instanceof BMap.Polyline) {
  272. pts = polyline.getPath();
  273. } else {
  274. pts = polyline;
  275. }
  276. if (pts.length < 2) {//小于2个点，返回0
  277. return 0;
  278. }
  279. //遍历所有线段将其相加，计算整条线段的长度
  280. var totalDis = 0;
  281. for (var i = 0; i < pts.length - 1; i++) {
  282. var curPt = pts[i];
  283. var nextPt = pts[i + 1]
  284. var dis = GeoUtils.getDistance(curPt, nextPt);
  285. totalDis += dis;
  286. }
  287. return totalDis;
  288. } else {
  289. return 0;
  290. }
  291. }
  292. /**
  293. * 计算多边形面或点数组构建图形的面积,注意：坐标类型只能是经纬
  294. 度，且不适合计算自相交多边形的面积
  295. * @param {Polygon|Array<Point>} polygon 多边形面对象或者点数
  296. 组
  297. * @returns {Number} 多边形面或点数组构成图形的面积
  298. */
  299. GeoUtils.getPolygonArea = function (polygon) {
  300. //检查类型
  301. if (!(polygon instanceof BMap.Polygon) &&
  302. !(polygon instanceof Array)) {
  303. return 0;
  304. }
  305. var pts;
  306. if (polygon instanceof BMap.Polygon) {
  307. pts = polygon.getPath();
  308. } else {
  309. pts = polygon;
  310. }
  311. if (pts.length < 3) {//小于3个顶点，不能构建面
  312. return 0;
  313. }
  314. var totalArea = 0; //初始化总面积
  315. var LowX = 0.0;
  316. var LowY = 0.0;
  317. var MiddleX = 0.0;
  318. var MiddleY = 0.0;
  319. var HighX = 0.0;
  320. var HighY = 0.0;
  321. var AM = 0.0;
  322. var BM = 0.0;
  323. var CM = 0.0;
  324. var AL = 0.0;
  325. var BL = 0.0;
  326. var CL = 0.0;
  327. var AH = 0.0;
  328. var BH = 0.0;
  329. var CH = 0.0;
  330. var CoefficientL = 0.0;
  331. var CoefficientH = 0.0;
  332. var ALtangent = 0.0;
  333. var BLtangent = 0.0;
  334. var CLtangent = 0.0;
  335. var AHtangent = 0.0;
  336. var BHtangent = 0.0;
  337. var CHtangent = 0.0;
  338. var ANormalLine = 0.0;
  339. var BNormalLine = 0.0;
  340. var CNormalLine = 0.0;
  341. var OrientationValue = 0.0;
  342. var AngleCos = 0.0;
  343. var Sum1 = 0.0;
  344. var Sum2 = 0.0;
  345. var Count2 = 0;
  346. var Count1 = 0;
  347. var Sum = 0.0;
  348. var Radius = EARTHRADIUS; //6378137.0,WGS84椭球半径
  349. var Count = pts.length;
  350. for (var i = 0; i < Count; i++) {
  351. if (i == 0) {
  352. LowX = pts[Count - 1].lng * Math.PI / 180;
  353. LowY = pts[Count - 1].lat * Math.PI / 180;
  354. MiddleX = pts[0].lng * Math.PI / 180;
  355. MiddleY = pts[0].lat * Math.PI / 180;
  356. HighX = pts[1].lng * Math.PI / 180;
  357. HighY = pts[1].lat * Math.PI / 180;
  358. }
  359. else if (i == Count - 1) {
  360. LowX = pts[Count - 2].lng * Math.PI / 180;
  361. LowY = pts[Count - 2].lat * Math.PI / 180;
  362. MiddleX = pts[Count - 1].lng * Math.PI / 180;
  363. MiddleY = pts[Count - 1].lat * Math.PI / 180;
  364. HighX = pts[0].lng * Math.PI / 180;
  365. HighY = pts[0].lat * Math.PI / 180;
  366. }
  367. else {
  368. LowX = pts[i - 1].lng * Math.PI / 180;
  369. LowY = pts[i - 1].lat * Math.PI / 180;
  370. MiddleX = pts[i].lng * Math.PI / 180;
  371. MiddleY = pts[i].lat * Math.PI / 180;
  372. HighX = pts[i + 1].lng * Math.PI / 180;
  373. HighY = pts[i + 1].lat * Math.PI / 180;
  374. }
  375. AM = Math.cos(MiddleY) * Math.cos(MiddleX);
  376. BM = Math.cos(MiddleY) * Math.sin(MiddleX);
  377. CM = Math.sin(MiddleY);
  378. AL = Math.cos(LowY) * Math.cos(LowX);
  379. BL = Math.cos(LowY) * Math.sin(LowX);
  380. CL = Math.sin(LowY);
  381. AH = Math.cos(HighY) * Math.cos(HighX);
  382. BH = Math.cos(HighY) * Math.sin(HighX);
  383. CH = Math.sin(HighY);
  384. CoefficientL = (AM * AM + BM * BM + CM * CM) / (AM * AL + BM * BL + CM * CL);
  385. CoefficientH = (AM * AM + BM * BM + CM * CM) / (AM * AH + BM * BH + CM * CH);
  386. ALtangent = CoefficientL * AL - AM;
  387. BLtangent = CoefficientL * BL - BM;
  388. CLtangent = CoefficientL * CL - CM;
  389. AHtangent = CoefficientH * AH - AM;
  390. BHtangent = CoefficientH * BH - BM;
  391. CHtangent = CoefficientH * CH - CM;
  392. AngleCos = (AHtangent * ALtangent + BHtangent * BLtangent + CHtangent * CLtangent) / (Math.sqrt(AHtangent * AHtangent + BHtangent * BHtangent + CHtangent * CHtangent) * Math.sqrt(ALtangent * ALtangent + BLtangent * BLtangent + CLtangent * CLtangent));
  393. AngleCos = Math.acos(AngleCos);
  394. ANormalLine = BHtangent * CLtangent - CHtangent * BLtangent;
  395. BNormalLine = 0 - (AHtangent * CLtangent - CHtangent * ALtangent);
  396. CNormalLine = AHtangent * BLtangent - BHtangent * ALtangent;
  397. if (AM != 0)
  398. OrientationValue = ANormalLine / AM;
  399. else if (BM != 0)
  400. OrientationValue = BNormalLine / BM;
  401. else
  402. OrientationValue = CNormalLine / CM;
  403. if (OrientationValue > 0) {
  404. Sum1 += AngleCos;
  405. Count1++;
  406. }
  407. else {
  408. Sum2 += AngleCos;
  409. Count2++;
  410. }
  411. }
  412. var tempSum1, tempSum2;
  413. tempSum1 = Sum1 + (2 * Math.PI * Count2 - Sum2);
  414. tempSum2 = (2 * Math.PI * Count1 - Sum1) + Sum2;
  415. if (Sum1 > Sum2) {
  416. if ((tempSum1 - (Count - 2) * Math.PI) < 1)
  417. Sum = tempSum1;
  418. else
  419. Sum = tempSum2;
  420. }
  421. else {
  422. if ((tempSum2 - (Count - 2) * Math.PI) < 1)
  423. Sum = tempSum2;
  424. else
  425. Sum = tempSum1;
  426. }
  427. totalArea = (Sum - (Count - 2) * Math.PI) * Radius * Radius;
  428. return totalArea; //返回总面积
  429. }
  430. })(); //闭包结束

注意：

BMapLib.GeoUtils.getPolygonArea(polygon)  不适合计算自相交多边形的面积(封闭的面积)

时间： 2024-10-16 04:16:13

百度地图API画多边型，测面积的相关文章

百度地图API开发一——仿照现有测距实现测量面积功能

  最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包--BMapLib.DistanceTool,效果如下: 这个效果体验很好:测量面积也给出了开源javascript包--BMapLib.DrawingManger,如下: 但这个效果和体验就很差了.客户希望测量面积能实现和测距一样的效果体验(鼠标在移动绘制过程中实时显示绘制面积,且样式效果要一样),经过一番折腾,修改了百度测距的javascript包,终于搞定.先上效果

吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 地图界面: ZMap.js 部分代码说明 /** * 百度地图 api 功能整合 * @author Glo

百度地图多边形画区域、获取节点经纬度坐标、判断某一点是否在此区域内

创建可绘画map: 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 7 <meta name=&

百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面预览 本界面项目由:

百度地图API

本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章.1.打开链接http://developer.baidu.com/map/jshome.htm  这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JAVASCRIPT进行介绍.  即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用c

百度地图API相关点

百度API接口:http://developer.baidu.com/map/jsdemo.htm#a1_1 百度地图API具体解释之地图标注:http://www.cnblogs.com/jz1108/archive/2011/09/15/2152122.html [百度地图API]自行获取区域经纬度的工具:http://www.cnblogs.com/milkmap/archive/2012/02/23/2365064.html 酸奶小妹地图系统博客:http://www.cnblogs.c

乐卡上海网点地图制作心得 | 百度地图API使用心得

前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡.在搜寻过程中,萌生了制作一张基于那些地址的专门戳点地图的想法.期间也看到蚂蚁家制作的北京乐卡地图使用的是百度地图API,但是该网页仅能运行于PC端,手机打开巨卡.刚好我的github博客站最近配置完成了,准备自己也写一个. 材料单 百度开放平台账号一个 百度开放平台浏览器端启用了Javascrip

百度地图API位置偏移的校准算法

转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过.第一次使用百度地图api获取位置并在地图上显示是在微信开发的时候,那是不知道具体原因无奈在微信获取的地理位置上加了一个偏移量进行校准,虽能勉强解决,但是不太准确.后来在安卓开始也同样遇到了这个问题,才发现百度地图API定位偏移已经不是一个偶然问题了. 百度地图API定位偏移的原因 以下来自互联网:

百度地图api描绘车辆历史轨迹图

最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能 一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起点和终点的图标,但是需要要求只有第一个点和最后一个点是起点和终点,中间的全是小车的图案 我画点的功能是为了覆盖掉 search连线的起始点,但是覆盖后悬浮弹出层会出现问题,所以我就写把存放起点和终点的层去掉, 但是地图渲染时需要时间的,我采取了2秒后执行,把存放起点和终点icon的div清空了,这样