应用场景:
最近在开发过程中,有个需求,需要在天地图中画线,结束后获取对应的坐标集合,查阅 OpenLayers API 和网上的相关资料后得以实现,特此记录。
因为直线间的点是无数个,我们不可能去获取这线上的所有点,而应用两点一线的原理,我们只需要知道一条直线的起点和终点就可以定位到当前直线,而在天地图中,手动画线的一种方式就是通过鼠标在地图上地点,然后地图调用相应的方法,将当前的点与先前的一个点进行连接展示,所以我们只要获取鼠标每次点击时产生的点坐标集合,就相当于是定位到了当前的直线,而且取到的点坐标就是天地图上需要的WGS84标准的经纬度坐标,不需要再次进行转换,解决过程有想过通过单独监听地图点击事件来获取坐标,但结果是,单独监听地图点击事件时,获取的是屏幕坐标,需要转换一下,与画线进行组合监听时候,地图不响应当前的地图监听事件,经过后续的查找测试,最终找到了合适的方法。
实现过程:
感谢 点击打开链接 给予的思路,然后查询API,修改代码,通过观察控制台打印返回内容得以获取对应点坐标集合。
鼠标在地图上选中三个点
控制台输出的返回对象内容,红框为对应的点坐标
实现代码:
代码基于福建天地图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>
运行结果: