@mapgis/mapbox-gl-draw-radius 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapgis/mapbox-gl-draw-radius",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "dist/radius-mode.min.js",
   "module": "src/radius-mode.js",

package/src/radius-mode.js

@@ -11,6 +11,7 @@ import MapboxDraw from "@mapbox/mapbox-gl-draw";
 import numeral from "numeral";
 import _ from "lodash";
 import lineDistance from "@turf/length";
+import * as turf from "@turf/turf";
 
 const RadiusMode = _.extend({}, MapboxDraw.modes.draw_line_string);
 
@@ -21,51 +22,72 @@ function createVertex(parentId, coordinates, path, selected) {
       meta: "vertex",
       parent: parentId,
       coord_path: path,
-      active: selected ? "true" : "false"
+      active: selected ? "true" : "false",
     },
     geometry: {
       type: "Point",
-      coordinates
-    }
+      coordinates,
+    },
   };
 }
 
 // create a circle-like polygon given a center point and radius
 // https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js/39006388#39006388
-function createGeoJSONCircle(center, radiusInKm, parentId, points = 64) {
-  const coords = {
-    latitude: center[1],
-    longitude: center[0]
-  };
-
-  const km = radiusInKm;
-
-  const ret = [];
-  const distanceX = km / 111.32;
-  const distanceY = km / 110.574;
-
-  let theta;
-  let x;
-  let y;
-  for (let i = 0; i < points; i += 1) {
-    theta = (i / points) * (2 * Math.PI);
-    x = distanceX * Math.cos(theta);
-    y = distanceY * Math.sin(theta);
-
-    ret.push([coords.longitude + x, coords.latitude + y]);
-  }
-  ret.push(ret[0]);
-
-  return {
-    type: "Feature",
-    geometry: {
-      type: "Polygon",
-      coordinates: [ret]
-    },
-    properties: {
-      parent: parentId
+function createGeoJSONCircle(
+  center,
+  radiusInKm,
+  parentId,
+  epsgCode,
+  points = 64
+) {
+  if (epsgCode.includes("4326")) {
+    // 经纬度坐标系下绘制圆
+    const coords = {
+      latitude: center[1],
+      longitude: center[0],
+    };
+
+    const km = radiusInKm;
+
+    const ret = [];
+    // const distanceX = km / 111.32;
+    // const distanceY = km / 110.574;
+    const distanceX =
+      km / (111.32 * Math.cos((coords.latitude * Math.PI) / 180));
+    const distanceY = km / 110.574;
+
+    let theta;
+    let x;
+    let y;
+    for (let i = 0; i < points; i += 1) {
+      theta = (i / points) * (2 * Math.PI);
+      x = distanceX * Math.cos(theta);
+      y = distanceY * Math.sin(theta);
+
+      ret.push([coords.longitude + x, coords.latitude + y]);
     }
-  };
+    ret.push(ret[0]);
+    return {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [ret],
+      },
+      properties: {
+        parent: parentId,
+      },
+    };
+  } else {
+    // 墨卡托坐标系下绘制圆
+    const options = {
+      steps: 64,
+      units: "kilometers",
+      properties: { parent: parentId },
+    };
+    const circle = turf.circle(center, radiusInKm, options);
+
+    return circle;
+  }
 }
 
 function getDisplayMeasurements(feature) {
@@ -102,14 +124,14 @@ function getDisplayMeasurements(feature) {
     metric: `${numeral(metricMeasurement).format(metricFormat)} ${metricUnits}`,
     standard: `${numeral(standardMeasurement).format(
       standardFormat
-    )} ${standardUnits}`
+    )} ${standardUnits}`,
   };
 
   return displayMeasurements;
 }
 
 const doubleClickZoom = {
-  enable: ctx => {
+  enable: (ctx) => {
     setTimeout(() => {
       // First check we've got a map and some context.
       if (
@@ -124,29 +146,29 @@ const doubleClickZoom = {
       if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
       ctx.map.doubleClickZoom.enable();
     }, 0);
-  }
+  },
 };
-RadiusMode.onSetup = function(opts) {
+RadiusMode.onSetup = function (opts) {
   const props = MapboxDraw.modes.draw_line_string.onSetup.call(this, opts);
   const circle = this.newFeature({
     type: "Feature",
     properties: {
-      meta: "radius"
+      meta: "radius",
     },
     geometry: {
       type: "Polygon",
-      coordinates: [[]]
-    }
+      coordinates: [[]],
+    },
   });
   this.addFeature(circle);
 
   return {
     ...props,
-    circle
+    circle,
   };
 };
 
-RadiusMode.clickAnywhere = function(state, e) {
+RadiusMode.clickAnywhere = function (state, e) {
   // this ends the drawing after the user creates a second point, triggering this.onStop
   if (state.currentVertexPosition === 1) {
     state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
@@ -172,19 +194,26 @@ RadiusMode.clickAnywhere = function(state, e) {
   return null;
 };
 
-RadiusMode.onMouseMove = function(state, e) {
+RadiusMode.onMouseMove = function (state, e) {
   MapboxDraw.modes.draw_line_string.onMouseMove.call(this, state, e);
   const geojson = state.line.toGeoJSON();
   const center = geojson.geometry.coordinates[0];
   const radiusInKm = lineDistance(geojson, "kilometers");
-  const circleFeature = createGeoJSONCircle(center, radiusInKm, state.line.id);
+  const epsgCode =
+    this.map && this.map.crs ? this.map.crs.epsgCode : "EPSG:4326";
+  const circleFeature = createGeoJSONCircle(
+    center,
+    radiusInKm,
+    state.line.id,
+    epsgCode
+  );
   circleFeature.properties.meta = "radius";
   state.circle.setCoordinates(circleFeature.geometry.coordinates);
 };
 
 // creates the final geojson point feature with a radius property
 // triggers draw.create
-RadiusMode.onStop = function(state) {
+RadiusMode.onStop = function (state) {
   doubleClickZoom.enable(this);
 
   this.activateUIButton();
@@ -199,7 +228,7 @@ RadiusMode.onStop = function(state) {
     this.deleteFeature([state.line.id], { silent: true });
 
     this.map.fire("draw.create", {
-      features: [state.circle.toGeoJSON()]
+      features: [state.circle.toGeoJSON()],
     });
   } else {
     this.deleteFeature([state.line.id], { silent: true });
@@ -207,7 +236,7 @@ RadiusMode.onStop = function(state) {
   }
 };
 
-RadiusMode.toDisplayFeatures = function(state, geojson, display) {
+RadiusMode.toDisplayFeatures = function (state, geojson, display) {
   const isActiveLine = geojson.properties.id === state.line.id;
   geojson.properties.active = isActiveLine ? "true" : "false";
   if (!isActiveLine) return display(geojson);
@@ -246,12 +275,12 @@ RadiusMode.toDisplayFeatures = function(state, geojson, display) {
       meta: "currentPosition",
       radiusMetric: displayMeasurements.metric,
       radiusStandard: displayMeasurements.standard,
-      parent: state.line.id
+      parent: state.line.id,
     },
     geometry: {
       type: "Point",
-      coordinates: geojson.geometry.coordinates[1]
-    }
+      coordinates: geojson.geometry.coordinates[1],
+    },
   };
   display(currentVertex);