openlayers画点、线、面
实现效果
实现步骤
1 定义几个按钮按钮
这里用的elementui
<el-button-group>
<el-button type="primary" @click="drawVector('Point')">画点</el-button>
<el-button type="primary" @click="drawVector('LineString')">画线 </el-button>
<el-button type="primary" @click="drawVector('Polygon')">画面</el-button>
<el-button type="primary" @click="drawVector('Circle')">画圆</el-button>
<el-button type="primary" @click="drawVector('None')">清除</el-button>
</el-button-group>
2 定义按钮的点击事件
主要步骤:
- 清除Interaction
- 判断按钮类型
- 如果是画东西的按钮就执行addInteraction函数,来画点、线、面
- 如果是清除图形的按钮,就先获取map的所有layers,然后根据name删除前面画的点、线、面
drawVector(type) {
this.map.removeInteraction(this.draw);
if (type !== 'None') {
console.log(type);
this.addInteraction(type);
} else {
//清空绘制图形
this.map.getAllLayers().forEach((element) => {
console.log(element.values_.name);
if (element.values_.name == 'drawtest') {
console.log(element.values_.name);
this.map.removeLayer(element);
}
});
}
},
3 addInteraction绘制图形
主要步骤:
- 定义一个vector作为layer
- 给其添加一个name属性,便于后面可以按照name清除图形
- 指定其style属性
- 指定其zIndex属性大于9,因为我这个osm的底图默认的zInex居然是9,所以我画的图形都被osm底图盖住看不到了
- 使用map.allLyaer()将vector添加到地图中
- 定义一个Draw,指定其source和type(既点、线或者面)
- 将addInteraction添加至map中
//根据绘制类型进行交互绘制图形处理
addInteraction(type) {
//实例化一个矢量图层Vector作为绘制层
this.vector = new VectorLayer({
name: 'drawtest',
source: new VectorSource({ wrapX: false }),
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.5)',
}),
stroke: new Stroke({
color: '#e60039',
width: 2,
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#e60039',
}),
}),
}),
zIndex: 10,
});
//将绘制层添加到地图容器中
this.map.addLayer(this.vector);
this.draw = new Draw({
source: this.vector.getSource(),
type: type,
});
this.map.addInteraction(this.draw);
},
获取代码
- 关注公粽号“
老靳的WebGIS
”回复ol06
获取
1 使用vscode打开
2 使用npm i 命令安装引用的库
3 使用npm run serve 命令运行程序