`
feirou520
  • 浏览: 118683 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

Draw rect and round with google map

阅读更多

The topic is to dicuss how to draw rect and round under google map java-script. As we know, there are many resource about the two items. But``` it seems that most of them are written by google map v2. So we do this job with google map v3 as follow:

1. Drawing rect:
(1) Rule: It is simple to follow the sample "Bermuda Triangle", which is from google map v3 guide: http://code.google.com/intl/zh-CN/apis/maps/documentation/v3/overlays.html#Polygons

(2) Our sample source:

var rectRegion;
// parameter: rect cornerA(base pos): lng1/lat1; cornerB(mouse pos): lng2/lat2
// type: 0x00: refresh(default); 0x01: add rect and set center of map
function drawSingleRect(lng1, lat1, lng2, lat2, type) {
 if(type == 0) {
  if(rectRegion)
   rectRegion.setMap(null); 
 }
 else if(type == 1) {
  latlng = new google.maps.LatLng(lat1, lng1);
  map.setZoom(16);
  map.setCenter(latlng);
 }

 var rectCoords = [
  new google.maps.LatLng(lat1, lng1),
  new google.maps.LatLng(lat1, lng2),
  new google.maps.LatLng(lat2, lng2),
  new google.maps.LatLng(lat2, lng1),
  new google.maps.LatLng(lat1, lng1)
 ];

 rectRegion = new google.maps.Polygon({
  paths: rectCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
 });

 rectRegion.setMap(map);
}

(3) Realizing:

sample1.jpg

2. Drawing circle:
(1) Rule:
The round is polyron also. If we calc enough points at the circle, then we can build the "circle" polyron. And we found the math rule with center lng/lat and radius from: http://maps.forum.nu/gm_sensitive_circle2.html , whose author is Marcelo Montagna. At fact, Marcelo's code run some slowly because of many sin/cos/atan and so on? Then we do little modification for quick it.
The other item is how to read the radius between two marker. The excellent job we found is from: http://www.barattalo.it/2009/12/19/ruler-for-google-maps-v3-to-measure-distance-on-map/ , the author is Giulio Pons. With Giulio's source we built a ruler also.

(2) Our sample Source:
Like the drawing rect, we simulate the paths parameter of polygon, which is the marker array calced by Marcelo's rule, then do setMap(). Everything seems ok.

var roundRegion;
// parameter: center pos: lng1/lat1; mouse pos: lng2/lat2
// type: 0x00: refresh(default); 0x01: add round and set center of map
function drawSingleRound(lng1, lat1, lng2, lat2, type) {

 radius = distance(lat1, lng1, lat2, lng2); // unit: m
 drawSingleRoundwithRadius(lng1, lat1, radius, type);
}

function drawSingleRoundwithRadius(lng1, lat1, radius, type) {
 if(type == 0) {
  if(roundRegion)
   roundRegion.setMap(null); 
 }
 else if(type == 1) {
  latlng = new google.maps.LatLng(lat1, lng1);
  map.setZoom(16);
  map.setCenter(latlng);
 }
 
 var d = radius/6378800;
 var roundCoords = [];

 var bequick1 = Math.PI/180;
 var bequick2 = 180/Math.PI;
 lat1 = bequick1* lat1;
 lng1 = bequick1* lng1;
 var bequick3 = Math.sin(lat1);
 var bequick4 = Math.cos(lat1);
 var bequick5 = Math.sin(d);
 var bequick6 = Math.cos(d);
 for (var a = 0 ; a < 361 ; a++) {
  var tc = bequick1*a;
  var y = Math.asin(bequick3*bequick6+bequick4*bequick5*Math.cos(tc));
  var dlng = Math.atan2(Math.sin(tc)*bequick5*bequick4, bequick6-bequick3*Math.sin(y));
  var x = ((lng1-dlng+Math.PI) % (2*Math.PI)) - Math.PI ; // MOD function
  var point = new google.maps.LatLng(parseFloat(y*bequick2), parseFloat(x*bequick2));
  roundCoords.push(point);
 }

 roundRegion = new google.maps.Polygon({
  paths: roundCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
 });

 roundRegion.setMap(map);
}

// return delta with unit meter
function distance(lat1,lon1,lat2,lon2) {
 var R = 6371; // km (change this constant to get miles)
 var dLat = (lat2-lat1) * Math.PI / 180;
 var dLon = (lon2-lon1) * Math.PI / 180;
 var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
  Math.sin(dLon/2) * Math.sin(dLon/2);
 var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
 var d = R * c;
 //if (d>1) return Math.round(d)+"km";
 //else if (d<=1) return Math.round(d*1000)+"m";
 if (d>1) return Math.round(d)*1000;
 else if (d<=1) return Math.round(d*1000);
 //return d;
}

(3) Realizing:

sample2.jpg
分享到:
评论

相关推荐

    draw rect实现的圆形进度条

    本案例中,"draw rect实现的圆形进度条"是一个由zhouxing5311开发的开源项目,名为ZZCircleProgress。这个项目利用了Core Graphics框架中的`drawRect:`方法来绘制一个可定制的圆形进度条,它允许开发者自由地调整...

    Python.Pyxel.Draw.Rect.20200331084747:矩形を描画する

    Pyxel.Draw.Rect矩形を描画する。演示特徴行7行!开発环境2020-03-30 4 Model B Rev 1.2 Buster 10.0 2019-09-26bash 5.0.3(1)-发布的Python 3.8.2 1.3.1$ uname -aLinux raspberrypi 4.19.97-v7l+ # 1294 SMP Thu...

    rectbox_rectbox_decidevm6_matlab矩形绘图_绘图_matlab_

    标题提到的"rectbox_rectbox_decidevm6_matlab矩形绘图_绘图_matlab_"是关于如何在MATLAB中自定义绘制矩形的专题。描述中指出,MATLAB内置的`annotation`函数虽然强大,但不直接支持通过指定矩形的精确x、y坐标来...

    Rect类的使用

    在计算机编程,尤其是在图形处理和游戏开发领域,`Rect` 类是一个常见的概念,它通常用于表示二维空间中的一个矩形区域。在许多编程语言和库中,如C++的`SDL`库、Python的`pygame`库或者Unity引擎中,都有`Rect`类的...

    Android canvas drawBitmap方法详解及实例

    `drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)`是`drawBitmap()`方法的一个重载版本,其参数含义如下: 1. **Bitmap bitmap**: 这是你要绘制的位图对象,通常是从资源文件、内存缓存或者直接创建的...

    Recton v2.0

    "Recton v2.0" 是一款专为IT行业设计的远程管理和监控工具,它集成了多种功能,旨在提升用户对远程设备的控制能力。在描述中提到的“种植”可能是指软件的安装和配置过程,暗示Recton具有便捷的远程部署特性。以下是...

    一维rect函数的matlab程序

    一维rect函数的matlab程序 可以为初学者提供一定的参考

    GDI+丰富RECT

    标题中的“GDI+丰富RECT”指的是在Windows编程中,使用GDI+图形设备接口(Graphics Device Interface Plus)扩展和操作RECT结构的过程。GDI+是Microsoft为Windows应用程序提供的一种强大的2D图形处理库,它提供了比...

    Recton V2.5(远程控制)

    Recton V2.5是一款远程控制软件,它允许用户通过网络连接远程操作另一台计算机,实现设备间的跨距离协作和管理。在IT行业中,远程控制技术具有广泛的应用,包括技术支持、远程办公、系统管理等场景。 远程控制软件...

    前端开源库-rect-mix

    【前端开源库-rect-mix】是一个专注于前端开发的开源项目,它的主要功能是实现矩形的混合与插入操作。这个库特别适用于那些需要在Web应用中处理图形、布局或者进行交互式设计的开发者。在现代Web开发中,对图形的...

    rect_test.zip_it_rect matlab_rect function

    It is just exerciseing of signal processing. ( Rect function, Convolution, etc. ) ( making tri-functioin(: rect * rect) and performing FFT ),

    c# Draw 函数 用法

    在C#编程中,`Draw`函数是用于在图形用户界面(GUI)上绘制各种元素的重要方法,尤其在Windows Forms和WPF应用中。本文将详细介绍`Draw`函数的使用,以及与之相关的绘图概念和技术,非常适合初学者学习。 首先,`...

    Recton2.5远控

    "Recton2.5远控"是一款远程控制软件,它允许用户通过网络对另一台计算机进行操作和管理。远程控制软件在IT行业中有着广泛的应用,例如远程技术支持、远程办公、远程教育等场景。Recton v2.5作为该软件的一个版本,...

    前端开源库-rect-crop

    **前端开源库 rect-crop 知识点详解** 在当今的Web开发中,前端技术日新月异,各种开源库层出不穷,为开发者提供了极大的便利。其中,“rect-crop”是一个专注于矩形裁剪的前端开源库,它允许用户在视区中按照特定...

    前端开源库-rect-clamp

    "rect-clamp"就是这样一款专为前端开发者设计的开源库,它主要用于矩形约束,确保一个矩形在变换时仍能保持其原始比例,并将其限制在一个指定的矩形区域内。 该库的核心功能是对矩形进行"夹钳"操作,即在不失真的...

    Recton2 和Ntscan

    Recton2 Ntscan Recton2 Ntscan

    知识共享-Android_开发Rect(雷惊风).

    ### Android开发中的Rect应用详解 #### 一、引言 在Android开发中,绘图是一项基本且重要的功能。本文将详细介绍如何使用`Rect`类在Android应用中进行绘图操作,包括绘制实心矩形、空心矩形、文本以及图片等元素。...

    recton3.0.rar

    "recton3.0.rar" 是一个压缩包文件,很可能包含了一个名为 "recton3.0" 的软件的安装程序或文件集合。由于描述中提到“自己下载一个软件 自己下载”,这暗示了该文件可能是用户为了个人使用而分享的一个软件版本,...

    IntRect.rar_intrect

    在本压缩包"IntRect.rar_intrect"中,我们关注的是一个名为"IntRect"的特定模块,它是QT库在处理矩形整数坐标时的一个工具。下面我们将深入探讨这个"IntRect"类及其在QT中的应用。 "IntRect"通常代表一个矩形区域,...

Global site tag (gtag.js) - Google Analytics