修改分区台账

README.md

@@ -1,3 +1,11 @@
+<!--
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2022-08-25 10:07:59
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2022-09-01 10:27:42
+ * @FilePath: \mysyWebGIS\README.md
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 # 安装依赖
 npm install
 npm install --ignore-scripts
@@ -52,3 +60,6 @@ npm install @babel/plugin-proposal-optional-chaining
 
 # 安装
  npm install x2js
+
+# 安装
+npm install @turf/turf 或者 cnpm install @turf/turf

package.json

@@ -14,6 +14,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@supermap/iclient-ol": "^11.0.0",
+    "@turf/turf": "^6.5.0",
     "axios": "0.27.2",
     "core-js": "^2.6.12",
     "echarts": "^4.9.0",

src/views/components/drawTools/index.js

@@ -1,11 +1,11 @@
 import {
-    Style,
-    Circle,
-    Icon,
-    Fill,
-    RegularShape,
-    Stroke,
-    Text
+  Style,
+  Circle,
+  Icon,
+  Fill,
+  RegularShape,
+  Stroke,
+  Text
 } from 'ol/style'
 
 import { OverviewMap, ScaleLine, MousePosition } from "ol/control";
@@ -13,254 +13,396 @@ import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
 import { OSM, XYZ, Vector as VectorSource } from "ol/source";
 import GeoJSON from "ol/format/GeoJSON";
 import { createStringXY, format } from "ol/coordinate";
-import { Select, Pointer, Draw, Modify,  } from "ol/interaction";
+import { Select, Pointer, Draw, Modify } from "ol/interaction";
 import { fromLonLat, toLonLat } from "ol/proj";
 import Feature from "ol/Feature";
 import { Point } from "ol/geom";
 import { createRegularPolygon, createBox } from 'ol/interaction/Draw'
-  
+
+import { spatialRelationship } from './spatialRelationship'
+
+/**
+ * 设置通用的图形符号
+ * */
+class DrawTools {
   /**
-   * 设置通用的图形符号
-   * */ 
-class DrawTools{
-    /**
-     * 地图
-     * */
-    map=null;
-
-    /**
-     * 点要素的默认样式
-     * */
-    point={
-      color:'#fc5531',
-      outColor:"#fc5531",
-      size:2,
-    }
+   * 地图
+   * */
+  map = null;
+
+  /**
+   * 点要素的默认样式
+   * */
+  point = {
+    color: '#fc5531',
+    outColor: "#fc5531",
+    size: 2,
+  }
+
+  /**
+   * 线要素的默认样式
+   * */
+  line = {
+    color: '#fc5531',
+    width: 3
+  }
+
+  /**
+   * 面要素的默认样式
+   * */
+  polygon = {
+    fillColor: 'rgba(252, 86, 49, 0.1)'
+  };
+
+  /**
+   * 绘制要素
+   * */
+  drawFeature = null;
+
+  /**
+   * 绘制图形资源
+   * */
+  vectorSource = null;
+
+  /**
+   * 绘制工具
+   * */
+  drawTool = null;
+
+  /**
+   * 图形修改工具
+  */
+  modifyTool = null;
+
+  /**
+   * 图形选择工具
+  */
+  select = null;
+
+  /**
+   * 图形修改工具
+  */
+  modify = null;
+
+  lineWeight = 1;
+
+  lineColor = "#e3e3e3";
 
-    /**
-     * 线要素的默认样式
-     * */
-    line={
-      color:'#fc5531',
-      width:3
+  color = [255, 255, 255];
+
+  opacity = 0.33
+
+  spatialRelationship = spatialRelationship
+
+  /**
+   * 初始化地图和绘制样式
+   * @map 地图元素
+   * @lineWeight 线宽 Integer
+   * @lineColor 先颜色 string  #e3e3e3
+   * @color 图形填充颜色  array  [255,255,255]
+   * @opacity 填充透明度  Float  0.33
+  */
+  initMap(map, lineWeight, lineColor, color, opacity) {
+    this.map = map
+    this.lineWeight = lineWeight
+    this.lineColor = lineColor
+    this.color = color
+    this.opacity = opacity
+  }
+  /**
+   * 初始化绘制事件
+   * @drawType String 绘制类型(Point、LineString、Polygon、Circle,Square,Box)=>(点、线、多边形、圆形、长方形、正方形)
+   * @isEdit Boolean 是否是图形新增或者编辑
+   * @returnFunc 回调函数
+   */
+  initDrawHandler(drawType, isEdit, returnFunc) {
+    if (this.map == null) {
+      console.log('请先初始化地图，终止绘制!')
+      return;
     }
+    this.removeInteraction()
+    //删除之前绘制图形
+    this.removeDrawSource()
+    let feature = null
+    const fillColor = this.color.filter(p => true)
+    fillColor.push(parseFloat(this.opacity));
+
+    const outlineWidth = this.lineWeight;
+    const outlineColor = this.lineColor;
 
-    /**
-     * 面要素的默认样式
-     * */
-    polygon={
-      fillColor:'rgba(252, 86, 49, 0.1)'
-    };
-
-    /**
-     * 绘制要素
-     * */
-    drawFeature=null;
-
-    /**
-     * 绘制图形资源
-     * */
-    vectorSource=null;
-
-    /**
-     * 绘制工具
-     * */
-    drawTool=null;
-
-    /**
-     * 图形修改工具
-    */
-    modifyTool=null;
-
-    initMap(map){
-      this.map = map
+    this.vectorSource = new VectorSource({ wrapX: false })
+    this.vectorLayer = new VectorLayer({
+      source: this.vectorSource,
+      style: this.styleFunction(fillColor, outlineWidth, outlineColor)
+    })
+    this.map.addLayer(this.vectorLayer)
+    let geometryFunction = null
+    let maxPoint
+    //绘制矩形
+    if (drawType === 'Square') {
+      drawType = 'Circle'
+      geometryFunction = createBox()
+    } else if (drawType === 'Box') {
+      drawType = 'Circle'
+      geometryFunction = createRegularPolygon(4)
     }
-    /**
-     * 初始化绘制事件
-     * @drawType String 绘制类型(Point、LineString、Polygon、Circle,Square,Box)=>(点、线、多边形、圆形、长方形、正方形)
-     * @isEdit Boolean 是否是图形新增或者编辑
-     * @returnFunc 回调函数
-     */
-     initDrawHandler(drawType, isEdit,returnFunc) {
-      if(this.map == null) {
-        console.log('请先初始化地图，终止绘制!')
-        return;
-      }
-      this.removeInteraction()
-      //删除之前绘制图形
-      this.removeDrawSource()
-      let feature = null
-      this.vectorSource = new VectorSource({ wrapX: false })
-      this.vectorLayer = new VectorLayer({
-        source: this.vectorSource
-      })
-      this.map.addLayer(this.vectorLayer)
-      let geometryFunction = null
-      let maxPoint
-      //绘制矩形
-      if (drawType === 'Square') {
-        drawType = 'Circle'
-        geometryFunction = createBox()
-      } else if (drawType === 'Box') {
-        drawType = 'Circle'
-        geometryFunction = createRegularPolygon(4)
-      }
 
-      this.drawTool = new Draw({
-        source: this.vectorSource,
-        wrapX: false,
-        maxPoints: maxPoint, //最大点数
-        type: drawType,
-        geometryFunction: geometryFunction
-      })
-      this.drawTool.on('drawstart', evt => {
-        //清理已绘制图形
-        this.removeDrawSource()
-        feature = evt.feature
-      })
-      this.drawTool.on('drawend', () => {
-        this.drawFeature = feature
-        this.map.removeInteraction(this.drawTool)
+
+    this.drawTool = new Draw({
+      source: this.vectorSource,
+      wrapX: false,
+      maxPoints: maxPoint, //最大点数
+      type: drawType,
+      geometryFunction: geometryFunction
+    })
+    this.drawTool.on('drawstart', evt => {
+      //清理已绘制图形
+      this.removeDrawSource()
+      feature = evt.feature
+    })
+    this.drawTool.on('drawend', () => {
+      this.drawFeature = feature
+      this.map.removeInteraction(this.drawTool)
+      this.modifyFeature(returnFunc)
+      returnFunc(feature)
+    })
+    this.map.addInteraction(this.drawTool)
+  }
+  
+  /**
+   * 修改要素
+   * @returnFunc修改完成的回调
+  */
+  modifyFeature(returnFunc) {
+    if (this.vectorSource && this.drawFeature) {
+      //初始化一个交互选择控件，并添加到地图容器中
+      this.select = new Select();
+      this.map.addInteraction(this.select);
+      //初始化一个交互编辑控件，并添加到地图容器中
+      this.modify = new Modify({
+        features: this.select.getFeatures()           //选中的要素集
+      });
+      this.map.addInteraction(this.modify);
+      this.modify.on('modifyend',(evt)=>{
+        let feature = evt.features.array_[0]
         returnFunc(feature)
       })
-      this.map.addInteraction(this.drawTool)
+      //设置激活状态变更的处理
+      this.setEvents();
+      this.setActive(true);
     }
+  }
+  /**
+   * 设置事件
+  */
+  setEvents() {
+    var selectedFeatures = this.select.getFeatures();       //选中的要素集
+    //添加选中要素变更事件
+    this.select.on("change:active", () => {
+      //遍历选择要素集，返回当前第一个要素（即移除的要素）
+      selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
+    });
+  }
 
-    /**
-     * 移除清理
-     */
-     removeInteraction() {
-      if(this.map == null) return;
-      if (this.drawTool) {
-        this.map.removeInteraction(this.drawTool)
-      }
-      if (this.modifyTool) {
-        this.map.removeInteraction(this.modifyTool)
+  /**
+   * 激活事件
+  */
+  setActive(active) {
+    if (this.select) this.select.setActive(active);                  //激活选择要素控件
+    if (this.modify) this.modify.setActive(active);                  //激活修改要素控件
+  }
+
+  /***
+   * 修改VectorLayer的style
+   * @lineWeight 线宽 Integer
+   * @lineColor 先颜色 string  #e3e3e3
+   * @color 图形填充颜色  array  [255,255,255]
+   * @opacity 填充透明度  Float  0.33
+  */
+  updateStyle(lineWeight, lineColor, color, opacity) {
+    this.lineWeight = lineWeight
+    this.lineColor = lineColor
+    this.color = color
+    this.opacity = opacity
+    const fillColor = this.color.filter(p => true)
+    fillColor.push(parseFloat(this.opacity));
+    const outlineWidth = this.lineWeight;
+    const outlineColor = this.lineColor;
+    let style = this.styleFunction(fillColor, outlineWidth, outlineColor)
+    if (this.vectorLayer) {
+      let features = this.vectorLayer.getSource().getFeatures()
+      if (features) {
+        for (let i = 0; i < features.length; i++) {
+          features[i].setStyle(style)
+        }
       }
     }
+  }
+  /**
+   * 设置绘制图形样式
+   * @fillColor 图形填错颜色和透明度，如：[255, 255, 255, 0.33]
+   * @outlineWidth 图形边线宽度 如：2
+   * @outlineColor 图形边线颜色:如：#dc5246
+   * 
+  */
+  styleFunction(fillColor, outlineWidth, outlineColor) {
+    return new Style({
+      fill: new Fill({
+        color: fillColor
+      }),
+      stroke: new Stroke({
+        width: outlineWidth,
+        color: outlineColor
+      }),
+      // text: new Text({
+      //   font: '10px Microsoft YaHei',
+      //   text: '多边形',
+      //   overflow: true,
+      //   textAlign: 'center', // 对齐方式
+      //   textBaseline: 'middle', // 文本基线
+      //   fill: new Fill({
+      //     color: '#0e84ba'
+      //   }),
+      //   offsetX: 0
+      // })
+    })
+  }
 
-    /**
-     * 清除绘制资源
-     */
-     removeDrawSource() {
-      if (this.vectorSource) {
-        this.vectorSource.clear()
-        // console.log("1、清理已绘制图形....");
-      }
+  /**
+   * 移除清理
+   */
+  removeInteraction() {
+    if (this.map == null) return;
+    if (this.drawTool) {
+      this.map.removeInteraction(this.drawTool)
     }
-  
-    /**
-    * 获取点样式
-    * @param size 点大小
-    * @param color 点颜色
-    * @param outSize 外边框大小
-    * @param outColor 外边框颜色
-     */
-    getPointStyle(size,color,outSize,outColor){
-      let style= new Style({
-        image: new Circle({
-          radius: size|| this.point.size,
-          fill: new Fill({
-            color: color||this.point.color
-          }),
-          stroke: new Stroke({
-            color:outColor||this.line.color,
-            width:outSize|| this.line.width
-          })
-        })
-      })
-      return style;
+    if (this.modifyTool) {
+      this.map.removeInteraction(this.modifyTool)
     }
-  
-    /**
-    * 获取线样式
-    * @param size 线的宽度大小
-    * @param color 线颜色
-     */
-    getLineStyle(width,color){
-      let style= new Style({
-        stroke: new Stroke({
-          color: color||this.line.color,
-          width: width||this.line.width
-        })
-      })
-      return style;
+  }
+
+  /**
+   * 清除绘制资源
+   */
+  removeDrawSource() {
+    if (this.vectorSource) {
+      this.vectorSource.clear()
+      // console.log("1、清理已绘制图形....");
     }
-  
-    /**
-    * 获取面样式
-    * @param lineWidth 面的边界线宽度(默认宽度3)
-    * @param lineColor 面的边界颜色(默认红色)
-    * @param fillColor 面里面的颜色(默认红色透明度0.1)
-     */
-    getPolygonStyle(lineWidth,lineColor,fillColor){
-      let style= new Style({
+  }
+
+  /**
+  * 获取点样式
+  * @param size 点大小
+  * @param color 点颜色
+  * @param outSize 外边框大小
+  * @param outColor 外边框颜色
+   */
+  getPointStyle(size, color, outSize, outColor) {
+    let style = new Style({
+      image: new Circle({
+        radius: size || this.point.size,
         fill: new Fill({
-          color:fillColor||this.polygon.fillColor
-        }),      
+          color: color || this.point.color
+        }),
         stroke: new Stroke({
-          color: lineColor||this.line.color,
-          width: lineWidth||this.line.width
+          color: outColor || this.line.color,
+          width: outSize || this.line.width
         })
       })
-      return style;
-    }
-  
-    /**
-    * 获取全套的样式(点、线、面)
-    * @param pointSize 点的大小
-    * @param pointColor 点的颜色
-    * @param lineWidth 面的边界线宽度(默认宽度3)
-    * @param lineColor 面的边界颜色(默认红色)
-    * @param fillColor 面里面的颜色(默认红色透明度0.1)
-     */
-    getAllStyle(pointSize,pointColor,lineWidth,lineColor,fillColor){
-      return this.setAllStyle(pointSize,pointColor,lineWidth,lineColor,fillColor,null)
-    }
-  
-    /**
-    * 获取绘制时的样式
-    * @param pointSize 点的大小
-    * @param pointColor 点的颜色
-    * @param lineWidth 面的边界线宽度(默认宽度3)
-    * @param lineColor 面的边界颜色(默认红色)
-    * @param fillColor 面里面的颜色(默认红色透明度0.1)
-    * @param lineDash 线打断比例(默认打断[10,10])
-     */
-    getDrawStyle(pointSize,pointColor,lineWidth,lineColor,fillColor,lineDash){
-      return this.setAllStyle(pointSize,pointColor,lineWidth,lineColor,fillColor,lineDash||[10,10])
-    }
-  
-    /**
-    *设置全套的的样式
-    * @param pointSize 点的大小
-    * @param pointColor 点的颜色
-    * @param lineWidth 面的边界线宽度(默认宽度3)
-    * @param lineColor 面的边界颜色(默认红色)
-    * @param fillColor 面里面的颜色(默认红色透明度0.1)
-    * @param lineDash 线打断比例(默认不打断[0,0])
-     */
-   setAllStyle(pointSize,pointColor,lineWidth,lineColor,fillColor,lineDash){
-      let style= new Style({
+    })
+    return style;
+  }
+
+  /**
+  * 获取线样式
+  * @param size 线的宽度大小
+  * @param color 线颜色
+   */
+  getLineStyle(width, color) {
+    let style = new Style({
+      stroke: new Stroke({
+        color: color || this.line.color,
+        width: width || this.line.width
+      })
+    })
+    return style;
+  }
+
+  /**
+  * 获取面样式
+  * @param lineWidth 面的边界线宽度(默认宽度3)
+  * @param lineColor 面的边界颜色(默认红色)
+  * @param fillColor 面里面的颜色(默认红色透明度0.1)
+   */
+  getPolygonStyle(lineWidth, lineColor, fillColor) {
+    let style = new Style({
+      fill: new Fill({
+        color: fillColor || this.polygon.fillColor
+      }),
+      stroke: new Stroke({
+        color: lineColor || this.line.color,
+        width: lineWidth || this.line.width
+      })
+    })
+    return style;
+  }
+
+  /**
+  * 获取全套的样式(点、线、面)
+  * @param pointSize 点的大小
+  * @param pointColor 点的颜色
+  * @param lineWidth 面的边界线宽度(默认宽度3)
+  * @param lineColor 面的边界颜色(默认红色)
+  * @param fillColor 面里面的颜色(默认红色透明度0.1)
+   */
+  getAllStyle(pointSize, pointColor, lineWidth, lineColor, fillColor) {
+    return this.setAllStyle(pointSize, pointColor, lineWidth, lineColor, fillColor, null)
+  }
+
+  /**
+  * 获取绘制时的样式
+  * @param pointSize 点的大小
+  * @param pointColor 点的颜色
+  * @param lineWidth 面的边界线宽度(默认宽度3)
+  * @param lineColor 面的边界颜色(默认红色)
+  * @param fillColor 面里面的颜色(默认红色透明度0.1)
+  * @param lineDash 线打断比例(默认打断[10,10])
+   */
+  getDrawStyle(pointSize, pointColor, lineWidth, lineColor, fillColor, lineDash) {
+    return this.setAllStyle(pointSize, pointColor, lineWidth, lineColor, fillColor, lineDash || [10, 10])
+  }
+
+  /**
+  *设置全套的的样式
+  * @param pointSize 点的大小
+  * @param pointColor 点的颜色
+  * @param lineWidth 面的边界线宽度(默认宽度3)
+  * @param lineColor 面的边界颜色(默认红色)
+  * @param fillColor 面里面的颜色(默认红色透明度0.1)
+  * @param lineDash 线打断比例(默认不打断[0,0])
+   */
+  setAllStyle(pointSize, pointColor, lineWidth, lineColor, fillColor, lineDash) {
+    let style = new Style({
+      fill: new Fill({
+        color: fillColor || this.polygon.fillColor
+      }),
+      stroke: new Stroke({
+        lineDash: lineDash || [0, 0],
+        color: lineColor || this.line.color,
+        width: lineWidth || this.line.width
+      }),
+      image: new Circle({
+        radius: pointSize || 0,
         fill: new Fill({
-          color: fillColor||this.polygon.fillColor
-        }),
-        stroke: new Stroke({
-          lineDash: lineDash||[0,0],
-          color: lineColor||this.line.color,
-          width: lineWidth||this.line.width
-        }),
-        image: new Circle({
-          radius: pointSize||0,
-          fill: new Fill({
-            color: pointColor||this.point.color
-          })
+          color: pointColor || this.point.color
         })
       })
-      return style;
-    }
+    })
+    return style;
+  }
 
 
-  }
-  
-  export const drawTools=new DrawTools();
+}
+
+export const drawTools = new DrawTools();

src/views/components/drawTools/spatialRelationship.js

@@ -0,0 +1,101 @@
+/*
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2022-08-31 09:28:13
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2022-08-31 10:50:50
+ * @FilePath: \river\src\components\Map\tools\spatialRelationship.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+class SpatialRelationship {
+
+    /***
+     * 点是否在面内
+     * @feature 几何要素
+     * @points  点坐标  [104.601103, 31.454998]
+    */
+    intersectsCoordinate(feature,points){
+      let geometry = feature.getGeometry()
+      const isIn = geometry.intersectsCoordinate(points);
+      return isIn
+    }
+    
+    /**
+  * 点和面关系
+  * @param point 点；[经度,纬度]；例：[116.353455, 40.080173]
+  * @param polygon 面；geojson格式中的coordinates；例：[[[116.1,39.5],[116.1,40.5],[116.9,40.5],[116.9,39.5]],[[116.3,39.7],[116.3,40.3],[116.7,40.3],[116.7,39.7]]]
+  *
+  * @return inside 点和面关系；0:多边形外，1：多边形内，2：多边形边上
+  */
+    pointInPolygon(point, polygon) {
+        var isInNum = 0;
+        for (var i = 0; i < polygon.length; i++) {
+            var inside = pointInRing(point, polygon[i])
+            if (inside === 2) {
+                return 2;
+            } else if (inside === 1) {
+                isInNum++;
+            }
+        }
+        if (isInNum % 2 == 0) {
+            return 0;
+        } else if (isInNum % 2 == 1) {
+            return 1;
+        }
+    }
+
+
+    /**
+    * 点和面关系
+    * @param point 点
+    * @param ring 单个闭合面的坐标
+    *
+    * @return inside 点和面关系；0:多边形外，1：多边形内，2：多边形边上
+    */
+    pointInRing(point, ring) {
+        var inside = false,
+            x = point[0],
+            y = point[1],
+            intersects, i, j;
+
+        for (i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+            var xi = ring[i][0],
+                yi = ring[i][1],
+                xj = ring[j][0],
+                yj = ring[j][1];
+
+            if (xi == xj && yi == yj) {
+                continue
+            }
+            // 判断点与线段的相对位置，0为在线段上，>0 点在左侧，<0 点在右侧
+            if (isLeft(point, [ring[i], ring[j]]) === 0) {
+                return 2; // 点在多边形边上
+            } else {
+                if ((yi > y) !== (yj > y)) { // 垂直方向目标点在yi、yj之间
+                    // 求目标点在当前线段上的x坐标。 由于JS小数运算后会转换为精确15位的float，因此需要去一下精度
+                    var xx = Number(((xj - xi) * (y - yi) / (yj - yi) + xi).toFixed(10))
+                    if (x <= xx) { // 目标点水平射线与当前线段有交点
+                        inside = !inside;
+                    }
+                }
+            }
+        }
+        return Number(inside);
+    }
+
+
+    /**
+    * 判断点与线段的相对位置
+    * @param point 目标点
+    * @param line 线段
+    *
+    * @return isLeft，点与线段的相对位置，0为在线段上，>0 p在左侧，<0 p在右侧
+    */
+    isLeft(point, line) {
+        var isLeft = ((line[0][0] - point[0]) * (line[1][1] - point[1]) - (line[1][0] - point[0]) * (line[0][1] - point[1]))
+        // 由于JS小数运算后会转换为精确15位的float，因此需要去一下精度
+        return Number(isLeft.toFixed(10))
+    }
+}
+
+export const spatialRelationship = new SpatialRelationship();

src/views/components/layerControl/widget.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2022-08-25 10:07:59
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2022-09-01 09:23:50
+ * @FilePath: \mysyWebGIS\src\views\components\layerControl\widget.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <el-dropdown placement="bottom" trigger="click" @visible-change="visibleChange">
     <span class="el-dropdown-link">图层<i class="el-icon-arrow-down el-icon--right"></i></span>

src/views/components/mapQueryTools/queryByGeoserver.js

@@ -0,0 +1,128 @@
+/*
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2022-08-30 14:18:06
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2022-09-01 14:43:25
+ * @FilePath: \mysyWebGIS\src\views\components\mapQueryTools\queryByGeoserver.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { GML, WFS } from "ol/format";
+import { intersects } from "ol/format/filter";
+import GeoJSON from "ol/format/GeoJSON";
+import * as turf from '@turf/turf'
+
+/**
+ * 设置通用的图形符号
+ * */
+class QueryByGeoserver {
+    /***
+     * 查询URL地址
+    */
+    GIS_SERVER_URL = null
+
+    queryAjax = null
+
+    xmlPara = null
+
+    bxmap = null
+
+    initQuery(url, xml, bxmap) {
+        this.GIS_SERVER_URL = url
+        this.xmlPara = xml
+        this.bxmap = bxmap
+    }
+
+
+    queryFeature() {
+        this.queryAjax = new Ajax.Request(
+            this.GIS_SERVER_URL,
+            { contentType: "application/xml", method: 'post', postBody: this.xmlPara, onComplete: this.showResponse }
+        );
+    }
+
+    showResponse(req) {
+        //openlayers的GML解析器
+        var gmlParse = new GML();
+        var features = gmlParse.read(req.responseText);
+        var icon = new OpenLayers.Icon('images/pp.gif');
+    }
+
+    /**
+     * 通过geometry查询范围内图形
+    */
+    async queryByGeometry(feature) {
+        let {srsName,featureNS,featurePrefix,featureTypes,outputFormat,geometryName} = this.bxmap
+        let filter = intersects(geometryName,feature.getGeometry())
+        
+        const featureRequest = new WFS().writeGetFeature({
+            srsName: srsName,   //坐标系统
+            featureNS: featureNS,  //命名空间 URI
+            featurePrefix: featurePrefix,  //工作区名称
+            featureTypes: [featureTypes],  //查询图层，可以同一个工作区下多个图层，逗号隔开
+            outputFormat: outputFormat ? outputFormat : 'application/json', //输出格式
+            //查询过滤条件,图层数据的空间字段为图层存储的geometry
+            filter: filter
+        });
+        const url = this.bxmap.url
+        return new Promise(resolve => {
+            fetch(url, {
+                method: 'POST',
+                body: new XMLSerializer().serializeToString(featureRequest)
+            }).then(function (response) {
+                return response.json();
+            }).then(function (json) {
+                var features = new GeoJSON().readFeatures(json);
+                if (features && features.length > 0) {
+                    resolve({
+                        code: 1,
+                        message: '成功',
+                        result: features
+                    })
+                }
+                else {
+                    resolve({
+                        code: -1,
+                        message: '未查询到数据',
+                        result: []
+                    })
+                }
+            }).catch(ex => {
+                resolve({
+                    code: -1,
+                    message: '查询出错:' + ex,
+                    result: []
+                })
+            });
+        })
+    }
+    
+    /**
+     * 通过feature查询在feature外接矩形的要素
+     *   里面的vectorLayer的features数据
+    */
+    getFeatursByVector(vectorLayer,feature){
+        const polygon = feature.getGeometry();
+        const extent = polygon.getExtent();
+        const coordinates = polygon.getCoordinates()
+        const features = vectorLayer.getSource().getFeaturesInExtent(extent); 
+        return features
+    }
+    
+    /**
+     * 通过feature查询在deature里面的vectorLayer的features数据
+     * 调用工具类turf
+    */
+    getFeatureByTurf(vectorLayer,feature){
+        let vectorsource = vectorLayer.getSource()
+        const polygon = feature.getGeometry();
+        const features = vectorsource.getFeatures()
+        const jsonFeatures = new GeoJSON().writeFeaturesObject(features)
+        const jsonPolygon = new GeoJSON().writeGeometryObject(polygon)
+        const ptsWithin = turf.pointsWithinPolygon(jsonFeatures, jsonPolygon);
+        return ptsWithin
+    }
+
+}
+
+export const queryByGeoserver = new QueryByGeoserver();

src/views/components/olMap/index.vue

@@ -5,7 +5,13 @@
       <div v-if="layerCcontrol" class="tool-bar-item iconfont iconbwzl1">
         <layer-control v-if="map" :parent="this"></layer-control>
       </div>
-      <div v-if="measure" class="tool-bar-item iconfont iconclgj" title="测量工具" @mouseenter="showMeasure=true" @mouseleave="showMeasure=false">
+      <div
+        v-if="measure"
+        class="tool-bar-item iconfont iconclgj"
+        title="测量工具"
+        @mouseenter="showMeasure = true"
+        @mouseleave="showMeasure = false"
+      >
         测量
         <measure-tool v-show="showMeasure" :map="map"></measure-tool>
       </div>
@@ -19,16 +25,16 @@ import "ol/ol.css";
 import Map from "ol/Map";
 import View from "ol/View";
 import { OverviewMap, ScaleLine, MousePosition } from "ol/control";
-import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
-import { OSM, XYZ, Vector as VectorSource } from "ol/source";
+import { Tile as TileLayer, Vector as VectorLayer, Image } from "ol/layer";
+import { OSM, XYZ, Vector as VectorSource, TileWMS, ImageWMS } from "ol/source";
 import GeoJSON from "ol/format/GeoJSON";
 import { Style, Fill, Stroke, Icon, Text, Circle } from "ol/style";
 import { createStringXY, format } from "ol/coordinate";
-import { Select, Pointer, Draw, Modify,  } from "ol/interaction";
+import { Select, Pointer, Draw, Modify } from "ol/interaction";
 import { fromLonLat, toLonLat } from "ol/proj";
 import Feature from "ol/Feature";
 import { Point } from "ol/geom";
-import { createRegularPolygon, createBox } from 'ol/interaction/Draw'
+import { createRegularPolygon, createBox } from "ol/interaction/Draw";
 
 // 地图配置
 import { mapConfig } from "@/views/components/olMap/mapConfig";
@@ -46,28 +52,28 @@ export default {
   components: {
     measureTool,
     layerControl,
-    monitorPopup
+    monitorPopup,
   },
   props: {
     legend: {
       type: Boolean,
-      default: false
+      default: false,
     },
     layerCcontrol: {
       type: Boolean,
-      default: false
+      default: false,
     },
     measure: {
       type: Boolean,
-      default: false
+      default: false,
     },
     OverviewMap: {
       type: Boolean,
-      default: false
+      default: false,
     },
     mapSelect: {
       type: Boolean,
-      default: false
+      default: false,
     },
   },
   data() {
@@ -95,11 +101,11 @@ export default {
           center: [104.59981, 31.453818],
           zoom: 17,
           maxZoom: 18,
-          minZoom: 4
-        })
+          minZoom: 4,
+        }),
       });
       // 监听地图容器变化调整地图范围
-      elementResizeDetectorMaker().listenTo(mapContainer, element => {
+      elementResizeDetectorMaker().listenTo(mapContainer, (element) => {
         if (this.map) this.map.updateSize();
       });
 
@@ -111,43 +117,68 @@ export default {
       // 添加比例尺
       this.map.addControl(
         new ScaleLine({
-          units: "metric"
+          units: "metric",
         })
       );
-      
+
       // 添加坐标组件
       this.map.addControl(
         new MousePosition({
-          coordinateFormat: coordinate => {
+          coordinateFormat: (coordinate) => {
             return format(coordinate, "{x},{y}", 6);
-          }
+          },
         })
       );
 
       // 加载天地图底图
       const baseLayers = mapConfig.basemap;
-      baseLayers.forEach(item => {
+      baseLayers.forEach((item) => {
         this.map.addLayer(
           new TileLayer({
             source: new XYZ({
               crossOrigin: "anonymous", // 支持跨域
-              url: item.url
+              url: item.url,
             }),
             visible: item.visible,
-            type: "basemap",
-            name: item.name
+            type: item.type,
+            name: item.name,
           })
         );
       });
-
+      this.addMapWMS();
       //地图鼠标pointermove事件
-      this.map.on("pointermove", event => {
+      this.map.on("pointermove", (event) => {
         this.mouseMoveEvent(event);
       });
 
       // 添加监测点
       this.loadPointLayer();
     },
+    
+    /**
+     * 加入Geoserver发布的图层
+    */
+    addMapWMS() {
+      const geoservers = mapConfig.geoservers;
+      geoservers.map((item) => {
+        const layer = new TileLayer({
+          source: new TileWMS({
+            url: item.url,
+            crossOrigin: "anonymous",
+            params: {
+              LAYERS: item.layers,
+              TILED: true,
+              refresh: new Date().getTime(), //就是这句代码
+            },
+            serverType: item.serverType,
+          }),
+          visible: item.visible,
+          name: item.name,
+          type: item.type
+        });
+        this.map.addLayer(layer);
+      });
+    },
     /**
      * 鹰眼部件
      */
@@ -157,17 +188,17 @@ export default {
         collapsed: true,
         view: new View({
           projection: "EPSG:4326",
-          center: [104.777, 31.4957]
+          center: [104.777, 31.4957],
         }),
         tipLabel: "鹰眼",
         layers: [
           new TileLayer({
-            source: new XYZ({ url: baseLayers[0].url })
+            source: new XYZ({ url: baseLayers[0].url }),
           }),
           new TileLayer({
-            source: new XYZ({ url: baseLayers[2].url })
-          })
-        ]
+            source: new XYZ({ url: baseLayers[2].url }),
+          }),
+        ],
       });
     },
     /**
@@ -195,19 +226,19 @@ export default {
     initMapSelect(layers) {
       this.select = new Select({
         layers: layers,
-        style: feature => {
+        style: (feature) => {
           feature.setStyle(
             new Style({
               image: new Icon({
-                src: require(`@/assets/shiyuan/point.png`)
-              })
+                src: require(`@/assets/shiyuan/point.png`),
+              }),
             })
           );
-        }
+        },
       });
       this.map.addInteraction(this.select);
       // 选择事件
-      this.select.on("select", evt => {
+      this.select.on("select", (evt) => {
         if (evt.selected.length == 0) {
           this.$refs.mapPopup.close();
           return;
@@ -232,36 +263,37 @@ export default {
      */
     getLatestData(dataList) {
       let newList = dataList.sort((a, b) => {
-        return Date.parse(b.scada.scadaTime) - Date.parse(a.scada.scadaTime);
+        return Date.parse(b.scada ? b.scada.scadaTime : b.createTime) - Date.parse(a.scada ? a.scada.scadaTime : a.createTime);
       });
       let latest = newList.length > 0 ? newList[0] : null;
       let timePoor = this.$moment().diff(
-        this.$moment(latest.scada.scadaTime),
+        this.$moment(latest.scada ? latest.scada.scadaTime : latest.createTime),
         "hours"
       );
       return {
         data: latest,
-        isOverdue: timePoor > 24 ? true : false
+        isOverdue: timePoor > 24 ? true : false,
       };
     },
     /**
      * 添加点位数据
      */
     loadPointLayer() {
-      queryScadaData().then(res => {
+      queryScadaData().then((res) => {
         if (res.code == 1) {
           let list = res.result;
           let features = [];
-          list.forEach(item => {
+          list.forEach((item) => {
             let latestData = this.getLatestData(item.allocations);
+            
             let feature = new Feature({
-              geometry: new Point([item.longitude, item.latitude])
+              geometry: new Point([item.longitude, item.latitude]),
             });
-            let text = `${latestData.data.scada.value || "--"} ${
+            let text = `${latestData.data.scada ? (latestData.data.scada.value || "--") : "--"} ${
               latestData.data.unit
             }`;
             feature.setProperties(item);
-            feature.set("latestDate", latestData.data.scada.scadaTime);
+            feature.set("latestDate", latestData.data.scada ? latestData.data.scada.scadaTime : latestData.data.createTime);
             feature.set("status", latestData.isOverdue ? "离线" : "在线");
             let style = this.createFeatureStyle(text, latestData.isOverdue);
             feature.setStyle(style);
@@ -270,11 +302,11 @@ export default {
 
           let layer = new VectorLayer({
             source: new VectorSource({
-              features: features
+              features: features,
             }),
             type: "layer",
             name: "监测点",
-            id: "mlayer"
+            id: "mlayer",
           });
           this.map.addLayer(layer);
           if (this.mapSelect) {
@@ -299,7 +331,7 @@ export default {
     createFeatureStyle(text, isOverdue = false) {
       return new Style({
         image: new Icon({
-          src: require("@/assets/shiyuan/point1.png")
+          src: require("@/assets/shiyuan/point1.png"),
         }),
         text: new Text({
           offsetY: 40,
@@ -309,8 +341,8 @@ export default {
           fill: new Fill({ color: "#333333" }),
           stroke: new Stroke({ color: "#333333", width: 1 }),
           backgroundFill: new Fill({ color: "#fff" }),
-          backgroundStroke: new Stroke({ color: "#fff", width: 4 })
-        })
+          backgroundStroke: new Stroke({ color: "#fff", width: 4 }),
+        }),
       });
     },
     /**
@@ -320,15 +352,15 @@ export default {
     getLayerByName(layerName) {
       let layer = null;
       let layers = this.map.getLayers().getArray();
-      layers.forEach(item => {
+      layers.forEach((item) => {
         if (item.get("name") == layerName) {
           layer = item;
           return;
         }
       });
       return layer;
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/components/olMap/mapConfig.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2022-08-25 10:07:59
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2022-08-31 17:28:16
+ * @FilePath: \mysyWebGIS\src\views\components\olMap\mapConfig.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 /**
  * 这里是地图配置文件
  * 配地图图层等内容
@@ -11,17 +19,39 @@ export const mapConfig = {
         {
             name: '电子地图',
             visible: true,
-            url: 'http://t1.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + tiandituKey
+            url: 'http://t1.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + tiandituKey,
+            type: "basemap"
         },
         {
             name: '影像地图',
             visible: false,
-            url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tiandituKey
+            url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tiandituKey,
+            type: "basemap",
         },
         {
             name: '地图标注',
             visible: true,
-            url: 'http://t6.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tiandituKey
+            url: 'http://t6.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tiandituKey,
+            type: "basemap"
         },
+    ],
+    geoservers:[
+        {
+            name:'管网分布',
+            url: "http://192.168.2.248:8080/geoserver/mysw/wms?service=WMS&version=1.1.0&request=GetMap&layers=mysw:mysw&styles=&bbox=104.58889709700009,31.450546764000023,104.60423371100009,31.45976521700006&width=768&height=461&srs=EPSG:4490&format=application/openlayers",
+            layers: 'mysw',
+            visible:true,
+            type: "layer",
+            serverType: "geoserver",
+            queryParam:{
+                url: "http://192.168.2.248:8080/geoserver/mysw/wms",
+                srsName: 'EPSG:4326',   //坐标系统  'EPSG:4326'
+                featureNS: 'mysw',  //命名空间 URI 
+                featurePrefix: "mysw",  //工作区名称
+                featureTypes: "mysw",  //查询图层，可以同一个工作区下多个图层，逗号隔开
+                geometryName:'the_geom',    //存储空间图形属性名
+                outputFormat: 'application/json', 
+            }
+        }
     ]
 }

src/views/shiYuan/monitoringCenter/partitionManage/widget.vue

@@ -41,29 +41,39 @@
       </el-table-column>
       <el-table-column label="操作" align="center" show-overflow-tooltip>
         <template slot-scope="{row}">
-          <el-button type="text">编辑</el-button>
-          <el-button type="text">详情</el-button>
+          <el-button type="text" @click="editDMA(row)">编辑</el-button>
+          <el-button type="text" @click="showDMA(row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[100, 200, 300, 400]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
-    <dmaSettingDialog ref="dmaSettingDialog"></dmaSettingDialog>
+    <dmaSettingDialog ref="dmaSettingDialog" :tree-data="dmaData"></dmaSettingDialog>
   </div>
 </template>
 
 <script>
 import dmaSettingDialog from "./components/dmaSettingDialog/index";
+import { zoningTree, getTargetZoningList, getDifferentZoningNum, deleteSelections, createAndEditZoning, getMaterialList } from '@/api/DMA/zoningManage'
+
 export default {
   components: {
     dmaSettingDialog
   },
   data() {
     return {
-      form: {},
+      form: {
+        keyWords:'',
+        jb:0
+      },
+      order:['', ''],
       tableData: [],
-      pagination: { size: 100, current: 1, total: 0 }
+      pagination: { size: 100, current: 1, total: 0 },
+      dmaData:[]
     };
   },
+  created(){
+    this.getDMAData()
+  },
   methods: {
     handleSizeChange(){
 
@@ -73,7 +83,37 @@ export default {
     },
     addDMA() {
       this.$refs.dmaSettingDialog.open(0);
-    }
+    },
+    editDMA(row) {
+      this.$refs.dialog.open(1, row)
+    },
+    showDMA(row) {
+      this.$refs.dialog.open(2, row)
+    },
+    getDMAData() {
+      zoningTree().then(res => {
+        if (res.code !== -1) {
+          this.dmaData = res.result
+          this.nodeClick(this.dmaData[0])
+        }
+      })
+    },
+    nodeClick(node) {
+      let param = {
+        id: 0, // this.currId.id
+        current: this.pagination.current,
+        size: this.pagination.size
+        // 'orders[0].asc': this.order[0],
+        // 'orders[0].column': this.order[1]
+      }
+
+      if(this.form.keyWords != '' ) Object.assign(param,{content: this.form.keyWords}) 
+      if(this.form.jb != 0 ) Object.assign(param,{partitionLevel: this.form.jb})
+      getTargetZoningList(param).then(res => {
+        if (res.code == 1) {
+        }
+      })
+    },
   }
 };
 </script>

src/views/shiYuan/monitoringCenter/scadaMonitor/widget.vue

@@ -205,7 +205,6 @@ export default {
           res = res.result.filter(item => {
             return item.allocations;
           });
-          console.log('kkk',res);
           // this.resData = res; // 保存所有站点数据,用于分页时调用
           this.siteDataTable = res; // 保存所有站点数据,用于分页时调用
           // this.total = res.length;