文档章节

js map 获得某一路径(任意坐标组合数组)上,n个均匀分布的坐标点

我不说话
 我不说话
发布于 2014/06/05 17:02
字数 408
阅读 826
收藏 2

直接上代码:

/**
 * example: 
 * var map_route = new MapRoute({
 *	    x_alias : 'lon',
 *	    y_alias : 'lat',
 *	    parsePoint : function(x, y){
 *		    return new OpenLayers.LonLat(x, y);
 *	    }
 * });
 * map_route.abtainEvenPoint([......], 3);
 * 
 * @param option
 * @returns
 */
function MapRoute(options){
	
	this.x_alias = options.x_alias;
	this.y_alias = options.y_alias;
	
	this.parsePoint = options.parsePoint || function(x, y){
		return {
			x:x,
			y:y
		};
	};
}

/**
 * 获得路径上均匀分布的点
 */
MapRoute.prototype.abtainEvenPoint = function(route_arr, count){
	var arr = [];
	if(count < 1 || route_arr.length < 2){
		return arr;
	}
	arr.push(route_arr[0]);
	if(count > 2){
		var totalLength = 0;
		for ( var int = 1; int < route_arr.length; int++) {
			totalLength += this.twoPointLength(route_arr[int-1], route_arr[int]);
		}
		var evenLength = totalLength/(count-1);
		
		var iterator = this.getIteratorPoint(route_arr);
		var current_length = 0;
		var sanjiao_length = evenLength;
		var startLonLat = null;
		for ( var int2 = 0; int2 < count-2; int2++) {
			if(current_length - sanjiao_length < 0){
				sanjiao_length -= current_length;
				if(iterator.hasNextTwoPoint()){
					current_length = iterator.nextTwoPointLength();
					if(current_length - sanjiao_length < 0){
						int2 --;
						continue;
					}
					startLonLat = iterator.getCurrentPoint();
				}else{
					break;
				}
			}else{
				startLonLat = arr[arr.length-1];
			}
			current_length -= sanjiao_length;
			arr.push(this.getPoint(startLonLat, iterator.getNextPoint(), sanjiao_length));
			sanjiao_length = evenLength;
		}
		
		arr.push(route_arr[route_arr.length-1]);
	}else if(count == 2){
		arr.push(route_arr[route_arr.length-1]);
	}
	
	return arr;
};
/**
 * 得到起始点到结束点直线上,距离起始点length远的点
 */
MapRoute.prototype.getPoint = function(start, end, length){
	var to_right = end[this.x_alias] - start[this.x_alias] > 0 ? true : false;
	var to_top = end[this.y_alias] - start[this.y_alias] > 0 ? true : false;
	
	var x,y,totalLength = 0;
	x = Math.abs(end[this.x_alias] - start[this.x_alias]);
	y = Math.abs(end[this.y_alias] - start[this.y_alias]);
	totalLength += Math.sqrt(x*x+y*y);
	
	var new_x, new_y;
	if(to_right){
		new_x = start[this.x_alias]+length*x/totalLength;
	}else{
		new_x = start[this.x_alias]-length*x/totalLength;
	}
	if(to_top){
		new_y = start[this.y_alias]+length*y/totalLength;
	}else{
		new_y = start[this.y_alias]-length*y/totalLength;
	}
	
	return this.parsePoint(new_x, new_y);
};
/**
 * 2个坐标点之间直线距离
 */
MapRoute.prototype.twoPointLength = function(start, end){
	var x,y,totalLength = 0;
	x = Math.abs(end[this.x_alias] - start[this.x_alias]);
	y = Math.abs(end[this.y_alias] - start[this.y_alias]);
	totalLength += Math.sqrt(x*x+y*y);
	return totalLength;
};
MapRoute.prototype.getIteratorPoint = function(arr){
	var the = this;
	function IteratorPoint(arr){
		this.arr = arr;
		this.current_index = -1;
	};
	IteratorPoint.prototype.hasNextTwoPoint = function(){
		if(this.current_index+2 > this.arr.length-1){
			return false;
		}
		return true;
	};
	IteratorPoint.prototype.nextTwoPointLength = function(){
		if(!this.hasNextTwoPoint()){
			return -1;
		}
		this.current_index ++;
		var end = this.arr[this.current_index+1];
		var start = this.arr[this.current_index];
		
		return the.twoPointLength(start, end);
	};
	IteratorPoint.prototype.getCurrentPoint = function(){
		return this.arr[this.current_index];
	};
	IteratorPoint.prototype.getNextPoint = function(){
		return this.arr[this.current_index+1];
	};
	
	return new IteratorPoint(arr);
};

如有出入,欢迎指正……

© 著作权归作者所有

共有 人打赏支持
我不说话
粉丝 10
博文 6
码字总数 1808
作品 0
济南
技术主管
百度地图API显示多个标注点并添加百度样式检索窗口

<%@ page language="java" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"......

zhwj407906450
2014/12/31
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
JavaScript基础语法,对象,正则表达式

一.JavaScript基础语法 1.基础语法 2.函数 3.常见对话框 4.html引入js文件 二.JavaScript对象 1.prototype属性扩展类的属性和方法,以及实现类的继承 2.内置对象 3.document对象 4.window对象...

青衫无名
06/01
0
0
强大的矢量图形库:Raphael JS 中文帮助文档及教程

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线...

李朝强
2013/10/24
0
1
JS原生系列-DOM篇(扩展)

继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍: 3.最后做几个网页实例! 4.ajax的介绍:ajax输出json格式文件 js...

透笔度
2015/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

腾讯投资最高1.75亿美元正式进军菲律宾移动支付市场

菲律宾长途电话公司(PLDT)公司今日宣布,中国互联网巨头腾讯和私募股权公司KKR将获得该公司旗下金融科技公司Voyager Innovations的少数股权。 PLDT在一份声明中称:“腾讯和KKR最多将分别收...

linuxCool
23分钟前
2
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 正则介绍 正则就是一串有规律的字符...

hhpuppy
34分钟前
1
0
J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接

一直以来 J2Cache 都是使用 Jedis 连接 Redis 服务的。Jedis 是一个很老牌的 Redis 的 Java 开发包,使用很稳定,作者维护很勤勉,社区上能搜到的文章也非常非常多。算是使用范围最广的 Redi...

红薯
今天
12
0
一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
今天
1
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部