文档章节

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

我不说话
 我不说话
发布于 2014/06/05 17:02
字数 408
阅读 812
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内存模型是怎么解决缓存一致性的?

在再有人问你Java内存模型是什么,就把这篇文章发给他。这篇文章中,我们介绍过关于Java内容模型的来龙去脉。 我们在文章中提到过,由于CPU和主存的处理速度上存在一定差别,为了匹配这种差距...

Java填坑之路
18分钟前
1
0
vue-cli 3.0 初体验

最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。 安装步骤: 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-...

tianyawhl
20分钟前
0
0
Angular进阶之路

【初级】会写页面,能出东西。 给定环境和 rest API,不用第三方库,能在十分钟内完成一个 master/detail 结构的带路由的应用(可以不管美观)。 知识点:Angular CLI、组件、路由、HTTP 服务...

陆小七的主页
22分钟前
0
0
Redis缓存数据库安全加固指导(一)

背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一位,但是原生...

中间件小哥
22分钟前
0
0
百万级数据mysql分区

1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分。从逻辑上看,只有一张表,但是底层却是由多个物理分区组成。 2. 表分区与分表的区别 分表...

罗文浩
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部