OpenLayers 在地图上画线，获取点坐标（以天地图为例）

亦凉 2022-05-27 23:39 3647阅读 0赞

**应用场景：**

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

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

**实现过程：**

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

![70][]

鼠标在地图上选中三个点

![70 1][]

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

**实现代码：**

代码基于福建天地图demo在线开发调试，所以请在[福建天地图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>

**运行结果：**

![70 2][]

[Link 1]: https://q.cnblogs.com/q/26222/
[70]: /images/20220528/d00eda1e297440349fca345ca195a54a.png
[70 1]: /images/20220528/7caed4a07e174cc7b01c180b4cf0d621.png
[demo]: http://www.fjmap.net/SvcCenter/geomap-api/JsCodeDemo/demo.html#JS2DFeatureOperation/JS_view2D_overLayerFeature_update.html
[70 2]: /images/20220528/e8a5e31e651a4ad78d4e15d92251022d.png