天地图保存覆盖物到业务库,实现覆盖物自定义保存和查询,编辑也是同理。
一.、基本思路
首先利用地图工具画图,每次有拐点的时候都会点击地图,因此我们使用记录单击地图的方式获取多边形的点集,用于记录多边形的范围集。
接下来将获取的点保存到数组(其他存储无所谓),供我们存储本地或者业务库使用。
二、实现过程
- 通过调用天地图的画图工具(圆、线、点、多边形等)实现地图覆盖物的采集。
参考天地图的例子,使用天地图工具进行绘制
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>天地图-工具集合</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=87106642dd50a20c3ef6148a8a901db3"></script>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#mapDiv {
height: 400px;
width: 100%;
}
p,input {
margin-top: 10px;
margin-left: 5px;
font-size: 14px;
}
</style>
<script>
var map, zoom = 12, handler;
function onLoad() {
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
//允许鼠标双击放大地图
map.enableScrollWheelZoom();
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
polygonTool = new T.PolygonTool(map, config);
}
function openPolygonTool() {
if (handler) handler.close();
handler = new T.PolygonTool(map);
handler.open();
}
/*
画线完成以后注册点击事件
*/
function openPolylineTool() {
var points=[];//存放坐标
if (handler) handler.close();
handler = new T.PolylineTool(map);
handler.open();
//注册工具画线完成事件
map.addEventListener('click',function(p){
points.push(p.lnglat);
})
console.log(points);
}
function openMarkerTool() {
if (handler) handler.close();
handler = new T.MarkTool(map, {follow: true});
handler.open();
}
function openRectangleTool() {
if (handler) handler.close();
handler = new T.RectangleTool(map, {follow: true});
handler.open();
}
function openCircleTool() {
if (handler) handler.close();
handler = new T.CircleTool(map, {follow: true});
handler.open();
}
function getLayerCount() {
return map.getOverlays().length;
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本例演示多种覆盖物工具</p>
<div>
<input type="button" value="点工具" onClick='openMarkerTool() '/>
<input type="button" value="多边形工具" onClick='openPolygonTool() '/>
<input type="button" value="线工具" onClick='openPolylineTool() '/>
<input type="button" value="矩形工具" onClick='openRectangleTool() '/>
<input type="button" value="画圆工具" onClick='openCircleTool() '/>
<input type="button" value="获取图层个数" onClick='alert(getLayerCount()) '/>
<input type="button" value="清除所有" onClick='map.clearOverLays()'/>
</div>
</body>
</html>
这里我使用的是画线,保存线的点集,定义一个存储点集的数组
/*
画线完成以后注册点击事件
*/
function openPolylineTool() {
var points=[];//存放坐标
if (handler) handler.close();
handler = new T.PolylineTool(map);
handler.open();
//注册工具画线完成事件
map.addEventListener('click',function(p){
points.push(p.lnglat);
})
console.log(points);
}
每次执行鼠标点击时都会将当前的坐标存入数组。
3. 保存点到本地或者数据库
将获取的数组全部存储到本地库,或者缓存中,因为我这是做demo,只是将点集打印到控制台了,然后将数据存到json文件了
[{
"line1": "线路1",
"LonLat": [{
"lat": "39.93133",
"lng": "116.36684"
}, {
"lat": "39.93205",
"lng": "116.39071"
}, {
"lat": "39.93205",
"lng": "116.39946"
}, {
"lat": "39.93133",
"lng": "116.39989"
}, {
"lat": "39.92382",
"lng": "116.40032"
}],
"color": "#CD6600"
},
{
"line2": "线路2",
"LonLat": [{
"lat": "39.94798",
"lng": "116.41105"
}, {
"lat": "39.94831",
"lng": "116.42547"
}, {
"lat": "39.94673",
"lng": "116.42753"
}, {
"lat": "39.93199",
"lng": "116.42753"
}, {
"lat": "39.93195",
"lng": "116.42778"
}, {
"lat": "39.92303",
"lng": "116.42826"
}, {
"lat": "39.92308",
"lng": "116.42008"
}],
"color": "#EE2C2C"
},
{
"line3": "线路3",
"LonLat": [{
"lat": "39.94771",
"lng": "116.38753"
}, {
"lat": "39.93955",
"lng": "116.38779"
}, {
"lat": "39.93863",
"lng": "116.38993"
}, {
"lat": "39.93172",
"lng": "116.39006"
}],
"color": "#66CD00"
},
{
"line4": "线路4",
"LonLat": [{
"lat": "39.92294",
"lng": "116.39847"
}, {
"lat": "39.92307",
"lng": "116.41997"
}, {
"lat": "39.92754",
"lng": "116.41989"
}, {
"lat": "39.9286",
"lng": "116.41963"
}, {
"lat": "39.93064",
"lng": "116.41967"
}, {
"lat": "39.94837",
"lng": "116.41924"
}
],
"color": "#F4A460"
}
]
- 查询覆盖物
根据本地存储的点集进行绘制覆盖物,我使用的是json文件存储的数据,因此通过调用json路径获取经纬度信息。
//创建线性覆盖物
function CreateLine() {
var points1 = []; //多边形点
var points2 = []; //多边形点
var points3 = []; //多边形点
var points4 = []; //多边形点
$.getJSON('../data/points.json', function(data) {
// console.log(data);
for (var i = 0; i < data[0].LonLat.length; i++) {
points1.push(new T.LngLat(data[0].LonLat[i].lng, data[0].LonLat[i].lat));
}
for (var i = 0; i < data[1].LonLat.length; i++) {
points2.push(new T.LngLat(data[1].LonLat[i].lng, data[1].LonLat[i].lat));
}
for (var i = 0; i < data[2].LonLat.length; i++) {
points3.push(new T.LngLat(data[2].LonLat[i].lng, data[2].LonLat[i].lat));
}
for (var i = 0; i < data[3].LonLat.length; i++) {
points4.push(new T.LngLat(data[3].LonLat[i].lng, data[3].LonLat[i].lat));
}
//创建面对象
var polygon1 = new T.Polyline(points1, {
weight: 4,
color: data[0].color,
opacity: "1"
});
//向地图上添加面
map.addOverLay(polygon1);
});
}
到此为止完成了基于天地图的覆盖物存储到绘制的实现,这个功能在实际中有很好的应用价值,例如绘制电子围栏、工作区域,活动范围等功能
效果图