openlayers 测距,vue openlayers
OpenLayers是专门为WebGIS客户端开发提供的JavaScript类库包，用于访问以标准格式发布的地图数据。本文测距功能将通过Vue和OpenLayer实现，有需要的可以参考。
目录
前言介绍相关库文件绘制提示文字鼠标画线设置距离信息窗口绘制完成和取消绘制所有代码。
前言
首先我说明一下，我是跟一个大老板学的，所以我是个小书呆子。openlayer官网给出了一个案例，但是习惯了vue开发的我完全不懂。关键是评论不多，我也不怎么用openlayer。
然后在官网分享测距案例。
引入相关库文件
这个库文件可以直接基于官网的。首先我说一件事。官网使用的案例是EPSG:3857供地图使用。如果我们把它改成EPSG:4326，测量数据就不准确了。请记住这一点。
导入“ol/ol . CSS”；
从“ol/interaction/Draw”导入绘图；
从“ol/Map”导入地图；
从“ol/Overlay”导入覆盖；
从“ol/View”导入视图；
从“ol/style”导入{ Circle as CircleStyle，Fill，Stroke，Style }；
从“ol/geom”导入{ LineString，Polygon }；
从“ol/source”导入{ OSM，Vector as Vector source }；
从“ol/layer”导入{ Tile as TileLayer，Vector as Vector layer }；
从“ol/sphere”导入{ getArea，getLength }；
从“ol/Observable”导入{ unby key }；
以上是我介绍的库文件，和官网的基本一样。
绘制提示文字
首先我们来看看下图的官网效果。官网开始画图或绘图时，鼠标旁边有标题文本框提示用户操作信息。
我们先来实现这个功能。
首先，这是关键代码。可能使用了一些参数，但发现它们未声明。都是全球性的。您可以将它们添加到全局，主要有以下几种。
var map=null
var helpTooltipElement=null
var feature=null
var helpTooltip=null
var draw=null
var measureTooltipElement=null
var measureTooltip=null
var listener=null
var mapMouseMove=null
首先我们在需要实现测距功能的页面上写两个按钮，一个开始测距，一个结束测距。然后，当单击开始测距时，执行一个方法，假设它是距离方法。
距离(){
let=new vector source()//首先，创建一个数据源来放置绘制期间和绘制之后的线段。
Const layer=new VectorLayer({ //添加一个图层来放置数据源。你可以自己设定风格。我默认的官网在这里。
来源：来源，
样式：新样式({
填充：新填充({
颜色： rgba(255，255，255，0.2)，
}),
笔画：新笔画({
颜色： #ffcc33 ，
宽度：4，
}),
image: new CircleStyle({
半径：7，
填充：新填充({
颜色： #ffcc33 ，
}),
}),
}),
});
map mousemove=map . on( pointer move ，(ev)={//向地图添加鼠标移动事件。
Let helpMsg=点击开始测量//默认启动的操作提示文本
如果(feature){//feature是全局的，通过点击鼠标判断是否已经绘制。
HelpMsg=双击结束测量//如果您之前单击进行绘制，将显示双击结束。
}
helptooltipelement . innerhtml=helpMsg；//设置dom的提示文本
help tooltip . set position(ev . coordinate)；//设置跟随鼠标的位置
helpoltipelement . class list . remove( hidden )//让他显示
})
This.createHelpTooltip() //创建那个helpTooltipElement。
Map.addLayer(layer) //向地图添加图层
},
然后调用了一个初始化操作提示的数字正射影像图元素。这个就是官网的函数，如果参数名和自己起的或者是地图的指向问题需要自己根据自己的实际修改一下。
createhelptooltip(){
if (helpTooltipElement) {
helpTooltipElement。父节点。移除子元素(helpTooltipElement)；
}
helpTooltipElement=document。createelement( div )；
helptooltipelement。class name= ol-tooltip hidden ；
帮助工具提示=新覆盖({
元素：helpTooltipElement，
偏移量：[15,0],
定位："中间偏左",
});
地图。添加覆盖(帮助工具提示)；
},
还有一点，为了好看，把官网的样式复制一下子。
样式范围
/深/。ol-工具提示{
位置：相对；
背景：rgba(0，0，0，0.5)；
边框-半径：4px
颜色：白色；
填充：4px 8px
不透明度：0.7;
空白：nowrap
字体大小：12px
光标：默认；
用户选择：无；
}
/深/。ol-工具提示-测量{
不透明度：1;
字体粗细：粗体；
}
/深/。ol-工具提示-静态{
背景色：# ffcc33
颜色：黑色；
边框：1px纯白；
}
/深/。ol-工具提示-测量：之前
/深/。ol-工具提示-静态：之前{
border-top: 6px solid rgba(0，0，0，0.5)；
右边框：6px纯色透明；
左边边框：6px纯色透明；
内容："";
位置：绝对；
底部：-6px；
左边距：-7px；
左：50%;
}
/深/。ol-工具提示-静态：之前{
border-top-color:# ffcc 33；
}
/风格
然后就可以看到我们点击"开始测距"按钮之后，上面代码执行，鼠标旁边就出现一个小小的操作提示。
鼠标绘制线
好的，通过上面的代码呢，我们成功的绘制出了提示框，然后就是鼠标绘制，代码也很简单，在地图监听的指针移动方法中，继续创建一个画进行绘制，关键代码就是下面：
draw=new Draw({
来源，//这个数据源就是我们最开始的那个数据源，这是简写，实际上是来源：来源，
类型： LineString ，//绘制线
样式：新样式({ //绘制完成之前线的样式，这是官网的样式，需要的话自己可以修改成自己想要的样子
填充：新填充({
颜色： rgba(255，255，255，0.2)，
}),
笔画：新笔画({
颜色： rgba(0，0，0，0.5)，
lineDash: [10，10]，
宽度：4,
}),
image: new CircleStyle({
半径：5,
笔画：新笔画({
颜色： rgba(0，0，0，0.7)，
}),
填充：新填充({
颜色： rgba(255，255，255，0.2)，
}),
}),
}),
});
然后把画绑定到地图上面。
地图。添加互动(draw)；//绘制绑定到地图上面去
然后就实现了鼠标绘制线。
设置距离信息窗
在我们点击开始测量的时候呢，在我们拖动鼠标的时候，会在上方显示出当前距离起点的距离，这个地方代码实现就是下面的样子，继续在上面的代码后面写：
//开始监听绘制
draw.on(drawstart ，(evt)={
特色=evt.feature//功能就是全局的
设tooltipCoord=evt.coordinate//鼠标当前的位置
listener=feature.getGeometry().on(change ，function (evt) {
常量geom=evt.target
let输出=格式长度(geom)；//距离的格式
tooltipCoord=geom。getlast coordinate()；//设置鼠标位置改变后的实时位置
measuretoultipelement。innerhtml=output//设置提示框的内容，就是距离
测量工具提示。设置位置(tooltipCoord)；//设置距离提示框的位置
});
});
//格式化长度，直接官网代码
常量格式长度=函数（行){
const length=getLength(line)；
让输出；
如果(长度100) {
output=Math.round(长度/1000)* 100)/100 公里；
}否则{
output=Math.round(长度* 100)/100 m ；
}
返回输出；
};
这个。createmeasuretoltip()//创建那个距离的提示框
然后上面代码调用了一个方法。
createmeasuretoltip(){
if(measuretoltipelement){
measuretoultipelement。父节点。移除子级(measuretoultipelement)；
}
measuretoultipelement=document。createelement( div )；
测量工具元素。class name= ol-tooltip ol-tooltip-measure ；
measureTooltip=新覆盖({
元素：measureTooltipElement，
偏移量：[0,-15],
定位："底部居中",
stopEvent: false，
insertFirst: false，
});
this.drawElements.push(测量工具提示)
地图。添加覆盖(测量工具提示)；
},
完成上面的代码之后，我们在点击开始测量之后，会在鼠标上方实时显示当前鼠标位置距离起点的距离。
绘制完成
上边已经实现了点击开始测距，并且实时显示距离信息，接下来就是双击完成时候显示出总长度。
继续在之前代码后边写：
//双击绘制完成
画吧。on( drawind ，()={
measuretoultipelement。class name= ol-tooltip ol-tooltip-static ；
measureTooltip.setOffset([0，-7])；
功能=空
measureTooltipElement=null
这个。createmeasuretoltip()；
unByKey(监听器);
});
上边的代码基本上就是官网的代码，但是变量名不一样的地方需要稍微改一下。
通过上面的代码就实现了双击测量完成的功能。
好吧，到此为止，测距功能全部完成！
取消绘制
绘制功能完成了，就需要取消绘制，取消绘制需要在点击"取消绘制"按钮之后，取消地图绘制功能，删除界面上已经绘制过的内容。
首先我们需要删除地图上绘制过的内容，包括连线，以及弹窗。
这个地方需要注意一下，我们需要把绘制的图层，比如连线，和弹窗都保存到一个或者是几个列表里面，然后在点击按钮的时候，去遍历删除。
所以说我们要在点击测距时候加载到地图的图层之后，将创建的图层添加到一个数组存起来。
map.addLayer(图层)
this.drawLayers.push(layer) //保存起来
包括那个总距离的弹窗。
this.drawElements.push(测量工具提示)
地图。添加覆盖(测量工具提示)；//保存起来
然后点击"取消测量"按钮的时候执行下面的代码：
//取消绘制
cancal() {
对于(设I=0；我这个。绘制图层。长度；i ) {
地图。移除图层(这。绘制图层[I])
}
对于(设I=0；我这个。绘制元素。长度；i ) {
地图。移除覆盖(这。绘制元素[I])
}
this.drawLayers=[]
this.drawElements=[]
map.removeInteraction(draw)
unby键(地图鼠标移动)；
},
这样就可以了。
这样就完成了！
全部代码
这里分享一下全部代码，就不放资源了，下载还花钱，我也是跟人家学的，没必要都。
模板
div class=home
div class=set
button class= BTN @ click= distance()测距/按钮
button class= BTN @ click= cancal()取消/按钮
/div
div id=map ref=map/div
/div
/模板
脚本
导入“ol/ol。CSS”；
从" ol/交互/绘图"导入绘图；
从" ol/地图"导入地图；
从" ol/覆盖"导入覆盖；
从" ol/视图"导入视图；
从" ol/style "导入{ Circle as CircleStyle，Fill，Stroke，Style }。
从" ol/geom "导入{ LineString，Polygon }；
从" ol/source "导入{ OSM，向量为向量源}；
从" ol/层"导入{平铺为TileLayer，矢量为矢量层}；
从" ol/球体"导入{ getArea，getLength }；
从" ol/可观察"导入{取消键}；
var map=null
var helpTooltipElement=null
var特征=空
var帮助工具提示=null
var draw=null
var measureTooltipElement=null
var测量工具提示=空
var监听器=null
var mapMouseMove=null
导出默认值{
姓名：家，
data() {
返回{
drawLayers: []，
drawElements: []，
}
},
已安装(){
this.initMap()
},
方法：{
//初始化地图
initMap() {
地图=新地图({
图层：[
新平铺层({
来源：新OSM()，
}),
],
目标："地图",
视图：新视图({
中心：[0,0],
缩放：5,
maxZoom: 18，
//投影： EPSG:4326 ，
constrainResolution: true，//设置缩放级别为整数
smoothResolutionConstraint:false，//关闭无级缩放地图
}),
});
},
//测距
距离(){
let source=new VectorSource()
常数层=新矢量层({
来源：来源，
样式：新样式({
填充：新填充({
颜色： rgba(255，255，255，0.2)，
}),
笔画：新笔画({
颜色： #ffcc33 ，
宽度：4,
}),
image: new CircleStyle({
半径：7,
填充：新填充({
颜色： #ffcc33 ，
}),
}),
}),
});
map mousemove=map。on(指针移动，(ev)={
let helpMsg=点击开始测量
如果（特征){
helpMsg=双击结束测量
}
helptooltipelement。innerhtml=helpMsg
帮助工具提示。设置位置(电动。坐标)；
helptooltipelement。班级名单。移除(“隐藏”)
})
map.getViewport().addEventListener(mouseout ，function () {
helptooltipelement。班级名单。add( hidden )；
});
draw=new Draw({
来源，
类型：“线串”，
样式：新样式({
填充：新填充({
颜色： rgba(255，255，255，0.2)，
}),
笔画：新笔画({
颜色： rgba(0，0，0，0.5)，
lineDash: [10，10]，
宽度：4,
}),
image: new CircleStyle({
半径：5,
笔画：新笔画({
颜色： rgba(0，0，0，0.7)，
}),
填充：新填充({
颜色： rgba(255，255，255，0.2)，
}),
}),
}),
});
//开始坚挺绘制
draw.on(drawstart ，(evt)={
功能=evt.feature
设tooltipCoord=evt.coordinate
listener=feature.getGeometry().on(change ，function (evt) {
常量geom=evt.target
let输出=格式长度(geom)；
tooltipCoord=geom。getlast coordinate()；
measuretoultipelement。innerhtml=output
测量工具提示。设置位置(tooltipCoord)；
});
});
//双击绘制完成
画吧。on( drawind ，()={
measuretoultipelement。class name= ol-tooltip ol-tooltip-static ；
measureTooltip.setOffset([0，-7])；
功能=空
measureTooltipElement=null
这个。createmeasuretoltip()；
unByKey(监听器);
});
//格式化长度
常量格式长度=函数（行){
const length=getLength(line)；
让输出；
如果(长度100) {
output=Math.round(长度/1000)* 100)/100 公里；
}否则{
output=Math.round(长度* 100)/100 m ；
}
返回输出；
};
this.createHelpTooltip()
this.createMeasureTooltip()
map.addLayer(图层)
this.drawLayers.push(层)
地图。添加互动(draw)；
},
//取消绘制
cancal() {
对于(设I=0；我这个。绘制图层。长度；i ) {
地图。移除图层(这。绘制图层[I])
}
对于(设I=0；我这个。绘制元素。长度；i ) {
地图。移除覆盖(这。绘制元素[I])
}
this.drawLayers=[]
this.drawElements=[]
map.removeInteraction(draw)
unby键(地图鼠标移动)；
},
createmeasuretoltip(){
if(measuretoltipelement){
measuretoultipelement。父节点。移除子级(measuretoultipelement)；
}
measuretoultipelement=document。createelement( div )；
测量工具元素。class name= ol-tooltip ol-tooltip-measure ；
measureTooltip=新覆盖({
元素：measureTooltipElement，
偏移量：[0,-15],
定位："底部居中",
stopEvent: false，
insertFirst: false，
});
this.drawElements.push(测量工具提示)
地图。添加覆盖(测量工具提示)；
},
createhelptooltip(){
if (helpTooltipElement) {
helpTooltipElement。父节点。移除子元素(helpTooltipElement)；
}
helpTooltipElement=document。createelement( div )；
helptooltipelement。class name= ol-tooltip hidden ；
帮助工具提示=新覆盖({
元素：helpTooltipElement，
偏移量：[15,0],
定位："中间偏左",
});
地图。添加覆盖(帮助工具提示)；
},
},
};
/脚本
样式范围。主页{
宽度：100%;
身高：100%;
背景色：aliceblue
位置：相对；
}
#地图{
身高：100%;
宽度：100%;
}。设置{
位置：绝对；
top:0px；
右：0px
z指数：99;
}。btn {
边距：10px
}
/深/。隐藏{
显示：无；
}
/深/。ol-工具提示{
位置：相对；
背景：rgba(0，0，0，0.5)；
边框-半径：4px
颜色：白色；
填充：4px 8px
不透明度：0.7;
空白：nowrap
字体大小：12px
光标：默认；
用户选择：无；
}
/深/。ol-工具提示-测量{
不透明度：1;
字体粗细：粗体；
}
/深/。ol-工具提示-静态{
背景色：# ffcc33
颜色：黑色；
边框：1px纯白；
}
/深/。ol-工具提示-测量：之前
/深/。ol-工具提示-静态：之前{
border-top: 6px solid rgba(0，0，0，0.5)；
右边框：6px纯色透明；
左边边框：6px纯色透明；
内容："";
位置：绝对；
底部：-6px；
左边距：-7px；
左：50%;
}
/深/。ol-工具提示-静态：之前{
border-top-color:# ffcc 33；
}
/风格
以上就是Vue OpenLayer实现测距功能的详细内容，更多关于Vue OpenLayer测距的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。