react-leaflet和leaflet-pixi-overlay的组合

Question

我正在尝试显示一个复杂的地图，其中包含许多移动的标记，并带有不同的图标等。我有一个纯粹的react / react-leaflet解决方案，但是它开始因每秒移动约1k个标记而陷入困境。

看来，leaflet-pixi-overlay可能是真正加快速度的一种方法。但是我只是从整个链开始（react / javascript / maps / leaflet / etc ..），在连接所有这些时都会遇到问题。

现在，我只是试图在叠加层中显示一个多边形，但没有渲染任何东西。事实证明，该多边形的点从lat / long到x / y的转换失败。 Pixi的latLngToLayerPoint函数为x和y返回“无穷大”。

这似乎是因为没有为所讨论的图层定义缩放（它也是“无限远”）。

即使我使用地图的缩放设置调用latLngToLayerPoint，事情也会失败（x / y值不再是无限的，但它们已经存在了。）>

这是我的代码：

import React, { useEffect, useRef } from 'react';
import { Map, TileLayer } from 'react-leaflet'
import "leaflet/dist/leaflet.css"

import * as PIXI from 'pixi.js'
import 'leaflet-pixi-overlay'       // Must be called before the 'leaflet' import
import L from 'leaflet';

let polyLatLngs = [[50.630, 13.047], [50.645, 13.070], [50.625, 13.090], [50.608, 13.070], [50.630, 13.047]]

let pixiContainer = new PIXI.Container()
let prevZoom
let firstDraw = true;
let projectedPolygon;
var shape = new PIXI.Graphics();
pixiContainer.addChild(shape);

let myOverlay = L.pixiOverlay(function (utils) {
    let map = utils.getMap()
    let zoom = map.getZoom()
    console.log('map zoom=' + zoom + ', center=' + map.getCenter())
    console.log('   bounds=' + JSON.stringify(map.getBounds()))
    console.log('   size=' + map.getSize() + ', panes=' + JSON.stringify(map.getPanes()))
    if (map) {
        var container = utils.getContainer();
        var renderer = utils.getRenderer();
        var project = utils.latLngToLayerPoint;
        var scale = utils.getScale();

        if (firstDraw) {
            projectedPolygon = polyLatLngs.map((coords, index) => {
                console.log('i=' + index + ', coords=' + coords + ', proj=' + project(coords))                
                return project(coords)            
                // return project(coords, zoom)  // : this fails too
            })
        }
        if (firstDraw || prevZoom !== zoom) {
            shape.clear();
            shape.lineStyle(3 / scale, 0x3388ff, 1);
            shape.beginFill(0x3388ff, 0.2);
            projectedPolygon.forEach(function (coords, index) {
                if (index === 0) shape.moveTo(coords.x, coords.y);
                else shape.lineTo(coords.x, coords.y);
            });
            shape.endFill();
        }
        firstDraw = false;
        prevZoom = zoom;
        renderer.render(container);
    }
}, pixiContainer)

function PxMap(props) {
    const mapRef = useRef(null);

    useEffect(() => {
        if (mapRef.current !== null) {
            let map = mapRef.current.leafletElement;
            console.log('useEffect: add overlay ')
            console.log(JSON.stringify(map.getPane('overlayPane').childElementCount))
            myOverlay.addTo(map);
            console.log(JSON.stringify(map.getPane('overlayPane').childElementCount))
        }
    }, [mapRef]);

    return (
        <div style={{ flexgrow: 1, height: '100%' }}>
            <Map
                preferCanvas={true}
                ref={mapRef}
                style={{ height: '100%' }}
                center={[50.63, 13.047]}
                zoom={12}
            >
                <TileLayer
                    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?"
                />
            </Map>
        </div>
    )
}

export default PxMap
我认为React和Leaflet之间的连接正确，地图显示正常，我可以看到正在添加的叠加层，等等...

但是在某处缺少连接，以便向PIXI提供更多上下文/信息。

有什么想法吗？谢谢！

我正在尝试显示一个复杂的地图，其中包含许多移动的标记，并带有不同的图标等。我有一个纯粹的react / react-leaflet解决方案，但是它开始因每秒移动约1000个标记而变得困难。 ...

Answer 1

最后找到了问题，深入到了letle-pixi-overlay库。