# add flag geometry

CHANGELOG.md

@@ -1,7 +1,7 @@
 ## 0.0.1 (完善PlotDraw)
 
 * 完善PlotDraw
-* 添加部分geometry构造类（Ployline，Arror，Polygon）
+* 添加部分geometry构造类（Ployline，Arror，Polygon, Flag）
 
 ## 0.0.0 (搭建框架)
 

examples/index.html

@@ -47,6 +47,7 @@
     'Arc', 'FreeLine', 'AttackArrow',
     'ClosedCurve', 'FreePolygon',
     'GatheringPlace', 'Lune', 'Sector', 'Polygon',
+    'CurveFlag', 'TriangleFlag', 'RectFlag',
     'RectAngle'].map(function (value) {
     return {
       item: value,

src/geometry/Flag/CurveFlag.js

@@ -0,0 +1,116 @@
+/**
+ * Created by FDD on 2017/12/26.
+ * @desc 曲线旗标
+ * @Inherits maptalks.Polygon
+ */
+
+import * as maptalks from 'maptalks'
+import {
+  getBezierPoints
+} from '../helper/index'
+const Coordinate = maptalks.Coordinate
+class CurveFlag extends maptalks.Polygon {
+  constructor (coordinates, options = {}) {
+    super(options)
+    this.type = 'CurveFlag'
+    this._coordinates = []
+    if (coordinates) {
+      this.setPoints(coordinates)
+    }
+  }
+
+  /**
+   * handle coordinates
+   * @private
+   */
+  _generate () {
+    const count = this._coordinates.length
+    let _points = Coordinate.toNumberArrays(this._coordinates)
+    if (count < 2) return
+    this.setCoordinates([
+      Coordinate.toCoordinates(CurveFlag.calculatePoints(_points))
+    ])
+  }
+
+  /**
+   * set point
+   * @param coordinates
+   */
+  setPoints (coordinates) {
+    this._coordinates = !coordinates ? [] : coordinates
+    if (this._coordinates.length >= 1) {
+      this._generate()
+    }
+  }
+
+  _exportGeoJSONGeometry () {
+    const coordinates = Coordinate.toNumberArrays([this.getShell()])
+    return {
+      'type': 'Polygon',
+      'coordinates': coordinates
+    }
+  }
+
+  _toJSON (options) {
+    return {
+      'feature': this.toGeoJSON(options),
+      'subType': 'CurveFlag'
+    }
+  }
+  /**
+   * 插值点数据
+   * @param points
+   * @returns {Array}
+   */
+  static calculatePoints (points) {
+    let components = []
+    // 至少需要两个控制点
+    if (points.length > 1) {
+      // 取第一个
+      let startPoint = points[0]
+      // 取最后一个
+      let endPoint = points[points.length - 1]
+      // 上曲线起始点
+      let point1 = startPoint
+      // 上曲线第一控制点
+      let point2 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
+      // 上曲线第二个点
+      let point3 = [(startPoint[0] + endPoint[0]) / 2, startPoint[1]]
+      // 上曲线第二控制点
+      let point4 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], -(endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
+      // 上曲线结束点
+      let point5 = [endPoint[0], startPoint[1]]
+      // 下曲线结束点
+      let point6 = [endPoint[0], (startPoint[1] + endPoint[1]) / 2]
+      // 下曲线第二控制点
+      let point7 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 3 / 8 + startPoint[1]]
+      // 下曲线第二个点
+      let point8 = [(startPoint[0] + endPoint[0]) / 2, (startPoint[1] + endPoint[1]) / 2]
+      // 下曲线第一控制点
+      let point9 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 5 / 8 + startPoint[1]]
+      // 下曲线起始点
+      let point10 = [startPoint[0], (startPoint[1] + endPoint[1]) / 2]
+      // 旗杆底部点
+      let point11 = [startPoint[0], endPoint[1]]
+      // 计算上曲线
+      let curve1 = getBezierPoints([point1, point2, point3, point4, point5])
+      // 计算下曲线
+      let curve2 = getBezierPoints([point6, point7, point8, point9, point10])
+      // 合并
+      components = curve1.concat(curve2)
+      components.push(point11)
+    }
+    return components
+  }
+
+  static fromJSON (json) {
+    const feature = json['feature']
+    const attackArrow = new CurveFlag(json['coordinates'], json['width'], json['height'], json['options'])
+    attackArrow.setProperties(feature['properties'])
+    return attackArrow
+  }
+}
+
+CurveFlag.registerJSONType('CurveFlag')
+
+export default CurveFlag

src/geometry/Flag/RectFlag.js

@@ -0,0 +1,89 @@
+/**
+ * Created by FDD on 2017/12/26.
+ * @desc 直角旗标（使用两个控制点直接创建直角旗标）
+ * @Inherits maptalks.Polygon
+ */
+
+import * as maptalks from 'maptalks'
+const Coordinate = maptalks.Coordinate
+class RectFlag extends maptalks.Polygon {
+  constructor (coordinates, options = {}) {
+    super(options)
+    this.type = 'RectFlag'
+    this._coordinates = []
+    if (coordinates) {
+      this.setPoints(coordinates)
+    }
+  }
+
+  /**
+   * handle coordinates
+   * @private
+   */
+  _generate () {
+    const count = this._coordinates.length
+    let _points = Coordinate.toNumberArrays(this._coordinates)
+    if (count < 2) return
+    this.setCoordinates([
+      Coordinate.toCoordinates(RectFlag.calculatePoints(_points))
+    ])
+  }
+
+  /**
+   * set point
+   * @param coordinates
+   */
+  setPoints (coordinates) {
+    this._coordinates = !coordinates ? [] : coordinates
+    if (this._coordinates.length >= 1) {
+      this._generate()
+    }
+  }
+
+  _exportGeoJSONGeometry () {
+    const coordinates = Coordinate.toNumberArrays([this.getShell()])
+    return {
+      'type': 'Polygon',
+      'coordinates': coordinates
+    }
+  }
+
+  _toJSON (options) {
+    return {
+      'feature': this.toGeoJSON(options),
+      'subType': 'RectFlag'
+    }
+  }
+  /**
+   * 插值点数据
+   * @param points
+   * @returns {Array}
+   */
+  static calculatePoints (points) {
+    let components = []
+    // 至少需要两个控制点
+    if (points.length > 1) {
+      // 取第一个
+      let startPoint = points[0]
+      // 取最后一个
+      let endPoint = points[points.length - 1]
+      let point1 = [endPoint[0], startPoint[1]]
+      let point2 = [endPoint[0], (startPoint[1] + endPoint[1]) / 2]
+      let point3 = [startPoint[0], (startPoint[1] + endPoint[1]) / 2]
+      let point4 = [startPoint[0], endPoint[1]]
+      components = [startPoint, point1, point2, point3, point4]
+    }
+    return components
+  }
+
+  static fromJSON (json) {
+    const feature = json['feature']
+    const rectFlag = new RectFlag(json['coordinates'], json['width'], json['height'], json['options'])
+    rectFlag.setProperties(feature['properties'])
+    return rectFlag
+  }
+}
+
+RectFlag.registerJSONType('RectFlag')
+
+export default RectFlag

src/geometry/Flag/TriangleFlag.js

@@ -0,0 +1,88 @@
+/**
+ * Created by FDD on 2017/12/26.
+ * @desc 曲线旗标
+ * @Inherits maptalks.Polygon
+ */
+
+import * as maptalks from 'maptalks'
+const Coordinate = maptalks.Coordinate
+class TriangleFlag extends maptalks.Polygon {
+  constructor (coordinates, options = {}) {
+    super(options)
+    this.type = 'TriangleFlag'
+    this._coordinates = []
+    if (coordinates) {
+      this.setPoints(coordinates)
+    }
+  }
+
+  /**
+   * handle coordinates
+   * @private
+   */
+  _generate () {
+    const count = this._coordinates.length
+    let _points = Coordinate.toNumberArrays(this._coordinates)
+    if (count < 2) return
+    this.setCoordinates([
+      Coordinate.toCoordinates(TriangleFlag.calculatePoints(_points))
+    ])
+  }
+
+  /**
+   * set point
+   * @param coordinates
+   */
+  setPoints (coordinates) {
+    this._coordinates = !coordinates ? [] : coordinates
+    if (this._coordinates.length >= 1) {
+      this._generate()
+    }
+  }
+
+  _exportGeoJSONGeometry () {
+    const coordinates = Coordinate.toNumberArrays([this.getShell()])
+    return {
+      'type': 'Polygon',
+      'coordinates': coordinates
+    }
+  }
+
+  _toJSON (options) {
+    return {
+      'feature': this.toGeoJSON(options),
+      'subType': 'TriangleFlag'
+    }
+  }
+  /**
+   * 插值点数据
+   * @param points
+   * @returns {Array}
+   */
+  static calculatePoints (points) {
+    let components = []
+    // 至少需要两个控制点
+    if (points.length > 1) {
+      // 取第一个
+      let startPoint = points[0]
+      // 取最后一个
+      let endPoint = points[points.length - 1]
+      let point1 = [endPoint[0], (startPoint[1] + endPoint[1]) / 2]
+      let point2 = [startPoint[0], (startPoint[1] + endPoint[1]) / 2]
+      let point3 = [startPoint[0], endPoint[1]]
+      components = [startPoint, point1, point2, point3]
+    }
+    return components
+  }
+
+  static fromJSON (json) {
+    const feature = json['feature']
+    const triangleFlag = new TriangleFlag(json['coordinates'], json['width'], json['height'], json['options'])
+    triangleFlag.setProperties(feature['properties'])
+    return triangleFlag
+  }
+}
+
+TriangleFlag.registerJSONType('TriangleFlag')
+
+export default TriangleFlag

src/geometry/index.js

@@ -11,6 +11,10 @@ import FreeLine from './Polyline/FreeLine'
 
 import AttackArrow from './Arrow/AttackArrow'
 
+import CurveFlag from './Flag/CurveFlag'
+import RectFlag from './Flag/RectFlag'
+import TriangleFlag from './Flag/TriangleFlag'
+
 import Lune from './Polygon/Lune'
 import Sector from './Polygon/Sector'
 import ClosedCurve from './Polygon/ClosedCurve'
@@ -198,5 +202,53 @@ RegisterModes[PlotTypes.GATHERING_PLACE] = {
     })
   }
 }
+RegisterModes[PlotTypes.CURVEFLAG] = {
+  'freehand': false,
+  'limitClickCount': 2,
+  'action': ['click', 'mousemove', 'click'],
+  'create': function (path) {
+    return new CurveFlag(path)
+  },
+  'update': function (path, geometry) {
+    geometry.setPoints(path)
+  },
+  'generate': function (geometry) {
+    return new Polygon(geometry.getCoordinates(), {
+      'symbol': geometry.getSymbol()
+    })
+  }
+}
+RegisterModes[PlotTypes.RECTFLAG] = {
+  'freehand': false,
+  'limitClickCount': 2,
+  'action': ['click', 'mousemove', 'click'],
+  'create': function (path) {
+    return new RectFlag(path)
+  },
+  'update': function (path, geometry) {
+    geometry.setPoints(path)
+  },
+  'generate': function (geometry) {
+    return new Polygon(geometry.getCoordinates(), {
+      'symbol': geometry.getSymbol()
+    })
+  }
+}
+RegisterModes[PlotTypes.TRIANGLEFLAG] = {
+  'freehand': false,
+  'limitClickCount': 2,
+  'action': ['click', 'mousemove', 'click'],
+  'create': function (path) {
+    return new TriangleFlag(path)
+  },
+  'update': function (path, geometry) {
+    geometry.setPoints(path)
+  },
+  'generate': function (geometry) {
+    return new Polygon(geometry.getCoordinates(), {
+      'symbol': geometry.getSymbol()
+    })
+  }
+}
 
 export default RegisterModes