Reactjs 将react单张与单张pixi叠加相结合

我试图显示一个复杂的地图与许多移动标记，不同的图标等。。。我有一个纯react/react传单解决方案，但它开始与每秒移动约1k个标记进行斗争

看起来，传单上的贴纸可能是一种加快速度的方法。但我只是从整个链（react/javascript/maps/传单等）开始，在连接所有这些时遇到了问题

现在我只是想在叠加中显示一个多边形，但什么都没有渲染。结果表明，对于该多边形的点，将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

import React，{useffect，useRef}来自“React”；
从“反应传单”导入{Map，tillelayer}
导入“传单/目录/传单.css”
从“PIXI.js”导入*作为PIXI
导入“传单pixi overlay”//必须在导入“传单”之前调用
从“传单”进口L；
设多段长度=[[50.630,13.047]，[50.645,13.070]，[50.625,13.090]，[50.608,13.070]，[50.630,13.047]]
让pixiContainer=new PIXI.Container（）
让我们放大
让firstDraw=true；
设投影多边形；
var shape=new PIXI.Graphics（）；
pixiContainer.addChild（shape）；
设myOverlay=L.pixiOverlay（函数（utils）{
让map=utils.getMap（）
让zoom=map.getZoom（）
log（'map zoom='+zoom+'，center='+map.getCenter（））
log（'bounds='+JSON.stringify（map.getBounds（）））
log（'size='+map.getSize（）+'，panes='+JSON.stringify（map.getPanes（）））
如果（地图）{
var container=utils.getContainer（）；
var renderer=utils.getRenderer（）；
var project=utils.latLngToLayerPoint；
var scale=utils.getScale（）；
如果（第一次抽签）{
projectedPolygon=polyaltngs.map（（坐标，索引）=>{
log（'i='+index+'，coords='+coords+'，proj='+project（coords））
返回项目（coords）
//返回项目（坐标、缩放）/：此操作也失败
})
}
如果（第一次绘制| |上一次缩放！==缩放）{
shape.clear（）；
形状.线型（3/比例，0x3388ff，1）；
形状填充（0x3388ff，0.2）；
projectedPolygon.forEach（函数（坐标、索引）{
如果（index==0）shape.moveTo（coords.x，coords.y）；
else shape.lineTo（coords.x，coords.y）；
});
shape.endFill（）；
}
firstDraw=false；
prevZoom=缩放；
render.render（容器）；
}
}，Pixicantainer）
功能图（道具）{
const mapRef=useRef（null）；
useffect（（）=>{
如果（mapRef.current！==null）{
设map=mapRef.current.element；
console.log（'useffect:addoverlay'）
log（JSON.stringify（map.getPane（'overlypane'）.childElementCount））
myOverlay.addTo（地图）；
log（JSON.stringify（map.getPane（'overlypane'）.childElementCount））
}
}，[mapRef]）；
返回(
)
}
导出默认PxMap

我认为React和传单之间的连接正确，地图显示正常，我可以看到正在添加的覆盖图等

但在某个地方缺少了一个联系，为PIXI提供了更多的上下文/信息

---

有什么想法吗？谢谢

终于找到了问题所在，深入研究了pixi重叠库的传单

解决方案是在地图元素中定义最小缩放和最大缩放：

        <Map
            preferCanvas={true}
            ref={mapRef}
            style={{ height: '100%' }}
            center={[50.63, 13.047]}
            zoom={12}
            minZoom={ 9}  // Add these options...
            maxZoom={ 16} // 

依次使用哪个来定义默认的缩放设置

this._initialZoom = this.options.projectionZoom(map);
....
zoom = (zoom === undefined) ? _layer._initialZoom : zoom;
var projectedPoint = map.project(L.latLng(latLng), zoom);

不确定为什么这样做，但设置这些选项可以解决问题

this._initialZoom = this.options.projectionZoom(map);
....
zoom = (zoom === undefined) ? _layer._initialZoom : zoom;
var projectedPoint = map.project(L.latLng(latLng), zoom);