Javascript 如何调整/缩放geojson多边形

我目前正在构建不同的geojson多边形交互。 我的拦截器正在构建这个算法，允许使用onMouseDown方法缩放多边形的大小

它是用vanilla.js构建的，并对依赖项使用npm

import distance from "@turf/distance";
import centroid from "@turf/centroid";
import transformScale from "@turf/transform-scale";
import EventEmitter from "events";
const emitter = new EventEmitter();

const ScaleMode = {
  scalestart(selectedFeature, originalCenter) {},
  scaling(selectedFeature, originalCenter, lastMouseDown) {},
  scaleend(selectedFeature) {},

  onSetup: function(opts) {
    var state = {};

    emitter.addListener(
      "scalestart",
      function() {
        this.scalestart(state.selectedFeature, state.originalCenter);
      }.bind(this)
    );
    emitter.addListener(
      "scaling",
      function() {
        this.scaling(
          state.selectedFeature,
          state.originalCenter,
          state.lastMouseDownLngLat
        );
      }.bind(this)
    );
    emitter.addListener(
      "scaleend",
      function() {
        this.scaleend(state.selectedFeature, state.lastMouseDownLngLat);
      }.bind(this)
    );

    state.selectedFeature = opts.selectedFeature || false;
    state.lastMouseDownLngLat = false;
    state.originalCenter = false;
    state.mode = "scale" || false;
    return state;
  },
  toDisplayFeatures(state, geojson, display) {
    display(geojson);
  },
  onMouseDown: (state, e) => {
    if (e.featureTarget) {
      // calculate the polygon center
      state.polyCenter = turf.centroid(e.featureTarget);
      const polyCoordinates = state.polyCenter.geometry.coordinates;
      const poly = turf.polygon(PolyData);
      console.log(poly);
      const scaledPoly = turf.transformScale(poly, 3);
      console.log(poly);

      // scaling
      state.scaledPoly = transformScale(poly, 3);

      // disable on drag map over the polygon
      e.target["dragPan"].disable();
    }
  }
};

export default ScaleMode;

我希望能够使用onMouseDown/onMouseUp/onDrag方法增加多边形的坐标

---

演示：

这里是

mapbox gl旋转模式的克隆

处理

scaleTransform

：

const distance=require（“@turp/distance”）。默认值；
const centroid=require（“@turp/centroid”）。默认值；
const transformScale=require（“@turp/transform scale”）。默认值；
const EventEmitter=require（“事件”）；
常量发射器=新的EventEmitter（）；
变量ScaleMode={
scalestart:函数（）{}，
缩放：函数（）{}，
scaleend:function（）{}，
启动：功能（opts）{
var state={}；
emitter.addListener(
“scalestart”，
函数（）{
this.scalestart（state.selectedFeature、state.originalCenter）；
}.绑定（此）
);
emitter.addListener(
“缩放”，
函数（）{
这是我的(
state.selectedFeature，
state.originalCenter，
state.scaleFactor
);
}.绑定（此）
);
emitter.addListener(
“鳞片”，
函数（）{
this.scaleend（state.selectedFeature、state.scaleFactor）；
}.绑定（此）
);
state.selectedFeature=opts.selectedFeature | |未定义；
state.scaleFactor=1；
state.originalCenter=未定义；
state.mode=“scale”；
返回状态；
},
onMouseDown：函数（状态，e）{
如果（如功能目标）{
if（this.ctx.api.get（e.featureTarget.properties.id））{
e、 目标[“dragPan”]。禁用（）；
state.selectedFeature=this.\u ctx.api.get(
e、 featureTarget.properties.id
);
state.originalCenter=质心（即特征目标）；
state.originalFeature=e.featureTarget；
state.originalDistance=Math.max(
距离（州原始中心[e.lngLat.lng，e.lngLat.lat]），
0.1
);
发射器发射（“scalestart”）；
}
}
返回状态；
},
toDisplayFeatures:函数（状态、geojson、显示）{
显示（geojson）；
},
onDrag：函数（状态，e）{
if（state.selectedFeature&&state.mode）{
如果（state.mode==“scale”）{
开关（state.originalFeature.properties[“meta:type”]）{
案例“要点”：
打破
大小写“LineString”：
案例“多边形”：
案例“多重限制”：
“多多边形”案例：
state.scaleFactor=
距离（州原始中心[e.lngLat.lng，e.lngLat.lat]）/
state.originalDistance | | 1；
打破
违约：
返回；
}
发射器发射（“缩放”）；
state.selectedFeature.geometry=transformScale(
州原始特征，
state.scaleFactor
).几何学；
这个.ctx.api.add（state.selectedFeature）；
}
}
},
onMouseUp：函数（状态，e）{
e、 目标[“dragPan”]。启用（）；
发射器发射（“缩放”）；
state.selectedFeature=未定义；
state.scaleFactor=未定义；
state.originalCenter=未定义；
state.originalDistance=未定义；
返回状态；
}
};
module.exports=ScaleMode；

我将其包装为一个npm包，您现在可以像rotate插件一样使用它：

npm i mapbox-gl-scale-mode

---

查看它。

在使用它之前，您需要创建

mapbox gl绘制比例模式。好消息是你可以从中获得灵感。请注意，您的问题是询问几个小时的编码（来自高度熟练的人）。从理论上讲，任何超过15分钟的工作都被认为过于宽泛，因此被认为是离题。您可能需要克隆rotate模块并对其进行修改以执行转换。如果您遇到任何问题，请询问具体的挑战，并记录是什么让您相信您所做的工作应该有效。如果您可以看到，我使用的是mapbox gl旋转模式。我所知道的问题是草皮的鳞片状转变。它们像多边形未定义一样返回（？）应在
onDrag
上执行
scaleTransform
，而不是在
onMouseDown
上执行。按下鼠标时，保存当前质心和到当前点的距离，将其与质心到当前点的距离进行比较，并确定变换比例<代码>onMouseUp

应用于清理。快乐编码！