openlayers绘制矩形
时间: 2023-07-22 22:30:47 浏览: 72
你可以使用 OpenLayers 的绘图工具 (Draw) 来绘制矩形。以下是一个简单的示例:
```javascript
// 创建一个绘图层
var drawLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
// 添加绘图层到地图中
map.addLayer(drawLayer);
// 创建一个绘图工具
var draw = new ol.interaction.Draw({
source: drawLayer.getSource(),
type: 'Circle' // 指定绘制类型为矩形
});
// 监听绘图完成事件
draw.on('drawend', function(event) {
// 获取绘制的矩形
var rectangle = event.feature.getGeometry();
});
// 添加绘图工具到地图中
map.addInteraction(draw);
```
上述代码中,我们首先创建一个绘图层 `drawLayer`,并将其添加到地图中。然后创建一个绘图工具 `draw`,指定绘制类型为矩形。接着监听绘图完成事件 `drawend`,在事件处理函数中获取绘制的矩形。最后将绘图工具添加到地图中,就可以开始绘制矩形了。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)