JS基于天地图覆盖物保存到本地（业务库）的方法

最新推荐文章于 2024-03-11 14:01:43 发布

置顶 m0_38004177

最新推荐文章于 2024-03-11 14:01:43 发布

阅读量914

点赞数 3

分类专栏： js 文章标签：天地图二次开发 web地图开发地图开发

本文链接：https://blog.csdn.net/m0_38004177/article/details/92608420

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

天地图保存覆盖物到业务库，实现覆盖物自定义保存和查询，编辑也是同理。

一.、基本思路
首先利用地图工具画图，每次有拐点的时候都会点击地图，因此我们使用记录单击地图的方式获取多边形的点集，用于记录多边形的范围集。
接下来将获取的点保存到数组（其他存储无所谓），供我们存储本地或者业务库使用。
二、实现过程

通过调用天地图的画图工具（圆、线、点、多边形等）实现地图覆盖物的采集。
参考天地图的例子，使用天地图工具进行绘制

<!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);

		});
	}

到此为止完成了基于天地图的覆盖物存储到绘制的实现，这个功能在实际中有很好的应用价值，例如绘制电子围栏、工作区域，活动范围等功能

效果图
在这里插入图片描述

m0_38004177

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS基于天地图覆盖物保存到本地（业务库）的方法

天地图保存覆盖物到业务库，实现覆盖物自定义保存和查询，编辑也是同理。一.、基本思路首先利用地图工具画图，每次有拐点的时候都会点击地图，因此我们使用记录单击地图的方式获取多边形的点集，用于记录多边形的范围集。接下来将获取的点保存到数组（其他存储无所谓），供我们存储本地或者业务库使用。二、实现过程通过调用天地图的画图工具（圆、线、点、多边形等）实现地图覆盖物的采集。参考天地图的例子，使用...
复制链接

扫一扫