OpenLayers开发：测量控件
测量距离和面积也是GIS系统中一项重要的内容。以下说明测量控件的使用。
1. 创建HTML文件，引入OpenLayers开发包，插入地图div、测量div元素：
<body>
<div id=”measure”>
<input type=”button”id=”mea_length” value=”测量距离”onclick=”measureLength()”/>
<input type=”button”id=”mea_area” value=”测量面积”onclick=”measureArea()”/>
<input type=”button”id=”mea_stop” value=”停止测量”onclick=”measureStop()”/>
测量结果：<inputtype=”text” id=”mea_result” name=”mea_result”value=””/>
</div>
<div id=”map”></div>
</body>
2. 创建地图实例对象map，添加基础图层和相应控件。
3. 定义测量控件及其属性、监听函数，并在地图实例中添加测量控件。
measureControl= new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
persist: true, //保留绘制上次绘制的要素
immediate: true, //量算过程中实时显示测量结果
geodesic: true, //采用大地测量学方法计算
//指定监听函数measure和measurepartial
eventListeners: {
‘measure’: measure,
‘measurepartial’: measurepartial
}
});
//添加测量控件
map.addControl(measureControl);
//暂且不要激活测量控件
measureControl.deactivate();
4. 定义“测量距离”、“测量面积”、“停止测量”按钮点击事件响应函数。
//“测量距离”按钮点击事件响应函数
functionmeasureLength()
{
measureControl.updateHandler(OpenLayers.Handler.Path, {persist: true});
if(!measureControl.active)
{
//激活测量控件
measureControl.activate();
}
}
//“测量面积”按钮点击事件响应函数
functionmeasureArea()
{
measureControl.updateHandler(OpenLayers.Handler.Polygon, {persist:true});
if(!measureControl.active)
{
//激活测量控件
measureControl.activate();
}
}
//“停止测量”按钮点击事件响应函数
functionmeasureStop()
{
if(measureControl.active)
{
measureControl.deactivate();
}
document.getElementById(“mea_result”).value = “”;
}
5. 定义测量事件监听函数。
//该函数用于最终显示测量结果
functionmeasure(event)
{
var message = event.measure + ” “+ event.units;
if(event.order>1) {
//如果测量类型为测量面积
message += “2”;
}
//显示测量结果
document.getElementById(“mea_result”).value = message;
}
//该函数用于实时显示测量结果
functionmeasurepartial(event)
{
var message = event.measure + ” “+ event.units;
if(event.order>1) {
//如果测量类型为测量面积
message += “2”;
}
document.getElementById(“mea_result”).value = message;
}
运行效果如下图：
转载自：https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/46878697.jpg
