From 4342ccaa6a8dff9f10554867891c3abfbc23f0b1 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 24 Mar 2022 11:59:06 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-java-web
---
src/components/basemap/drawFence.js | 80 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 80 insertions(+), 0 deletions(-)
diff --git a/src/components/basemap/drawFence.js b/src/components/basemap/drawFence.js
new file mode 100644
index 0000000..a5c76a0
--- /dev/null
+++ b/src/components/basemap/drawFence.js
@@ -0,0 +1,80 @@
+import ol from "ol";
+class drawFence {
+ constructor(props) {
+ //这里初始化class的时候需要传map对象进来
+ this.map = props;
+ this.source;
+ this.fenceLayer;
+ this.draw;
+ //样式
+ this.fenceStyle = 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'
+ })
+ })
+ })
+ this.init()
+ }
+ init() {
+ //临时图层的数据源
+ this.source = new ol.source.Vector();
+ //新建临时图层，并设置临时图层渲染各种要素的样式
+ this.fenceLayer = new ol.layer.Vector({
+ source: this.source,
+ style: this.fenceStyle
+ });
+ this.map.addLayer(this.fenceLayer)
+ }
+ drawingEnd(evt) {
+ let geo = evt.feature.getGeometry()
+ let type = geo.getType(); //获取类型
+ console.log(geo)
+ //根据不同的类型执行不同的操作
+ const handle = {
+ 'Circle': () => {
+ //获取中心点和半径
+ let center = geo.getCenter()
+ let radius = geo.getRadius()
+ console.log(center, radius)
+ },
+ 'Polygon': () => {
+ //获取坐标点
+ let points = geo.getCoordinates()
+ console.log(points)
+ },
+ 'LineString': () => {
+ let points = geo.getCoordinates()
+ console.log(points)
+ }
+ }
+ if (handle[type]) handle[type]()
+ this.closeDraw()
+ }
+ closeDraw() {
+ this.map.removeInteraction(this.draw);
+ }
+ //画图
+ drawingFence(type) {
+ this.draw = new ol.interaction.Draw({
+ source: this.source, //设置要素源，绘制结束后将绘制的要素添加到临时图层
+ type: type, //绘制的类型
+ });
+ this.map.addInteraction(this.draw);
+ const that = this;
+ //绘图结束事件回调
+ this.draw.on('drawend', function (evt) {
+ that.drawingEnd(evt)
+ });
+ }
+}
+
+export default drawFence;
\ No newline at end of file
--
Gitblit v1.9.3