csk-gis-frame-work 4.0.0

package/mapboxgl/js/draw/RectangleDrawing.js

@@ -0,0 +1,217 @@
+import DataUtils from '../utils/DataUtils';
+import GeoJsonProvider from '../geog/GeoJsonProvider';
+import LayerProvider from '../geog/LayerProvider';
+
+/**
+ * 矩形绘制类
+ * @alias RectangleDrawing
+ *
+ * @summary <用于动态绘制矩形>
+ */
+export default class RectangleDrawing {
+  /**
+   * 构造函数
+   * @param {Object} options -图层选项
+   */
+  constructor(options) {
+    /**
+     * 地图对象
+     * @type {Object}
+     */
+    this._map = options.map;
+
+    /**
+     * 最小缩放层级
+     * @type {Number}
+     */
+    this._minzoom = DataUtils.default(options.minzoom, 10);
+
+    this._isDrawing = false;
+    // 事件
+    this._clickEvent = null;     // 单击事件
+    this._mouseMoveEvent = null; // 鼠标移动事件
+
+    // 数据源ID
+    this._sourceId = 'drawing_rectangle';
+    // 图层ID
+    this._layerId = this._sourceId;
+
+    // 矩形GeoJSON对象
+    this._fc = GeoJsonProvider.getEmptyFC();
+  }
+
+  /** 公有方法 **/
+  /**
+   * 开始绘制
+   * @param {function} callback -回调函数
+   */
+  draw(callback) {
+    // 加载图层
+    if (!this._hasLayer()) {
+      this._loadLayer();
+    }
+
+    const map = this._map;
+    // 改变光标
+    map.getCanvas().style.cursor = 'crosshair';
+
+    this._isDrawing = true;
+
+    let startLonLat = [], moveLonLat = [], endLonLat = [];
+    let isMouseMoving = false;
+    let clickNum = 0;
+
+    let that = this;
+    /**
+     * 单击事件
+     */
+    this._clickEvent = function onClickEvent(e) {
+      let lonLat = [e.lngLat.lng, e.lngLat.lat];
+      if (clickNum < 1) {
+        startLonLat = lonLat;
+        isMouseMoving = true;
+        clickNum += 1;
+      } else {
+        endLonLat = lonLat;
+        isMouseMoving = false;
+        clickNum = 0;
+
+        // 设置矩形
+        setRectangle(startLonLat, endLonLat, true);
+      }
+    }
+
+    /**
+     * 鼠标移动事件
+     */
+    this._mouseMoveEvent = function onMoveEvent(e) {
+      if (!isMouseMoving) return;
+
+      moveLonLat = [e.lngLat.lng, e.lngLat.lat];
+      // 设置矩形
+      setRectangle(startLonLat, moveLonLat);
+    }
+
+    /**
+     * 设置矩形
+     * @param {Array} start -起始点
+     * @param {Array} end -结束点
+     * @param {Boolean} isEnd -是否结束
+     */
+    function setRectangle(start, end, isEnd = false) {
+      let xmin = start[0], ymin = start[1],
+        xmax = start[0], ymax = start[1];
+
+      if (xmin > end[0]) xmin = end[0];
+      if (ymin > end[1]) ymin = end[1];
+      if (xmax < end[0]) xmax = end[0];
+      if (ymax < end[1]) ymax = end[1];
+
+      // 获取多边形要素
+      let ring = [[[xmin, ymin], [xmin, ymax], [xmax, ymax], [xmax, ymin], [xmin, ymin]]];
+      let feature = GeoJsonProvider.getPolygonFeature(ring);
+      that._fc.features = [ feature ];
+
+      // 更新数据源
+      LayerProvider.updateSource(map, that._sourceId, that._fc);
+
+      // 回调
+      if (isEnd && callback) {
+        callback(feature);
+      }
+    }
+
+    // 绑定事件
+    map.on('click', this._clickEvent);
+    map.on('mousemove', this._mouseMoveEvent);
+  }
+
+  /**
+   * 绘制结束
+   */
+  finish() {
+    const map = this._map;
+
+    // 改变光标
+    map.getCanvas().style.cursor = '';
+    // 允许双击缩放
+    //map.doubleClickZoom.enable();
+
+    // 解除事件绑定
+    map.off('click', this._clickEvent);
+    map.off('mousemove', this._mouseMoveEvent);
+
+    this._isDrawing = false;
+  }
+
+  /**
+   * 获取GeoJSON要素集
+   *
+   * @returns {Object} GeoJSON对象
+   */
+  getData() {
+    return this._fc;
+  }
+
+  /**
+   * 清空数据
+   */
+  clearData() {
+    this._fc.features = [];
+    // 更新数据源
+    LayerProvider.updateSource(this._map, this._sourceId, this._fc);
+  }
+
+  /**
+   * 移除图层
+   */
+  removeLayer() {
+    // 移除图层
+    LayerProvider.removeLayer(map, this._layerId);
+
+    // 移除数据源
+    LayerProvider.removeSource(map, this._sourceId);
+
+    // 数据设置为空
+    this._fc.features = [];
+  }
+
+  /** 私有方法 **/
+  /**
+   * 加载图层
+   */
+  _loadLayer() {
+    if (this._hasLayer()) return;
+
+    // 添加数据源
+    this._map.addSource(this._sourceId, {
+      type: "geojson",
+      data: this._fc
+    });
+
+    // 添加图层
+    this._map.addLayer({
+      type: "fill",
+      id: this._layerId,
+      source: this._sourceId,
+      minzoom: this._minzoom,
+      layout: {
+        visibility: "visible",
+      },
+      paint: {
+        "fill-color": "#00FFF0",
+        "fill-opacity": 0.25,
+        //"fill-outline-color": "#808000",
+      }
+    });
+  }
+
+  /**
+   * 判断图层是否已加载
+   *
+   * @returns {Boolean}
+   */
+  _hasLayer() {
+    return LayerProvider.hasLayer(this._map, this._layerId);
+  }
+}

package/mapboxgl/js/draw/SplitPoylgon.js

@@ -0,0 +1,214 @@
+import { point, lineString, polygon } from "@turf/helpers";
+import polygonToLine from "@turf/polygon-to-line";
+import nearestPointOnLine from "@turf/nearest-point-on-line";
+import lineIntersect from "@turf/line-intersect";
+import lineSplit from "@turf/line-split";
+const doubleClickZoom = {
+  enable(ctx) {
+    setTimeout(() => {
+      // 首先检查一下我们有地图和一些背景
+      if (
+        !ctx.map ||
+        !ctx.map.doubleClickZoom ||
+        !ctx._ctx ||
+        !ctx._ctx.store ||
+        !ctx._ctx.store.getInitialConfigValue
+      )
+        return;
+      // 现在检查初始状态是否为false（如果是，我们将其保留为禁用状态）
+      if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
+      ctx.map.doubleClickZoom.enable();
+    }, 0);
+  },
+  disable(ctx) {
+    setTimeout(() => {
+      if (!ctx.map || !ctx.map.doubleClickZoom) return;
+      // 总是在这里禁用，因为在某些情况下这是必要的
+      ctx.map.doubleClickZoom.disable();
+    }, 0);
+  },
+};
+const SplitPoylgon = {
+  onSetup: function(options) {
+    const state = {
+      clickCount: 0,
+      Draw: options.draw,
+      dist: options.dist || 5,
+      pointCount: 0,
+      drawEnd: false,
+      message: options.message || null,
+    };
+    // 禁用双击放大事件
+    doubleClickZoom.disable(this);
+    return state;
+  },
+  onClick: function(state, e) {
+    if (state.clickCount === 0) {
+      state.clickCount++;
+      // this.changeMode("draw_line_string")
+      return;
+    } else {
+      if (state.pointCount > 1 && this.isVertex(state, e))
+        return this.clickOnVertex(state, e);
+      const adsorption = this.getFeature("Adsorption");
+      if (!this.getFeature("drawLine")) {
+        var drawLine = this.newFeature({
+          type: "Feature",
+          properties: {},
+          id: "drawLine",
+          geometry: {
+            type: "LineString",
+            coordinates: [adsorption.coordinates],
+          },
+        });
+        this.addFeature(drawLine);
+        state.pointCount++;
+      } else if (!state.drawEnd) {
+        this.getFeature("drawLine").addCoordinate(
+          state.pointCount,
+          ...adsorption.coordinates
+        );
+        state.pointCount++;
+      }
+    }
+  },
+  onMouseMove: function(state, e) {
+    if (state.Draw.getAll().features.length === 0) {
+      state.clickCount = 0;
+    }
+    if (state.clickCount !== 0 && !state.drawEnd) {
+      if (!this.polygon) {
+        const coords = state.Draw.getAll().features[0].geometry.coordinates;
+        this.polygon = polygon(coords);
+        this.polygonLine = polygonToLine(this.polygon);
+      }
+      const turfPoint = point([e.lngLat.lng, e.lngLat.lat]);
+      const snapped = nearestPointOnLine(this.polygonLine, turfPoint);
+      var point2 = this.newFeature({
+        type: "Feature",
+        properties: {
+          count: state.count,
+        },
+        id: "Adsorption",
+        geometry: {
+          type: "Point",
+          coordinates:
+            snapped.properties.dist > state.dist
+              ? [e.lngLat.lng, e.lngLat.lat]
+              : snapped.geometry.coordinates,
+        },
+      });
+      this.addFeature(point2); // puts the point on the map
+      if (this.getFeature("drawLine")) {
+        const adsorption = this.getFeature("Adsorption");
+        this.getFeature("drawLine").updateCoordinate(
+          state.pointCount,
+          ...adsorption.coordinates
+        );
+      }
+    }
+  },
+  clickOnVertex: function(state) {
+    console.log("onTrash");
+    state.drawEnd = true;
+    const result = this.split(state);
+    console.log(result);
+    this.changeMode("static");
+  },
+  isVertex: function(state) {
+    let lastPoint = this.getFeature("drawLine").coordinates[
+      state.pointCount - 1
+    ];
+    lastPoint = [lastPoint[0].toFixed(9), lastPoint[1].toFixed(9)];
+    let c1 = this.getFeature("Adsorption").coordinates;
+    c1 = [c1[0].toFixed(9), c1[1].toFixed(9)];
+    return lastPoint.toString() === c1.toString();
+  },
+  onStop: function(state) {
+    state.drawEnd = true;
+    doubleClickZoom.enable(this);
+    console.log(state.drawEnd);
+  },
+  toDisplayFeatures: function(state, geojson, display) {
+    display(geojson);
+  },
+  split: function(state) {
+    const coordinates = this.getFeature("drawLine").coordinates;
+    // 去除重复点
+    coordinates.pop();
+    const line = lineString(coordinates);
+    const points = lineIntersect(this.polygonLine, line);
+    if (points.features.length !== 2) {
+      if (state.message) state.message.warning("只能将面切割成两个！");
+    } else {
+      const lines = lineSplit(this.polygonLine, line).features;
+      const splitPoint1 = points.features[0].geometry.coordinates;
+      const splitPoint2 = points.features[1].geometry.coordinates;
+      const splitLine = this.splitLineByPoints(line,[splitPoint1,splitPoint2]);
+      const splitArray = [this.fixedCoordinate(splitPoint1),this.fixedCoordinate(splitPoint2)];
+      let AB, BC, CA;
+      for (const line of lines) {
+        const firstPoint =this.fixedCoordinate(line.geometry.coordinates[0]);
+        const lastPoint = this.fixedCoordinate(line.geometry.coordinates[
+          line.geometry.coordinates.length - 1
+        ]);
+        // A-B-C-A 这样一个面
+        // BC线段
+        if (
+          splitArray.indexOf(firstPoint) >= 0 &&
+          splitArray.indexOf(lastPoint) >= 0
+        ) {
+          BC = line.geometry.coordinates;
+          BC.pop()
+          BC.push(...splitLine)
+          // AB线段
+        } else if (splitArray.indexOf(firstPoint) < 0) {
+          AB = line.geometry.coordinates;
+          AB.pop()
+          // 添加切割线
+          AB.push(
+            ...splitLine
+          );
+          // CA
+        } else if (splitArray.indexOf(lastPoint) < 0) {
+          CA = line.geometry.coordinates;
+          CA.shift()
+        }
+      }
+      console.log(lines);
+
+      let polygon1 = polygon([[...BC,BC[0]]]);
+      let polygon2 = polygon([[...AB,...CA,AB[0]]])
+      state.Draw.deleteAll();
+      state.Draw.add(polygon1);
+      state.Draw.add(polygon2);
+      return [polygon1,polygon2]
+    }
+  },
+  fixedCoordinate(coordinate) {
+    return [coordinate[0].toFixed(6),coordinate[1].toFixed(6)].toString()
+  },
+  // 切割线
+  splitLineByPoints(line, split) {
+    let lines = lineSplit(line, point(split[0])).features;
+    let line2;
+    if (line.geometry.coordinates[0].toString() === lines[0].geometry.coordinates[0].toString()) {
+      line2 = lines[0].geometry.coordinates;
+    } else {
+      line2 = lines[1].geometry.coordinates;
+    }
+    lines = lineSplit(lineString(line2), point(split[1])).features;
+    if (
+      line.geometry.coordinates[line.geometry.coordinates.length - 1].toString() ===
+      lines[0].geometry.coordinates[
+        lines[0].geometry.coordinates.length - 1
+      ].toString()
+    ) {
+      return lines[0].geometry.coordinates;
+    } else {
+      return lines[1].geometry.coordinates;
+    }
+  },
+};
+
+export default SplitPoylgon;

package/mapboxgl/js/draw/mapConfig.js

@@ -0,0 +1,240 @@
+
+const drawConfig = {
+  styles: [
+    {
+      'id': 'gl-draw-polygon-fill-inactive',
+      'type': 'fill',
+      'filter': ['all',
+        ['==', 'active', 'false'],
+        ['==', '$type', 'Polygon'],
+        ['!=', 'mode', 'static']
+      ],
+      'paint': {
+        'fill-color': '#3bb2d0',
+        'fill-outline-color': '#3bb2d0',
+        'fill-opacity': 0.1
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-fill-active',
+      'type': 'fill',
+      'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+      'paint': {
+        'fill-color': '#fbb03b',
+        'fill-outline-color': '#fbb03b',
+        'fill-opacity': 0.1
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-midpoint',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'midpoint']],
+      'paint': {
+        'circle-radius': 3,
+        'circle-color': '#fbb03b'
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-stroke-inactive',
+      'type': 'line',
+      'filter': ['all',
+        ['==', 'active', 'false'],
+        ['==', '$type', 'Polygon'],
+        ['!=', 'mode', 'static']
+      ],
+      'layout': {
+        'line-cap': 'round',
+        'line-join': 'round'
+      },
+      'paint': {
+        'line-color': '#3bb2d0',
+        'line-width': 2
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-stroke-active',
+      'type': 'line',
+      'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+      'layout': {
+        'line-cap': 'round',
+        'line-join': 'round'
+      },
+      'paint': {
+        'line-color': '#fbb03b',
+        'line-dasharray': [0.2, 2],
+        'line-width': 2
+      }
+    },
+    {
+      'id': 'gl-draw-line-inactive',
+      'type': 'line',
+      'filter': ['all',
+        ['==', 'active', 'false'],
+        ['==', '$type', 'LineString'],
+        ['!=', 'mode', 'static']
+      ],
+      'layout': {
+        'line-cap': 'round',
+        'line-join': 'round'
+      },
+      'paint': {
+        'line-color': '#3bb2d0',
+        'line-width': 2
+      }
+    },
+    {
+      'id': 'gl-draw-line-active',
+      'type': 'line',
+      'filter': ['all',
+        ['==', '$type', 'LineString'],
+        ['==', 'active', 'true']
+      ],
+      'layout': {
+        'line-cap': 'round',
+        'line-join': 'round'
+      },
+      'paint': {
+        'line-color': '#fbb03b',
+        'line-dasharray': [0.2, 2],
+        'line-width': 2
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', 'meta', 'vertex'],
+        ['==', '$type', 'Point'],
+        ['!=', 'mode', 'static']
+      ],
+      'paint': {
+        'circle-radius': 5,
+        'circle-color': '#fff'
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-and-line-vertex-inactive',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', 'meta', 'vertex'],
+        ['==', '$type', 'Point'],
+        ['!=', 'mode', 'static']
+      ],
+      'paint': {
+        'circle-radius': 3,
+        'circle-color': '#fbb03b'
+      }
+    },
+    {
+      'id': 'gl-draw-point-point-stroke-inactive',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', 'active', 'false'],
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'feature'],
+        ['!=', 'mode', 'static']
+      ],
+      'paint': {
+        'circle-radius': 5,
+        'circle-opacity': 1,
+        'circle-color': '#fff'
+      }
+    },
+    {
+      'id': 'gl-draw-point-inactive',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', 'active', 'false'],
+        ['==', '$type', 'Point'],
+        ['==', 'meta', 'feature'],
+        ['!=', 'mode', 'static']
+      ],
+      'paint': {
+        'circle-radius': 3,
+        'circle-color': '#3bb2d0'
+      }
+    },
+    {
+      'id': 'gl-draw-point-stroke-active',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['==', 'active', 'true'],
+        ['!=', 'meta', 'midpoint']
+      ],
+      'paint': {
+        'circle-radius': 7,
+        'circle-color': '#fff'
+      }
+    },
+    {
+      'id': 'gl-draw-point-active',
+      'type': 'circle',
+      'filter': ['all',
+        ['==', '$type', 'Point'],
+        ['!=', 'meta', 'midpoint'],
+        ['==', 'active', 'true']],
+      'paint': {
+        'circle-radius': 5,
+        'circle-color': '#fbb03b'
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-fill-static',
+      'type': 'fill',
+      'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+      'paint': {
+        'fill-color': '#404040',
+        'fill-outline-color': '#404040',
+        'fill-opacity': 0.1
+      }
+    },
+    {
+      'id': 'gl-draw-polygon-stroke-static',
+      'type': 'line',
+      'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+      'layout': {
+        'line-cap': 'round',
+        'line-join': 'round'
+      },
+      'paint': {
+        'line-color': '#404040',
+        'line-width': 2
+      }
+    },
+    {
+      'id': 'gl-draw-line-static',
+      'type': 'line',
+      'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
+      'layout': {
+        'line-cap': 'round',
+        'line-join': 'round'
+      },
+      'paint': {
+        'line-color': '#404040',
+        'line-width': 2
+      }
+    },
+    {
+      'id': 'gl-draw-point-static',
+      'type': 'circle',
+      'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
+      'paint': {
+        'circle-radius': 5,
+        'circle-color': '#404040'
+      }
+    }
+  ],
+  controls: {
+    // point: false,
+    // line_string: false,
+    // polygon:false,
+    // trash:false,
+    // combine_features: false,
+    // uncombine_features: false,
+  },
+  defaultMode:'static'
+};
+export { drawConfig };