效果图:
//********************************************************测距**start**
//加载测量的绘制矢量层
var source = new ol.source.Vector(); //图层数据源
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({ //图层样式
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)' //填充颜色
}),
stroke: new ol.style.Stroke({
color: '#ffcc33', //边框颜色
width: 2 // 边框宽度
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
map.addLayer(vector);
/**
* 帮助提示框对象(The help tooltip element.)
* @type {Element}
*/
var helpTooltipElement;
/**
*帮助提示框显示的信息(Overlay to show the help messages.)
* @type {ol.Overlay}
*/
var helpTooltip;
/**
* 测量工具提示框对象(The measure tooltip element. )
* @type {Element}
*/
var measureTooltipElement;
/**
*测量工具中显示的测量值(Overlay to show the measurement.)
* @type {ol.Overlay}
*/
var measureTooltip;
var draw; // global so we can remove it later
/**
* 加载交互绘制控件函数
*/
function addInteraction() {
var type = 'LineString';
var timestamp = new Date().getTime();
draw = new ol.interaction.Draw({
source: source, //测量绘制层数据源
type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
style: new ol.style.Style({ //绘制几何图形的样式
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
im