From 718ab779d6ecf3c559f932630ac3768faacdc2f9 Mon Sep 17 00:00:00 2001 From: FDD Date: Thu, 11 Jan 2018 23:04:26 +0800 Subject: [PATCH] =?UTF-8?q?bug=20=E7=BB=9F=E4=B8=80=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E8=AE=A1=E7=AE=97=E7=AE=97=E6=B3=95=E5=90=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/index.html | 5 +++-- src/geometry/Polygon/GatheringPlace.js | 6 +++--- src/geometry/Polygon/Lune.js | 12 ++++++----- src/geometry/Polygon/Sector.js | 6 +++--- src/geometry/helper/index.js | 29 ++++++++++++++++++-------- 5 files changed, 36 insertions(+), 22 deletions(-) diff --git a/examples/index.html b/examples/index.html index 9be2637..b8a88e0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -25,13 +25,14 @@ var map = new maptalks.Map('map', { center: [108.93, 34.27], zoom: 5, - projection: 'EPSG:4326', baseLayer: new maptalks.TileLayer('base', { urlTemplate: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' }) }); - var layer = new maptalks.VectorLayer('vector').addTo(map); + var layer = new maptalks.VectorLayer('vector', { + enableSimplify : false + }).addTo(map); var drawTool = new MaptalksPlot.PlotDraw({ mode: 'Curve' diff --git a/src/geometry/Polygon/GatheringPlace.js b/src/geometry/Polygon/GatheringPlace.js index 4a6f8dd..fe9d335 100644 --- a/src/geometry/Polygon/GatheringPlace.js +++ b/src/geometry/Polygon/GatheringPlace.js @@ -9,7 +9,6 @@ import * as Constants from '../../Constants' import { Mid, getThirdPoint, - MathDistance, getBisectorNormals, getCubicValue } from '../helper/index' @@ -44,8 +43,9 @@ class GatheringPlace extends maptalks.Polygon { if (count < 2) return if (count === 2) { let mid = Mid(_points[0], _points[1]) - let d = MathDistance(_points[0], mid) / 0.9 - let pnt = getThirdPoint(_points[0], mid, Constants.HALF_PI, d, true) + const measurer = this._getMeasurer() + const distance = measurer.measureLength(Coordinate.toCoordinates(_points[0]), Coordinate.toCoordinates(mid)) / 0.9 + let pnt = getThirdPoint(measurer, _points[0], mid, Constants.HALF_PI, distance, true) _points = [_points[0], pnt, _points[1]] } let mid = Mid(_points[0], _points[2]) diff --git a/src/geometry/Polygon/Lune.js b/src/geometry/Polygon/Lune.js index f159d46..615070f 100644 --- a/src/geometry/Polygon/Lune.js +++ b/src/geometry/Polygon/Lune.js @@ -8,7 +8,6 @@ import * as Constants from '../../Constants' import { Mid, getThirdPoint, - MathDistance, isClockWise, getAzimuth, getArcPoints, @@ -42,15 +41,18 @@ class Lune extends maptalks.Polygon { const count = this._points.length let _points = Coordinate.toNumberArrays(this._points) if (count < 2) return + const measurer = this._getMeasurer() if (count === 2) { let mid = Mid(_points[0], _points[1]) - let d = MathDistance(_points[0], mid) - let pnt = getThirdPoint(_points[0], mid, Constants.HALF_PI, d) + let pnt = getThirdPoint( + measurer, _points[0], mid, Constants.HALF_PI, + measurer.measureLength(Coordinate.toCoordinates(_points[0]), Coordinate.toCoordinates(mid)) + ) _points.push(pnt) } let [pnt1, pnt2, pnt3, startAngle, endAngle] = [_points[0], _points[1], _points[2], undefined, undefined] let center = getCircleCenterOfThreePoints(pnt1, pnt2, pnt3) - let radius = MathDistance(pnt1, center) + let radius = measurer.measureLength(Coordinate.toCoordinates(pnt1), Coordinate.toCoordinates(center)) let angle1 = getAzimuth(pnt1, center) let angle2 = getAzimuth(pnt2, center) if (isClockWise(pnt1, pnt2, pnt3)) { @@ -60,7 +62,7 @@ class Lune extends maptalks.Polygon { startAngle = angle1 endAngle = angle2 } - _points = getArcPoints(center, radius, startAngle, endAngle) + _points = getArcPoints(measurer, center, radius, startAngle, endAngle) _points.push(_points[0]) this.setCoordinates([ Coordinate.toCoordinates(_points) diff --git a/src/geometry/Polygon/Sector.js b/src/geometry/Polygon/Sector.js index f0575a0..64ff143 100644 --- a/src/geometry/Polygon/Sector.js +++ b/src/geometry/Polygon/Sector.js @@ -6,7 +6,6 @@ import * as maptalks from 'maptalks' import { - MathDistance, getAzimuth, getArcPoints } from '../helper/index' @@ -43,10 +42,11 @@ class Sector extends maptalks.Polygon { this.setCoordinates([this._points]) } else { let [center, pnt2, pnt3] = [_points[0], _points[1], _points[2]] - let radius = MathDistance(pnt2, center) + const measurer = this._getMeasurer() + const radius = measurer.measureLength(Coordinate.toCoordinates(pnt2), Coordinate.toCoordinates(center)) let startAngle = getAzimuth(pnt2, center) let endAngle = getAzimuth(pnt3, center) - let pList = getArcPoints(center, radius, startAngle, endAngle) + let pList = getArcPoints(measurer, center, radius, startAngle, endAngle) pList.push(center, pList[0]) this.setCoordinates([ Coordinate.toCoordinates(pList) diff --git a/src/geometry/helper/index.js b/src/geometry/helper/index.js index b0d499e..490b58e 100644 --- a/src/geometry/helper/index.js +++ b/src/geometry/helper/index.js @@ -169,6 +169,7 @@ export const getCubicValue = (t, startPnt, cPnt1, cPnt2, endPnt) => { /** * 根据起止点和旋转方向求取第三个点 + * @param measurer * @param startPnt * @param endPnt * @param angle @@ -176,30 +177,40 @@ export const getCubicValue = (t, startPnt, cPnt1, cPnt2, endPnt) => { * @param clockWise * @returns {[*,*]} */ -export const getThirdPoint = (startPnt, endPnt, angle, distance, clockWise) => { +export const getThirdPoint = (measurer, startPnt, endPnt, angle, distance, clockWise) => { let azimuth = getAzimuth(startPnt, endPnt) let alpha = clockWise ? (azimuth + angle) : (azimuth - angle) let dx = distance * Math.cos(alpha) let dy = distance * Math.sin(alpha) - return ([endPnt[0] + dx, endPnt[1] + dy]) + const vertex = measurer.locate({ + 'x': endPnt[0], + 'y': endPnt[1] + }, dx, dy) + return [vertex['x'], vertex['y']] } /** * 插值弓形线段点 + * @param measurer * @param center * @param radius * @param startAngle * @param endAngle + * @param numberOfPoints * @returns {null} */ -export const getArcPoints = (center, radius, startAngle, endAngle) => { - let [x, y, points, angleDiff] = [null, null, [], (endAngle - startAngle)] +export const getArcPoints = (measurer, center, radius, startAngle, endAngle, numberOfPoints = 100) => { + let [dx, dy, points, angleDiff] = [null, null, [], (endAngle - startAngle)] angleDiff = ((angleDiff < 0) ? (angleDiff + (Math.PI * 2)) : angleDiff) - for (let i = 0; i < 200; i++) { - const angle = startAngle + angleDiff * i / 200 - x = center[0] + radius * Math.cos(angle) - y = center[1] + radius * Math.sin(angle) - points.push([x, y]) + for (let i = 0; i < numberOfPoints; i++) { + const rad = angleDiff * i / numberOfPoints + startAngle + dx = radius * Math.cos(rad) + dy = radius * Math.sin(rad) + const vertex = measurer.locate({ + 'x': center[0], + 'y': center[1] + }, dx, dy) + points.push([vertex['x'], vertex['y']]) } return points }