Merge pull request #6 from sakitam-fdd/dev

# update geometry
2026-01-18 16:03:28 +00:00 · 2018-01-11 21:47:35 +08:00 · 2018-01-11 21:47:35 +08:00 · b8ddd2d5f0
commit b8ddd2d5f0
parent 00116d0f07 35f147df6d
9 changed files with 575 additions and 129 deletions
--- a/examples/circle.html
+++ b/examples/circle.html
@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Geometry - Rectangle, Circle, Ellipse and Sector</title>
-<style type="text/css">
-  html,body{margin:0px;height:100%;width:100%}
-  .container{width:100%;height:100%}
-</style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.css">
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.min.js"></script>
-<body>
-
-<div id="map" class="container"></div>
-
-<script>
-  var map = new maptalks.Map('map', {
-    center: [-0.113049,51.498568],
-    zoom: 14,
-    attribution: {
-      content: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
-    },
-    baseLayer: new maptalks.TileLayer('base', {
-      urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
-      subdomains: ['a','b','c','d']
-    })
-  });
-
-  var center = map.getCenter();
-
-  var rectangle = new maptalks.Rectangle(center.add(-0.018,0.012), 800, 700, {
-    symbol: {
-      lineColor: '#34495e',
-      lineWidth: 2,
-      polygonFill: '#34495e',
-      polygonOpacity: 0.4
-    }
-  });
-  console.log(center.add(-0.013,-0.001))
-  var circle = new maptalks.Circle(center.add(0.002,0.008), 500,{
-    symbol: {
-      lineColor: '#34495e',
-      lineWidth: 2,
-      polygonFill: '#1bbc9b',
-      polygonOpacity: 0.4
-    }
-  });
-  var sector = new maptalks.Sector(center.add(-0.013,-0.001), 900, 240, 300, {
-    symbol: {
-      lineColor: '#34495e',
-      lineWidth: 2,
-      polygonFill: 'rgb(135,196,240)',
-      polygonOpacity: 0.4
-    }
-  });
-
-  var ellipse = new maptalks.Ellipse(center.add(0.003,-0.005), 1000, 600, {
-    symbol: {
-      lineColor: '#34495e',
-      lineWidth: 2,
-      polygonFill: 'rgb(216,115,149)',
-      polygonOpacity: 0.4
-    }
-  });
-
-  new maptalks.VectorLayer('vector')
-    .addGeometry([rectangle, circle, sector, ellipse])
-    .addTo(map);
-
-</script>
-</body>
-</html>
--- a/examples/index.html
+++ b/examples/index.html
@ -23,15 +23,11 @@
 <script src="../dist/maptalks.plot.js"></script>
 <script type="text/javascript">
  var map = new maptalks.Map('map', {
-    center: [-0.113049, 51.498568],
-    zoom: 14,
+    center: [108.93, 34.27],
+    zoom: 5,
    projection: 'EPSG:4326',
-    attribution: {
-      content: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
-    },
    baseLayer: new maptalks.TileLayer('base', {
-      urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
-      subdomains: ['a', 'b', 'c', 'd']
+      urlTemplate: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
    })
  });

--- a/package.json
+++ b/package.json
@ -31,7 +31,7 @@
    "karma.tdd": "karma start build/karma.tdd.config.js"
  },
  "dependencies": {
-    "maptalks": "^0.36.2"
+    "maptalks": "^0.37.0-alpha.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
--- a/src/core/PlotDraw.js
+++ b/src/core/PlotDraw.js
@ -7,7 +7,6 @@ import * as maptalks from 'maptalks'
 import {BASE_LAYERNAME} from '../Constants'
 import RegisterModes from '../geometry'
 import {merge} from '../utils/utils'
-import {MathDistance} from '../geometry/helper'

 const _options = {
  'symbol': {
@ -196,10 +195,7 @@ class PlotDraw extends maptalks.MapTool {
        return
      }
      if (!registerMode.freehand && registerMode['limitClickCount'] > 1) {
-        if (MathDistance([
-          coordinate['x'], coordinate['y']], [
-          this._clickCoords[this._clickCoords.length - 1]['x'],
-          this._clickCoords[this._clickCoords.length - 1]['y']]) < 0.0001) {
+        if (this.getMap().computeLength(coordinate, this._clickCoords[this._clickCoords.length - 1]) < 0.01) {
          return
        }
      }
@ -251,10 +247,7 @@ class PlotDraw extends maptalks.MapTool {
    if (!this._geometry || !map || map.isInteracting()) {
      return
    }
-    if (MathDistance([
-      coordinate['x'], coordinate['y']], [
-      this._clickCoords[this._clickCoords.length - 1]['x'],
-      this._clickCoords[this._clickCoords.length - 1]['y']]) < 0.0001) {
+    if (map.computeLength(coordinate, this._clickCoords[this._clickCoords.length - 1]) < 0.01) {
      return
    }
    const containerPoint = this._getMouseContainerPoint(event)
--- a/src/geometry/Arrow/AttackArrow.js
+++ b/src/geometry/Arrow/AttackArrow.js
@ -81,7 +81,7 @@ class AttackArrow extends maptalks.Polygon {
   */
  _getArrowHeadPoints (points, tailLeft, tailRight) {
    let len = getBaseLength(points)
-    let headHeight = len * this.headHeightFactor
+    let headHeight = len * 0.18
    let headPnt = points[points.length - 1]
    len = MathDistance(headPnt, points[points.length - 2])
    let tailWidth = MathDistance(tailLeft, tailRight)
--- a/src/geometry/Polyline/FreeLine.js
+++ b/src/geometry/Polyline/FreeLine.js
@ -4,7 +4,6 @@
 * @Inherits maptalks.LineString
 */
 import * as maptalks from 'maptalks'
-import Polyline from "./Polyline";
 const Coordinate = maptalks.Coordinate
 const options = {
  'arrowStyle': null,
--- a/src/geometry/Polyline/Polyline.js
+++ b/src/geometry/Polyline/Polyline.js
@ -5,8 +5,6 @@
 */

 import * as maptalks from 'maptalks'
-import Curve from "./Curve";
-import {getCurvePoints} from "../helper";
 const Coordinate = maptalks.Coordinate
 const options = {
  'arrowStyle': null,
--- a/src/geometry/helper/index.js
+++ b/src/geometry/helper/index.js
@ -193,15 +193,15 @@ export const getThirdPoint = (startPnt, endPnt, angle, distance, clockWise) => {
 * @returns {null}
 */
 export const getArcPoints = (center, radius, startAngle, endAngle) => {
-  let [x, y, pnts, angleDiff] = [null, null, [], (endAngle - startAngle)]
+  let [x, y, points, angleDiff] = [null, null, [], (endAngle - startAngle)]
  angleDiff = ((angleDiff < 0) ? (angleDiff + (Math.PI * 2)) : angleDiff)
-  for (let i = 0; i < 100; i++) {
-    let angle = startAngle + angleDiff * i / 100
+  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)
-    pnts.push([x, y])
+    points.push([x, y])
  }
-  return pnts
+  return points
 }

 /**
--- a/yarn.lock
+++ b/yarn.lock