天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件

前面几篇文章主要是讲了加载天地图、在天地点上循环加载标注点并给标注点添加事件、根据标注点坐标确定地图的显示范围、在天地图显示坐标轨迹以及在天地图上画多边形，电子范围。

本文再讲一点复杂操作。

1.在地图上展示一些标注点，这些标注点两两相连。在线与不在线是两种不同颜色的图标。

2.如果标注点之间距离大于60千米，用红色虚线连接。如果标注点之间的距离小于60千米刚用蓝色虚线连接。

3.点击线条，在两个标注点显示两个标注点的距离，将两个点用实线连接。并且给相连的两个标注点大图标来表示，大图标也根据在线不在线使用不同的颜色。点击此标注点的时候，其他标注点恢复原状。

4.输入起点和终点，地图上连接两个点，并用实线连接两个点，两个点的图标用比较醒目的图标。

步骤：

1.准备数据。

点数据：

[javascript] view plaincopy

//标注点数据
var lnglats = [
{"B":"23.2","L":"113.4","PName":"2222","Status":1},
{"B":"23.7","L":"113.8","PName":"第四个点","Status":0},
{"B":"23.1","L":"113.7","PName":"7777","Status":1},
{"B":"23.5","L":"113.3","PName":"8888","Status":1}];

让标注点两两相连。线条数据。这里手工添，也可以写个函数来生成。注意这里数据的组织。

[javascript] view plaincopy

//两两相连的数据。第一个点和第二个点是一条线。第三个点和第四个点是一条线……依次类推
var LinePoints = [
{"B":"23.2","L":"113.4","PName":"2222","Status":1},
{"B":"23.7","L":"113.8","PName":"第四个点","Status":1},
{"B":"23.2","L":"113.4","PName":"2222","Status":1},
{"B":"23.1","L":"113.7","PName":"7777","Status":1},
{"B":"23.2","L":"113.4","PName":"2222","Status":1},
{"B":"23.5","L":"113.3","PName":"8888","Status":1},
{"B":"23.7","L":"113.8","PName":"第四个点","Status":1},
{"B":"23.1","L":"113.7","PName":"7777","Status":1},
{"B":"23.7","L":"113.8","PName":"第四个点","Status":1},
{"B":"23.5","L":"113.3","PName":"8888","Status":1},
{"B":"23.1","L":"113.7","PName":"7777","Status":1},
{"B":"23.5","L":"113.3","PName":"8888","Status":1}
];

2.根据坐标点计算中心点和缩放级别，并加载天地图。参见前面的文章。略。

3.把标注点和点名加载到地图上。参见前面的文章。略

4.连线操作。以及给天地图上的线添加点击事件。

[javascript] view plaincopy

//根据连线LinePoints数组进行两两相连。
//给线条添加点击事件。
function showSLine() {
var lineconfig={
strokeColor: "rgb(0,68,102)",
strokeWeight: 2,
strokeOpacity: 1,
strokeStyle:"dashed"
};
var disconfig = {//测距工具的配置
strokeColor:"blue", //折线颜色
strokeWeight:"3px", //折线的宽度，以像素为单位
strokeOpacity:0.5, //折线的透明度，取值范围0 - 1
strokeStyle:"solid" //折线的样式，solid或dashed
};
//创建测距工具对象
lineTool = new TPolylineTool(map,disconfig);
//循环遍历线条数组
for (var i = 0; i < LinePoints.length; i = i + 2) {
var j=i+1;
var k=i/2;
points[k]=[];
points[k].push(new TLngLat(LinePoints[i].L, LinePoints[i].B));
points[k].push(new TLngLat(LinePoints[j].L, LinePoints[j].B));
SLine[k] = new TPolyline(points[k],lineconfig);//创建线条的对象
points[k].dis=lineTool.getDistance(points[k]);//计算一条线两个点之间距离
if(points[k].dis>60000){//大于60的用红色
SLine[k].setStrokeColor("red");
}
SLine[k].id=k;
SLine[k].distance=LinePoints[i].distance;
SLine[k].LineName=LinePoints[i].PName+"-"+LinePoints[j].PName;//给线条命名。就是两个点名中间多一个“-”.用来在模拟点击的时候知道是模拟点击到的哪一条线。
(function() {//给线条添加点击事件。
var l=SLine[k];
SLineclick[k] = TEvent.addListener(l, "click",function() {//线的点击事件
//点击线的第一件是是把地图上的线条恢复到原始状态。就是把所有的线变成虚线。
for(var i=0;i<SLine.length;i++){
SLine[i].setStrokeStyle("dashed");
}
l.setStrokeStyle("solid");//把当前线设为实线。
var thepoints=l.getLngLats();//获取线两端的点，
thepointL1=thepoints[0][0]/100000;
thepointL2=thepoints[1][0]/100000;
thepointL1=thepointL1.toFixed(3);
thepointL2=thepointL2.toFixed(3);//ie5.5+
var dispoints=[];
var discenterArr=[];
var discenterP={};//线两个端点点的中心坐标，在这里添加距离显示
for(var j=0;j<lnglats.length;j++){
//点击线，把地图上的标注恢复到原始状态。
if (lnglats[j].Status == 1) {//恢复初始图标
iconMaker[j].setIcon(icon);
} else {
iconMaker[j].setIcon(icon1);
}
//如果lnglats数组中的点的L值与线条的端点的L值相差在0.01以内，我们就认为它是同一个点。
//也就是说我们点线条的时候，这个标注点将作为线条的端点来进行变化。
if(Math.abs(lnglats[j].L-thepointL1)<0.01){
if(lnglats[j].Status == 1){
iconMaker[j].setIcon(icon2);
}else{
iconMaker[j].setIcon(icon3);
}
dispoints.push(new TLngLat(lnglats[j].L, lnglats[j].B));
discenterArr.push(lnglats[j]);
}
if(Math.abs(lnglats[j].L-thepointL2)<0.01){
if(lnglats[j].Status == 1){
iconMaker[j].setIcon(icon2);
}else{
iconMaker[j].setIcon(icon3);
}
dispoints.push(new TLngLat(lnglats[j].L, lnglats[j].B));
discenterArr.push(lnglats[j]);
}
}
//点击线时，在线条的中心位置，显示两个点的距离，也就是线条长度。
discenterP.L=(parseFloat(discenterArr[0].L)+parseFloat(discenterArr[1].L))/2;
discenterP.B=(parseFloat(discenterArr[0].B)+parseFloat(discenterArr[1].B))/2;
var distance=lineTool.getDistance(dispoints);
distance=distance/1000;
distance=distance.toFixed(1);
var disconfig = {
text:distance+'KM',
offset:new TPixel(10,10),
position:new TLngLat(discenterP.L,discenterP.B)
};
//创建地图文本对象
map.removeOverLay(disLabel);
disLabel=new TLabel(disconfig);
disLabel.setBorderColor("rgb(40,150,205)");
map.addOverLay(disLabel);
});
})();
//向地图上添加线
map.addOverLay(SLine[k]);
}
}

5.模拟点击事件。搜索两个点的点名，触发两个点之间连线的点击事件。地图上将两个点突出显示。并用实线将两个点相连。在两个点中间位置显示距离。

[javascript] view plaincopy

var LineName=[];
$(document).ready(function(){
//输入两个点名。地图上显示两个点相连的效果。
$("#user_loadq_icon").click(function(){
var start_point=$("#start_point").val();
var end_point=$("#end_point").val();
if(start_point==""||end_point==""){
return;
}
var pointName=start_point+"-"+end_point;
var pointName1=end_point+"-"+start_point;
LineName.length=0;
LineName.push(pointName);
LineName.push(pointName1);
//遍历SLine。查找名字。
for(var i=0;i<SLine.length;i++){
if(SLine[i].LineName ==LineName[0] || SLine[i].LineName ==LineName[1] ){
TEvent.trigger(SLine[i],"click");//找到名字之后模拟点击线条。触发点击事件。连接两个点。
}
}
})
})

到这里就基本实现了要达到的效果。

效果图：

初始状态：

点击线条：

搜索连接（模拟点击事件）：

天地图系列暂时先到这里。其实天地图有时候不是特别稳定。可能其他地图会好一点点。

其实就是对接口的灵活运用而已。说难不难，说简单也不简单。

同样的接口，在不同的人手里可以发挥出不同的作用。

欢迎交流。

如果对它感兴趣可以下载，项目下载地址：https://github.com/liusaint/tiandituMap

演示地址：http://runningls.com/demos/tianditu/index.html?to=loadline

转载于:https://www.cnblogs.com/telwanggs/p/6484323.html

天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件相关推荐

天地图专题二：在天地图上循环显示标注点以及悬停显示信息窗口
上一文章讲了如何加载天地图.其实是很简单的,只要看一下天地图官方的代码示例就能搞出来. 只是为了保持文章系列的完整性,所以才写了出来. 官方api:http://api.tianditu.com/ap ...
天地图专题五：在天地图上绘制电子区域并保存数据
版权声明:本文为博主原创文章,转载请注明出处. 上一文章讲了如何在天地图上显示坐标轨迹. 本文介绍如何在天地图上绘制电子区域(电子范围或电子栅栏),并且,我们要将我们绘制的电子区域的坐标数据保存到数组 ...
天地图专题四：在天地图上显示运行轨迹
上一文章我们讲了如何根据标注点确定初始化地图时的缩放级别和中心点. 是很基本的需求. 既然是地图,常常会有显示运行轨迹的需求. 本质上就是把一些点数据在地图上用线连接起来. 实现起来也是比较简单的. ...
android天地图画区域,天地图专题五：在天地图上绘制电子区域并保存数据
上一文章讲了如何在天地图上显示坐标轨迹. 本文介绍如何在天地图上绘制电子区域(电子范围或电子栅栏),并且,我们要将我们绘制的电子区域的坐标数据保存到数组里,以用于提交到后台,或根据数据来绘制电子区域. ...
如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）
咱先来解决问题然后再了解是怎摸个原理在了解他的兼容性一.解决方案:可以最上面图层的样式添加 pointer-events: none 二.这个 pointer-events: none 具体是什 ...
Vue项目嵌入天地图专题一：加载天地图
公司近期的项目有用到天地图,之前接触过百度地图没有接触过天地图.所以根据项目的要求写一个专题来记录下 1.我们用的是南京天地图,首先是引入天地图所需的各种文件,因为我们的项目是vue的项目所以,引入的 ...
im即时通讯源码_IM消息ID技术专题(六)：深度解密滴滴的高性能ID生成器(Tinyid)
1.引言在中大型IM系统中,聊天消息的唯一ID生成策略是个很重要的技术点.不夸张的说,聊天消息ID贯穿了整个聊天生命周期的几乎每一个算法.逻辑和过程,ID生成策略的好坏有可能直接决定系统在某些技术点 ...
教你操作道路沿线标注
制作电子地图时,经常要给地图中的道路添加标注,也就是地图制图中常说的沿线标注.地图中的沿线标注要兼顾合理与美观两方面,既要花时间和心思去设计,又要充分利用制图软件的相关功能,才能使理想与现实完美结合. ...
【kuangbin带你飞】专题六最小生成树
[kuangbin带你飞]专题六最小生成树 A.POJ - 1251 Jungle Roads (最小生成树模板) The Head Elder of the tropical island of ...

天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件

天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件相关推荐

最新文章

热门文章