vue+openlayers图形交互，实现多边形绘制、编辑和保存

知识点：
1.绘制多边形，实例化ol.interaction.Draw对象
draw_inter = new ol.interaction.Draw({
source: source_draw,//矢量地图源
type: “Polygon”,//绘图类型
});
//将交互绘图对象添加到地图中
map.addInteraction(draw_inter)
1
2
3
4
5
6
2.图形交互编辑，实例化ol.interaction.Select对象和ol.interaction.Modify对象

let select_f=new ol.interaction.Select({
multi:false //取消多选
})
map.addInteraction(select_f);
let modify_f = new ol.interaction.Modify({
features: select_f.getFeatures()//将选中的要素添加修改功能
})
map.addInteraction(modify_f)
1
2
3
4
5
6
7
8
绘制多边形编辑并保存—- js核心代码
/**
* map 地图对象
* source_draw 用于绘制形状的矢量地图源
* vectorLayer 矢量绘制层
* draw_inter 绘制形状的交互对象
* sketch 当前绘制对象(feature)
* popup_overlay 弹窗overlay，绘制完成后展示编号
* layer_poly 用于展示多边形的layer层
*/
var map,source_draw,vectorLayer,draw_inter,popup_overlay,sketch,layer_poly

}else{
vectorLayer.getSource().removeFeature(sketch)
that_.$message({
message: ‘删除成功！！！’,
type: ‘success’
})
}
sketch=null
that_.$nextTick(() => {
if (this.$refs[formName]!==undefined) {
this.$refs[formName].resetFields();
}
})
},
addOverlay1(new_geo){
//添加弹窗
let that_= this
let elPopup = that_.$refs.popup_ol1
popup_overlay = new ol.Overlay({
element: elPopup,
offset:[0,0], //popup的偏移量
positioning: ‘center-center’,
autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整设置自动平移效果
autoPanAnimation: {
duration: 250 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度. 单位为毫秒（ms）
}
})
map.addOverlay(popup_overlay)
that_.popup_ol1 = true
//声明一下变量
let tooltipCoord
let gem1=sketch.getGeometry()
let type_geo=gem1.getType()
let coor=gem1.getCoordinates()
//以下是为表单添加数据
//timeid数据
that_.formp.dk_id=sketch.getProperties().attribute[“dk_id”]
//面积数据
if (type_geo==”Polygon”){
//获取多变形内部点的坐标
tooltipCoord = gem1.getInteriorPoint().getCoordinates()
let area = ol.sphere.getArea(gem1)
let num1=(Math.round(area * 100) / 100)*0.0015
let output = num1.toFixed(2) + ‘亩’
that_.formp.area=output
}else if(type_geo==”LineString”){
tooltipCoord = gem1.getLastCoordinate()
var length = ol.sphere.getLength(gem1)
let output
if (length > 100) {
output = Math.round((length / 1000) * 100) / 100 + ‘ ‘ + ‘km’;
} else {
output = Math.round(length * 100) / 100 + ‘ ‘ + ‘m’;
}
that_.formp.area=output
}
setTimeout(() => {
popup_overlay.setPosition(tooltipCoord)
// console.log(tooltipCoord)
}, 0)
//地块类型数据和id
let state=sketch.getProperties().attribute[“state”]
if(!state){
that_.formp.type_dk=sketch.getProperties().attribute[“type_dk”]
}
//坐标点数据
that_.formp.coor=String(coor)
},
//对获取后台数据进行展示到地图中
dkOutline(coor_datas){
let that_ =this
//多边形要素数组
let poly_Features=[]
// console.log(coor_datas)
for (var i = 0; i < coor_datas.length; i++){
// console.log(coor_datas[i].type_dk)
var attr1={
dk_id:coor_datas[i].dk_id,
type_dk:coor_datas[i].type_dk,
state:0
}
// console.log(coor_datas[i].coordinates)
poly_Features.push(new ol.Feature({
geometry: new ol.geom.Polygon([coor_datas[i].coordinates]),
attribute: attr1
}))
}
//实例化一个矢量图层Vector作为绘制层
let source_poly = new ol.source.Vector({
features: poly_Features
})
layer_poly = new ol.layer.Vector({
// visible: false,
source: source_poly,
style: function (feature) {
let type_dk=feature.values_.attribute.type_dk//获取feature的属性的自定义信息
let color_define=”#e74c3c”
let text =”旱改水地块”
if (type_dk==”A”){
color_define=”#e74c3c”
text =”旱改水地块”
}else if (type_dk==”B”){
color_define=”#e67e22″
text =”施肥地块”
}else if (type_dk==”C”){
color_define=”#3498db”
text =”缓释肥实验地块”
}
else if (type_dk==”D”){
color_define=”#2ecc71″
text =”康泽公司地块”
}else if (type_dk==”E”){
color_define=”#9b59b6″
text =”石埠奶场征地”
}
return new ol.style.Style({
fill: new ol.style.Fill({ //填充样式
color: ‘rgba(0, 0, 0, 0.5’
}),
stroke: new ol.style.Stroke({ //线样式
color: color_define,
width: 2
}),
text: new ol.style.Text({
text: text,
font: ’16px Calibri,sans-serif’,
fill: new ol.style.Fill({
color: ‘#fff’
}),
backgroundFill: new ol.style.Fill({ // 填充背景
color: ‘rgba(0,0,0,0.4)’,
}),
}),
})
}
})
//将绘制层添加到地图容器中
map.addLayer(layer_poly)
},
}
})
————————————————
版权声明：本文为CSDN博主「小黑猪hhh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46074818/article/details/117807715

vue+openlayers图形交互，实现多边形绘制、编辑和保存

相关文章

归档