diff --git a/CHANGELOG.md b/CHANGELOG.md index e5664c8..dcb01e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## 0.0.1 (完善PlotDraw) * 完善PlotDraw -* 添加部分geometry构造类（Ployline，Arror，Polygon） +* 添加部分geometry构造类（Ployline，Arror，Polygon, Flag） ## 0.0.0 (搭建框架) diff --git a/examples/index.html b/examples/index.html index 19c290e..f59d68b 100644 --- a/examples/index.html +++ b/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, diff --git a/src/geometry/Flag/CurveFlag.js b/src/geometry/Flag/CurveFlag.js new file mode 100644 index 0000000..94a0e69 --- /dev/null +++ b/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 diff --git a/src/geometry/Flag/RectFlag.js b/src/geometry/Flag/RectFlag.js new file mode 100644 index 0000000..ab88d72 --- /dev/null +++ b/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 diff --git a/src/geometry/Flag/TriangleFlag.js b/src/geometry/Flag/TriangleFlag.js new file mode 100644 index 0000000..1c78a36 --- /dev/null +++ b/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 diff --git a/src/geometry/index.js b/src/geometry/index.js index d26ad58..67fb10e 100644 --- a/src/geometry/index.js +++ b/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