vue的openlayers使用教程,openlayers vue
本文主要详细介绍Vue如何使用openlayers绘制圆形和多边形。文章中的示例代码有详细的解释。感兴趣的朋友可以和边肖一起尝试一下。
目录
画圆，画多边形，画编辑多边形，完成这个地方的绘制。我就简单写一下，因为有些东西比较乱，有些包可以根据官网API开发文档中的错误提示自行添加，这里就不赘述了。
绘制圆形
这里画圆是指后台返回数据时，告诉你以某个经纬度坐标为圆心，或者顶点，以R为半径画一个圆，而不是用鼠标手动画。
首先画一个圆。首先，有一个数据源和一个图层来存储绘制的圆。这个很简单。那么你应该能够自己创建变量。我估计都是搞openlayer的。这些基础知识不应该不知道。我把关键代码写在这里。我觉得应该没问题。我使用默认的坐标3857，而不是4326。
Source=new vector Source()//创建数据源
Layer=新矢量层({//创建一个层
ZIndex: 1，//层的级别
})
layer . set source(source point)//将数据源绑定到层。
Map.addLayer(layerPoint) //向地图添加图层。
好了，通过上面的代码，在地图上创建一个图层来放置绘制的圆。
下一步是向这个数据源添加圆。这个，或者说这个，跟我之前的博客差不多。那些部分互相嵌套，我还是贴图吧。这张图是大佬们编的，我就直接用了。
从上图可以看出，我们刚刚做的是将图层图层添加到地图中，将源数据源添加到图层中。下一步是向源代码添加特性。
//画一个圆
addCircle() {
假设特征=新特征({
标题：“北京”，
几何：New Circle(Fromlonlat([116.400819，39.916263])，this.getRadius (500))，//创建一个以[116.400819，39.916263]为圆心，以500米为半径的圆，但是这个半径不是很准确。
})
feature.setStyle(
新样式({
填充：新填充({
颜色： rgba(32，157，230，0.5)
})
})
)
源点。添加功能([功能])
},
上面的代码是在地图上的某个点和某个半径上画一个圆，但是半径不是很准确。如果有大佬解决了半径不准的问题，希望大家帮帮我。
绘制多边形
这个地方画多边形是指用鼠标手动画多边形，画完就可以得到鼠标画出的多边形的顶点坐标。
绘制
首先，画图同上，所以只要是图层，地图上都可以显示哪些图层。所以，先创建图层和数据源添加到地图上，然后，因为是鼠标绘制，所以需要在地图上设置绘制的多边形的样式，然后添加一个鼠标交互的工具，所以是下面的代码。
source=new vector source()；
vector=新的VectorLayer({
来源：来源，
样式：新样式({
填充：新填充({
颜色： rgba(255，255，255，0.2)，
}),
笔画：新笔画({
颜色： #ffcc33 ，
宽度：3，
}),
image: new CircleStyle({
半径：3，
填充：新填充({
颜色： #ffcc33 ，
}),
}),
}),
});
map.addLayer(矢量)
Modify=new Modify({ source:source })；
Snap=new Snap({ source:source })；
draw=new Draw({
来源：来源，
类型：“多边形”，
});
上面的代码实现了图层和交互工具的初始化，然后鼠标绑定事件的绘制。
map.addInteraction(修改)；
map . add interaction(draw)；
map . add interaction(snap)；
Draw.on(drawend ，e={//绘画完成的触发时间
const geometry=e . feature . get geometry()
const corrdinates=geometry . get coordinates()
let points=[]
坐标[0]。forEach(item={
XY=将(item， epsg: 3857 ， epsg:4326 )//转换为纬度和经度坐标。
点.推(xy)
})
这个。$message.success(顶点坐标为： JSON.stringify(磅))
map . remove interaction(draw)；//删除交互
map . remove interaction(snap)；//删除交互
map.removeInteraction(修改)；//删除交互
});
编辑多边形
如果再编辑一下，这个就很简单了。上一步不是去掉三个了吗？第一个是鼠标画图。编辑时，除了鼠标画图，其他两个去掉的交互都可以添加。
map.addInteraction(修改)；
map . add interaction(snap)；
完成绘制
绘制完成后，只需移除交互工具，重新获得顶点坐标列表即可。
map . remove interaction(draw)；//移除绘画交互
map . remove interaction(snap)；//移除绘画交互
map.removeInteraction(修改)；//移除绘画交互
let feature=source . get features()[0]
const geometry=feature . get geometry()
const corrdinates=geometry . get coordinates()
let points=[]
坐标[0]。forEach(item={
设xy=transform(item， EPSG:3857 ， EPSG:4326 )
点.推(xy)
})
这个。$message.success(顶点坐标为： JSON.stringify(磅))
不要在这里映射。
这就是这篇关于Vue使用openlayers绘制圆形和多边形的文章。有关Vue openlayers绘制圆形多边形的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。