使用React的WebGL：使用Leaflet和Pixi.js在地图上绘制对象

你打算做什么？

在React应用中，我们将使用react-leaflet-pixi-overlay来在地图上绘制对象。

试试看

在React应用程序中绘制地图。

创建React应用程序并安装库。
使用Leaflet的React包装器react-leaflet。

npx create-react-app leaflet-pixi-sample
cd leaflet-pixi-sample
npm install react-leaflet --save

根据示例的指导，修改App.js。

import 'leaflet/dist/leaflet.css'
import { MapContainer, TileLayer } from 'react-leaflet'

function App() {
  return (
    <div className="App">
      {/* MapContainer コンポーネントの中に地図タイルやマーカーを配置する */}
      <MapContainer
        // center：地図の初期中心点を指定
        center={[35.658581, 139.745433]}
        // zoom：地図の初期ズームサイズを指定
        zoom={17}
        style={{
          width: '500px',
          height: '500px',
          margin: 'auto',
        }}
      >
        {/* TileLayer コンポーネントで地図タイルを配置する */}
        <TileLayer
          // attribution：地図の出典を表示
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          // url：地図タイル取得先を指定
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  )
}

export default App

执行项目。

npm start

2. 使用Pixi.js在地图上绘制对象。

使用react-leaflet-pixi-overlay，这是一个使用Pixi.js绘制Leaflet叠加层的库的React封装。

npm install react-leaflet-pixi-overlay --save

用中文将 App.js 进行修改，尝试在地图上放置标记。

import 'leaflet/dist/leaflet.css'
import { MapContainer, TileLayer } from 'react-leaflet'
import PixiOverlay from 'react-leaflet-pixi-overlay'

function App() {
  return (
    <div className="App">
      {/* MapContainer コンポーネントの中に地図タイルやマーカーを配置する */}
      <MapContainer
        // center：地図の初期中心点を指定
        center={[35.658581, 139.745433]}
        // zoom：地図の初期ズームサイズを指定
        zoom={17}
        style={{
          width: '500px',
          height: '500px',
          margin: 'auto',
        }}
      >
        {/* TileLayer コンポーネントで地図タイルを配置する */}
        <TileLayer
          // attribution：地図の出典を表示
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          // url：地図タイル取得先を指定
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {/* PixiOverlay コンポーネントで地図上にオブジェクトを配置する */}
        <PixiOverlay
          markers={[
            {
              id: '0',
              iconColor: 'green',
              position: [35.658581, 139.745433],
            },
            {
              id: '1',
              iconColor: 'orange',
              position: [35.6576, 139.7489],
              // ポップアップやクリックイベント、ツールチップも設定できます
              popup: '芝公園',
              popupOpen: true,
              onClick: () => alert('Clicked!'),
              tooltip: 'Tooltip!',
            },
          ]}
        />
      </MapContainer>
    </div>
  )
}

export default App

执行项目。

npm start

最后

我想要放置大量标记并进行性能验证。
看起来在 react-leaflet-pixi-overlay 中，可以放置自定义图标，但更复杂的对象，如多边形和热力图，则需要使用 Leaflet.PixiOverlay 进行绘制或直接操作 WebGL。