openlayers实现地图测距测面

2023-07-14 17:43:05 80

本文实例为大家分享了openlayers实现地图测距测面的具体代码，供大家参考，具体内容如下

项目背景vue-cli3.0

public下html需要引入文件

./css/gr-ol.css"type="text/css">
./js/ol.js"type="text/javascript">

这里地图为公共组件，方法写在公共组件的init方法里，kpst._this为地图对象

调用

//测距/面
vardraw=me.map._this.interactions.getArray()[10]
me.map._this.removeInteraction(draw);
if(data.name=='测距'||data.name=='测面'){
me.map._this.interactions.array_=arr.slice(0,10)
if(data.name=='测距'){
me.mtype='LineString'
}else{
me.mtype='Polygon'
}
me.map._this.measure(me.mtype)//map已挂载到vue原型Vue.prototype.map=map
}elseif(data.name=='清除'){
me.map._this.clear()
}

方法挂载

//测距、面
//创建一个当前要绘制的对象
varsketch
//创建一个帮助提示框对象
varhelpTooltipElement;
//创建一个帮助提示信息对象
varhelpTooltip;
//创建一个测量提示框对象
varmeasureTooltipElement;
//创建一个测量提示信息对象
varmeasureTooltip;
//继续绘制多边形的提示信息
varcontinuePolygonMsg
//继续绘制线段的提示信息
varcontinueLineMsg
//帮助提示信息
varhelpMsg
//定义矢量数据源
varsource=newol.source.Vector();
//定义矢量图层
varvector=newol.layer.Vector({
source:source,
style:newol.style.Style({
fill:newol.style.Fill({
color:'rgba(255,255,255,0.2)'
}),
stroke:newol.style.Stroke({
color:'#e21e0a',
width:2
}),
image:newol.style.Circle({
radius:5,
fill:newol.style.Fill({
color:'#ffcc33'
})
})
})
});
//创建比例尺控件
varscaleLineControl=newol.control.ScaleLine({
units:'metric',
target:'scalebar',
className:'ol-scale-line'
});
functionmeasure(mtype){
sketch=newol.Feature();
//continuePolygonMsg='Clicktocontinuedrawingthepolygon';
//continueLineMsg='Clicktocontinuedrawingtheline';
//将矢量图层添加到地图中
kpst._this.removeLayer(vector);
kpst._this.addLayer(vector);
//添加比例尺控件
kpst._this.removeControl(scaleLineControl);
kpst._this.addControl(scaleLineControl);
//鼠标移动触发的函数
varpointerMoveHandler=function(evt){
//如果是平移地图则直接结束
if(evt.dragging){
return;
}
//帮助提示信息
helpMsg='Clicktostartdrawing';
if(sketch){
//获取绘图对象的几何要素
vargeom=sketch.getGeometry();
//如果当前绘制的几何要素是多线段，则将绘制提示信息设置为多线段绘制提示信息
//if(geominstanceofol.geom.Polygon){
//helpMsg=continuePolygonMsg;
//}elseif(geominstanceofol.geom.LineString){
//helpMsg=continueLineMsg;
//}
}
//设置帮助提示要素的内标签为帮助提示信息
//if(helpTooltipElement)
//helpTooltipElement.innerHTML=helpMsg;
//设置帮助提示信息的位置
//if(helpTooltip)
helpTooltip.setPosition(evt.coordinate);
//移除帮助提示要素的隐藏样式
//$(helpTooltipElement).removeClass('hidden');
removeClass(document.getElementsByClassName('tooltip')[0],'hidden')
};

//触发pointermove事件
kpst._this.on('pointermove',pointerMoveHandler);

//当鼠标移除地图视图的时为帮助提示要素添加隐藏样式
document.querySelector('.ol-viewport').onmouseout=function(){
addClass(document.getElementsByClassName('tooltip')[0],'hidden')
}
//判断class有无
functionhasClass(ele,cls){
if(ele){
cls=cls||'';
if(cls.replace(/\s/g,'').length==0)returnfalse;//当cls没有参数时，返回false
returnnewRegExp(''+cls+'').test(''+ele.className+'');
}
}
//添加class
functionaddClass(ele,cls){
if(!hasClass(ele,cls)&&ele){
ele.className=ele.className==''?cls:ele.className+''+cls;
}
}
//去除class
functionremoveClass(ele,cls){
if(hasClass(ele,cls)&&ele){
varnewClass=''+ele.className.replace(/[\t\r\n]/g,'')+'';
while(newClass.indexOf(''+cls+'')>=0){
newClass=newClass.replace(''+cls+'','');
}
ele.className=newClass.replace(/^\s+|\s+$/g,'');
}
}
//定义一个交互式绘图对象
vardraw;
//添加交互式绘图对象的函数
functionaddInteraction(){
//创建一个交互式绘图对象
draw=newol.interaction.Draw({
//绘制的数据源
source:source,
//绘制类型
type:mtype,
//样式
style:newol.style.Style({
fill:newol.style.Fill({
color:'rgba(255,255,255,0.2)'
}),
stroke:newol.style.Stroke({
color:'rgba(0,0,0,0.5)',
lineDash:[10,10],
width:2
}),
image:newol.style.Circle({
radius:5,
stroke:newol.style.Stroke({
color:'rgba(0,0,0,0.7)'
}),
fill:newol.style.Fill({
color:'rgba(255,255,255,0.2)'
})
})
})
});
//将交互绘图对象添加到地图中
kpst._this.addInteraction(draw);
//创建测量提示框
createMeasureTooltip();
//创建帮助提示框
createHelpTooltip();
//定义一个事件监听
varlistener;
//定义一个控制鼠标点击次数的变量
varcount=0;
//绘制开始事件
draw.on('drawstart',function(evt){
//Thefeaturebeingdrawn.
sketch=evt.feature;
//提示框的坐标
vartooltipCoord=evt.coordinate;
//监听几何要素的change事件
//Increasestherevisioncounteranddispatchesa'change'event.
listener=sketch.getGeometry().on('change',function(evt){
//Theeventtarget.
//获取绘制的几何对象
vargeom=evt.target;
//定义一个输出对象，用于记录面积和长度
varoutput;
if(geominstanceofol.geom.Polygon){
kpst._this.removeEventListener('singleclick');
kpst._this.removeEventListener('dblclick');
//输出多边形的面积
output=formatArea(geom);
//Returnaninteriorpointofthepolygon.
//获取多变形内部点的坐标
tooltipCoord=geom.getInteriorPoint().getCoordinates();
}elseif(geominstanceofol.geom.LineString){
//输出多线段的长度
output=formatLength(geom);
//Returnthelastcoordinateofthegeometry.
//获取多线段的最后一个点的坐标
tooltipCoord=geom.getLastCoordinate();
}
//设置测量提示框的内标签为最终输出结果
//if(measureTooltipElement)
measureTooltipElement.innerHTML=output;
//设置测量提示信息的位置坐标
//if(measureTooltip)
measureTooltip.setPosition(tooltipCoord);
});
//地图单击事件
kpst._this.on('singleclick',function(evt){
//设置测量提示信息的位置坐标，用来确定鼠标点击后测量提示框的位置
//if(measureTooltip)
measureTooltip.setPosition(evt.coordinate);
//如果是第一次点击，则设置测量提示框的文本内容为起点
if(count==0&&measureTooltipElement){
measureTooltipElement.innerHTML="起点";
}
//根据鼠标点击位置生成一个点
varpoint=newol.geom.Point(evt.coordinate);
//将该点要素添加到矢量数据源中
source.addFeature(newol.Feature(point));
//更改测量提示框的样式，使测量提示框可见
measureTooltipElement.className='tooltiptooltip-static';
//创建测量提示框
createMeasureTooltip();
//点击次数增加
count++;
});
//地图双击事件
kpst._this.on('dblclick',function(evt){
//根据
varpoint=newol.geom.Point(evt.coordinate);
source.addFeature(newol.Feature(point));
});
},this);
//绘制结束事件
draw.on('drawend',function(evt){
count=0;
//设置测量提示框的样式
measureTooltipElement.className='tooltiptooltip-static';
//Settheoffsetforthisoverlay.
//设置偏移量
measureTooltip.setOffset([0,-7]);
//清空绘制要素
sketch=null;
//清空测量提示要素
measureTooltipElement=null;
//创建测量提示框
createMeasureTooltip();
//Removesaneventlistenerusingthekeyreturnedbyon()oronce().
//移除事件监听
ol.Observable.unByKey(listener);
//移除地图单击事件
kpst._this.removeEventListener('singleclick');
},this);
}
//创建帮助提示框
functioncreateHelpTooltip(){
//如果已经存在帮助提示框则移除
if(helpTooltipElement){
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
//创建帮助提示要素的div
if(!helpTooltipElement)
helpTooltipElement=document.createElement('div');
//设置帮助提示要素的样式
helpTooltipElement.className='tooltiphidden';
//创建一个帮助提示的覆盖标注
helpTooltip=newol.Overlay({
element:helpTooltipElement,
offset:[15,0],
positioning:'center-left'
});
//将帮助提示的覆盖标注添加到地图中
kpst._this.addOverlay(helpTooltip);
}
//创建测量提示框
functioncreateMeasureTooltip(){
//创建测量提示框的div
//if(!measureTooltipElement)
measureTooltipElement=document.createElement('div');
measureTooltipElement.setAttribute('id','lengthLabel');
//设置测量提示要素的样式
measureTooltipElement.className='tooltiptooltip-measure';
//创建一个测量提示的覆盖标注
measureTooltip=newol.Overlay({
element:measureTooltipElement,
offset:[0,-15],
positioning:'bottom-center'
});
//将测量提示的覆盖标注添加到地图中
kpst._this.addOverlay(measureTooltip);
}
//格式化测量长度
varformatLength=function(line){
//定义长度变量
varlength;
//计算平面距离
length=Math.round(line.getLength()*100)/100;
//定义输出变量
varoutput;
//如果长度大于1000，则使用km单位，否则使用m单位
if(length>100){
output=(Math.round(length/1000*100)/100)+''+'km';//换算成KM单位
}else{
output=(Math.round(length*100)/100)+''+'m';//m为单位
}
returnoutput;
};
//格式化测量面积
varformatArea=function(polygon){
//定义面积变量
vararea;
//获取平面面积
area=polygon.getArea();
//}
//定义输出变量
varoutput;
//当面积大于10000时，转换为平方千米，否则为平方米
if(area>1000){
output=(Math.round(area/1000000*100)/100)+''+'km²';
}else{
output=(Math.round(area*100)/100)+''+'m²';
}
returnoutput;
};
//添加交互绘图对象
addInteraction();
}
//清除提示对象
functionclear(){
source.clear()
kpst._this.getOverlays().clear();
kpst._this.removeLayer(vector);
kpst._this.removeControl(scaleLineControl);
}
kpst._this.measure=measure
kpst._this.clear=clear

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

openlayers实现地图测距测面

热门推荐

随机推荐