天地图专题五：在天地图上绘制电子区域并保存数据

2024-04-30 23:27:53

版权声明：本文为博主原创文章，转载请注明出处。

上一文章讲了如何在天地图上显示坐标轨迹。

本文介绍如何在天地图上绘制电子区域（电子范围或电子栅栏），并且，我们要将我们绘制的电子区域的坐标数据保存到数组里，以用于提交到后台，或根据数据来绘制电子区域。天地图中有绘制多边形的接口跟绘制矩形的接口。我们就从这里入手。

调用接口其实不难。这里稍微要绕一下的地方是如何在调用绘制多边形接口的同时把我们绘制的多边形的顶点坐标保存下来。

本文我们要实现。

1.绘制多边形并保存多边形各顶点的数据到数组中。

2.清除我们绘制的多边形。

3.根据我们保存的多边形顶点数据来重现我们刚才清除掉的多边形。

步骤：

1.加载地图。在地图上设置按钮。选择范围清除所画查看刚才所画的。

[javascript] view plaincopy

//加载基本地图和导航
function loadMap(){
try {
map = new TMap("mapDiv"); //初始化地图对象
map.centerAndZoom(new TLngLat(103.388611,35.563611), 4);//中国
map.enableHandleMouseScroll(); //允许鼠标双击放大地图
} catch(err) {
alert('图加载不成功，请稍候再试！你可以先使用其他功能！');
}
}

[html] view plaincopy

<div class = 'btn-wrap'>
<input type="button" id="btn1" value="选择范围"/>
<input type="button" id="btn2" value="清除所画"/>
<input type="button" id="btn3" value="查看刚才画的"/>
</div>

2.加载多边形测距工具。

[javascript] view plaincopy

//加载多边形测距工具。
function loadPolygonTool(){
var config = {
strokeColor:"blue", //折线颜色
fillColor:"#FFFFFF", //填充颜色。当参数为空时，折线覆盖物将没有填充效果
strokeWeight:"3px", //折线的宽度，以像素为单位
strokeOpacity:0.5, //折线的透明度，取值范围0 - 1
fillOpacity:0.5, //填充的透明度，取值范围0 - 1
showLabel:false //是否显示页面，默认为true.
};
//创建测面工具对象
polygonTool = new TPolygonTool(map,config);
//注册测面工具绘制完成后的事件
TEvent.addListener(polygonTool,"draw",onDrawPolygon);
}

3.绘制多边形，保存顶点数据。保存的方法是，当我们点击按钮的时候，就给鼠标注册一个点击事件。绘制多边形的时候每点击地图一次，就调用点击事件获取点击的位置的经纬度坐标保存进数组。也就一边绘制多边形，一边得到多边形的顶点坐标。最后双击结束绘制，这个时候，在同一个位置点击两次，会获取到两个同样的经纬度，所以要给最后得到的顶点坐标去掉最后两位。结束绘制的时候清除地图的点击事件。

[javascript] view plaincopy

//绘制多边形
function drawPolygon() {　
polygonTool.clear();//清除所画的多边形
map.clearOverLays();
polygonTool.open();
PolygonPoints.length=0; //清零保存的坐标
if(mapclick!=""){
TEvent.removeListener(mapclick); //避免加载多次点击事件
}
mapclick = TEvent.addListener(map,"click",function(p){
polygonTool.open();
var lnglat = map.fromContainerPixelToLngLat(p);//获取点击处的坐标
PolygonPoints.push(lnglat.getLng());
PolygonPoints.push(lnglat.getLat());
if(PolygonPoints.length>20){
alert("不能超过10个点！请重新选择范围。");
polygonTool.close();
PolygonPoints.length=0;
TEvent.removeListener(mapclick);
}
});
}

点击按钮选择范围

双击结束时调用保存坐标到PolygonPoints中。

[javascript] view plaincopy

//关闭测面工具时触发
function onDrawPolygon(bounds,line)
{
polygonTool.close();
PolygonPoints.length=PolygonPoints.length-2;//最后双击会把最后一个坐标保存两次。
TEvent.removeListener(mapclick);//关闭单击事件（保存坐标）
}

经过上面的步骤就可以实现绘制区域，并得到顶点坐标。很多应用中就可以把得到的坐标提交保存到数据库去，以备后用了。

本demo中就不保存到后台，直接用我们得到的坐标数据把我们刚刚绘制的地图重现出来。

4.清除地图。polygonTool.clear();map.clearOverLays();

5.根据上面得到的数组重新调用天地图api画出我们刚得到的多边形状。

[javascript] view plaincopy

function drawPolygonByPoint(){　//根据点坐标来画多边形
map.removeOverLay(polygon);
var points = [];
if(PolygonPoints.length!=0){
for(var i=0;i<PolygonPoints.length;i=i+2){
points.push(new TLngLat(PolygonPoints[i],PolygonPoints[i+1]));
}
//创建面对象
polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.5});
//向地图上添加面
map.addOverLay(polygon);
}else{
alert("没有选择区域！");
}
}

6.按钮事件委托。

[javascript] view plaincopy

//给几个按钮添加点击事件。事件委托。
$(".btn-wrap").click(function(event) {
var target = event.target;
var id = target.id;
switch(id){
case 'btn1':
polygonTool.close();
TEvent.removeListener(mapclick);
drawPolygon();
break;
case 'btn2':
polygonTool.close();
TEvent.removeListener(mapclick);
polygonTool.clear();
map.clearOverLays()
break;
case 'btn3':
polygonTool.close();
TEvent.removeListener(mapclick);
drawPolygonByPoint();
break;
}
});

天地图绘制多边形效果图：

到这里，我们就实现了在天地图上绘制多边形状。绘制矩形也很类似。其实是很简单的。

唯一值得一提的大概就是在绘制的时候前添加了点击事件来保存顶点坐标。

项目下载地址：https://github.com/liusaint/tiandituMap

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

更多天地图api运用的内容请关注本系列后续文章。转载请注明出处

天地图专题五：在天地图上绘制电子区域并保存数据相关推荐

android天地图画区域,天地图专题五：在天地图上绘制电子区域并保存数据
上一文章讲了如何在天地图上显示坐标轨迹. 本文介绍如何在天地图上绘制电子区域(电子范围或电子栅栏),并且,我们要将我们绘制的电子区域的坐标数据保存到数组里,以用于提交到后台,或根据数据来绘制电子区域. ...
java使用Graphics在图片上绘制形状
开发中遇到一个需求,就是在抓拍的图片上按照点位画出有效区域,并且区域有正选和反选,所以需要填充多边形内和多边形外. 花了些时间看源码找资料,搞出了个demo 1.图片上绘制多边形区域并填充颜色 /** ...
高德地图 SDK 的应用 01：绘制多边形区域图
遇到一需求:在高德地图上绘制多边形区域还能咋样,翻一翻高德地图sdk参考手册,发现了这样一个方法:[addPolygon(PolygonOptions options)] public final ...
【图像算法】彩色图像分割专题五：提取彩色图像上特定色彩
[图像算法]彩色图像分割专题五:提取彩色图像特定色彩 SkySeraph Jun 8th 2011 HQU Email:zgzhaobo@gmail.com QQ:452728574 Late ...
python如何做散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
python画三维温度散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
python绘制散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
python绘制3d坐标轴_matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
开发指南专题五：JEECG微云快速开发平台代码生成器
开发指南专题五:JEECG微云快速开发平台代码生成器 1.1. Maven开发环境搭建在搭建jeecg的maven开发环境之前,需要先配置好本机的maven环境,并在eclipse中安装好m2ecl ...

最新文章

热门文章