openlayers如何实现几何图形重编辑

在做openlayers开发时很多人会遇到需要把前端展示的某个几何图形重新编辑形状的需求,这里我分享一下我的实现流程。
首先我们要用到修改要素几何–Modify,要修改已添加到现有源中的功能,请使用source选项构建修改交互 。如果要修改集合中的功能(例如,选择交互使用的集合),请使用features选项构造交互。交互必须使用source或features选项构造 ,下面我用的是features。

<script>
	import Modify from 'ol/interaction/Modify';
    import Snap from 'ol/interaction/Snap';
	export default {
		methods{
			reDrawGeom(){
				this.modify = new Modify({
		          features: iSelect.getFeatures();//我这里的iSelect是通过通过Select选择的几何图形
		        });
		        this.snap = new Snap({
		          features: iSelect.getFeatures()
		        });
		        this.map.addInteraction(this.snap);
		        this.map.addInteraction(this.modify);
		        this.modify.on('modifyend', (evt)=>{
					var extent = evt.features.item(0).getGeometry().getCoordinates()[0];//这样是拿新几何图形的坐标。
				})
			}
		}
	}
</script>

希望能帮到正在学习openlayers的小伙伴!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers实现几何体镂空,可以使用 `ol.geom.Polygon` 类和 `ol.geom.GeometryCollection` 类来实现。具体步骤如下: 1. 创建一个要镂空的多边形 `polygon` 和一个用于镂空的圆形 `circle`,并将它们合并到一个几何集合 `geometryCollection` 中。 ```javascript const polygon = new ol.geom.Polygon([[ [0, 0], [100, 0], [100, 100], [0, 100], [0, 0] ]]); const circle = new ol.geom.Circle([50, 50], 20); const geometryCollection = new ol.geom.GeometryCollection([polygon, circle]); ``` 2. 将几何集合 `geometryCollection` 转换为 OpenLayers 能够识别的格式,即 `ol.format.GeoJSON` 格式。 ```javascript const geojsonFormat = new ol.format.GeoJSON(); const feature = new ol.Feature({ geometry: geojsonFormat.writeGeometryObject(geometryCollection), }); ``` 3. 创建一个具有填充和边框的样式,以及一个空心样式。 ```javascript const fillStyle = new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.5)' }); const strokeStyle = new ol.style.Stroke({ color: 'blue', width: 1 }); const hollowStyle = [ new ol.style.Style({ fill: fillStyle, stroke: strokeStyle, geometry: polygon }), new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 1)' }), stroke: new ol.style.Stroke({ color: 'red', width: 1 }), geometry: circle }) ]; ``` 4. 创建一个矢量图层,并将镂空样式应用于该图层。 ```javascript const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [feature] }), style: hollowStyle }); ``` 5. 将矢量图层添加到地图中。 ```javascript const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], view: new ol.View({ center: [50, 50], zoom: 2 }) }); ``` 这样就可以在 OpenLayers 地图上实现几何体镂空。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值