应用场景:

        最近在开发过程中,有个需求,需要在天地图中画线,结束后获取对应的坐标集合,查阅 OpenLayers API 和网上的相关资料后得以实现,特此记录。

        因为直线间的点是无数个,我们不可能去获取这线上的所有点,而应用两点一线的原理,我们只需要知道一条直线的起点和终点就可以定位到当前直线,而在天地图中,手动画线的一种方式就是通过鼠标在地图上地点,然后地图调用相应的方法,将当前的点与先前的一个点进行连接展示,所以我们只要获取鼠标每次点击时产生的点坐标集合,就相当于是定位到了当前的直线,而且取到的点坐标就是天地图上需要的WGS84标准的经纬度坐标,不需要再次进行转换,解决过程有想过通过单独监听地图点击事件来获取坐标,但结果是,单独监听地图点击事件时,获取的是屏幕坐标,需要转换一下,与画线进行组合监听时候,地图不响应当前的地图监听事件,经过后续的查找测试,最终找到了合适的方法。

实现过程:

        感谢 点击打开链接 给予的思路,然后查询API,修改代码,通过观察控制台打印返回内容得以获取对应点坐标集合。

jquery 天地图搜索并拾取坐标_html

鼠标在地图上选中三个点

jquery 天地图搜索并拾取坐标_Openlayers_02

控制台输出的返回对象内容,红框为对应的点坐标

实现代码:

        代码基于福建天地图demo在线开发调试,所以请在福建天地图demo下运行或更改引入的资源文件。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>天地图画线取点demo</title>
		<link href="/SvcCenter/geomap-api/JsCodeDemo/css/demoComm.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="/SvcCenter/geomap-api/JsCodeDemo/js/api.js"></script>
	</head>
	<body>
		<div id="simpleMap"></div>
		<div id="bamboo">
			<div class="banni">
				<input type="button" value="开启画线取点功能" οnclick="openControl();"/>
				<input type="button" value="关闭画线取点功能" οnclick="closeControl(this);"/>
			</div>
		</div>
		<script type="text/javascript">
			var map, vectorLayer, drawFeatureControl;
			window.onload = function(){
				map = new Geo.View2D.Map("simpleMap", {layerGroupLoaded: true});
				map.setCenter(new Geo.LonLat(118.5, 25.75));
				var stylemap = new Geo.StyleMap({
					'default': new Geo.Style({
						pointRadius: 12,
						fillColor: "#ee0000",
						fillOpacity: 0.7,
						strokeColor: "#ee0000",
						strokeWidth: 3,
						strokeOpacity: 1
					})
				});
				vectorLayer = new Geo.View2D.Layer.Vector("Vector Layer",{styleMap: stylemap});
				map.addLayers([vectorLayer]);
				//定义绘制控件
				
				drawFeatureControl = new Geo.View2D.Control.DrawFeature(vectorLayer,Geo.View2D.Handler.Path,
					{
						featureAdded: function() {
							var points = arguments[0].geometry.components;  //返回的点坐标集合
							console.log("画线结束,开始取点。");
							for (var i = 0;i <points.length;i++){
								var point = points[i];
								console.log("我是第 "+i+"个点,经度:"+point.x+", 纬度:"+point.y);
						    }
						}
					}
				);
				
				//添加控件到地图中
				map.addControl(drawFeatureControl);
			}
			//开启画线取点功能
			function openControl(){
				drawFeatureControl.activate();
			}
			
			//关闭画线取点功能
			function closeControl(){
				drawFeatureControl.deactivate();
			}
		</script>
	</body>
</html>



运行结果:

jquery 天地图搜索并拾取坐标_Openlayers_03