0

在 react-leaflet 项目中，我使用 react-leaflet-draw 来绘制形状。对于折线，我编写了一个特定的表格。用户可以为创建的折线输入缓冲区。此缓冲区必须显示为折线的阴影，宽度以米或公里为单位。现在我想显示（渲染）它们的纬度在该阴影或缓冲区大小内的所有点（标记）。我该如何实施？

这是我的代码框的链接

https://codesandbox.io/s/confident-swanson-rfp39？

它包含地图组件和一个小型 node.js 服务器

首先我使用节点 mapserver.js 启动服务器，然后绘制一条折线。在此之后或之前，我应该以 m 或 km 为单位输入缓冲区大小。然后我单击按钮并开始获取请求。提取完成后，缓冲区中的所有点都必须用标记显示。

最重要的是，更新缓冲区时，它必须显示为折线的阴影，但我无法实现：|||

我实现了对圆形和多边形的搜索，但我的折线解决方案失败了。

这是处理 onCreated 事件的 onCreate 方法：

`

const onCreated = e => {
    console.log(e);
    console.log(editableFG);
    const { layerType, layer } = e;
    const drawnItems = editableFG.leafletElement._layers;
    console.log(drawnItems);
    if (Object.keys(drawnItems).length > 1) {
        Object.keys(drawnItems).forEach((layerid, index) => {
            if (index > 0) return;
            const layer = drawnItems[layerid];
            editableFG.leafletElement.removeLayer(layer);
        });
        console.log(drawnItems);
    }
    if (layerType === 'polyline') {
        setPolylineLayers(() => [
            {
                id: layer._leaflet_id,
                latlngs: layer.getLatLngs(),
                type: layerType
            }
        ]);
    }
};

`

这是我的折线搜索算法：`

    fetch('http://localhost:8000/geoData')
        .then(res => {
            if (!res.ok) {
                console.log(Promise.reject('request has been rejected'));
            }
            return res.json();
        })
        .then(data => {
            let m = [];
            let c = [];
            let points = [];
            for (let j = 1; j <= polylineLayers.latlngs.length; j++) {
                // m = (y1-y0)/(x1-x0)
                let x =
                    polylineLayers.latlngs[j][0] -
                    polylineLayers.latlngs[j - 1][0];
                let y =
                    polylineLayers.latlngs[j][1] -
                    polylineLayers.latlngs[j - 1][1];
                let z = y / x;
                m.push(z);
                // y - y0 = m(x-x0) => c = mx0 - y0
                let constant =
                    m[j - 1] * polylineLayers.latlngs[j - 1][0] +
                    polylineLayers.latlngs[j - 1][1];
                c.push(constant);
            }
            for (let i = 0; i < data.latlngs.length; i++) {
                for (let j = 0; j < m.length; j++) {
                    // distance = abs(y0-m*x0 + c)/sqrt(1+m^2)
                    let a = Math.abs(
                        data.latlngs[i][1] -
                            m[j] * data.latlngs[i][0] +
                            c[j]
                    );
                    let b = Math.pow(1 + Math.pow(m[j], 2), 2);
                    let distance = a / b;
                    if (bufferScale === 'm') {
                        if (distance < buffer / 1000) {
                            points.push(data.latlngs[i]);
                        }
                    } else {
                        if (bufferScale === 'km') {
                            if (distance < buffer) {
                                points.push(data.latlngs[i]);
                            }
                        }
                    }
                }
            }
            setPostions(points);
        });

` 任何帮助都会很愉快 :))

4

0 回答 0