React传单-绘制pluscode区域作为一个网格

Question

我正试图找出一种方法来绘制Pluscodes (OLC)在React传单。我可以通过扩展GridLayer类来绘制正常的网格，但不能相应地绘制pluscodes。我还没有弄清楚它是如何完全工作的。

我怎样才能做到这一点?GridLayer是否适合此任务，或者我应该寻找其他东西?另外，当我放大时，pluscodes应该显示更高的水平。

https://codesandbox.io/s/pluscode-grid-problem-40fho?file=/src/App.jsx

// Grid.jsx
import { useEffect } from "react";
import L from "leaflet";
import { useLeafletContext } from "@react-leaflet/core";
const PlusCodeGrid = () => {
const { layerContainer, map } = useLeafletContext();
const createLeafletElement = () => {
const Grid = L.GridLayer.extend({
createTile: function (coords) {
const tile = L.DomUtil.create("canvas", "leaflet-tile");
tile.style.outline = "1px solid black";
return tile;
}
});
return new Grid({ tileSize: 100 });
};
useEffect(() => {
layerContainer.addLayer(createLeafletElement());
}, []);
return null;
};
export default PlusCodeGrid;

// App.jsx
import React, { useState } from "react";
import { MapContainer, TileLayer, LayersControl } from "react-leaflet";
import PlusCodeGrid from "./Grid";
import { OpenLocationCode } from "open-location-code";
const getBoundariesFromPluscode = (plusCode) => {
const geocoder = new OpenLocationCode();
const { latitudeHi, latitudeLo, longitudeHi, longitudeLo } = geocoder.decode(
plusCode
);
const boundary = [
[latitudeLo, longitudeLo],
[latitudeHi, longitudeHi]
];
return boundary;
};
const App = () => {
const [map, setMap] = useState(null);
const plusCodeExample = "8FHJJMX2+R8";
const plusCodeBoundaries = getBoundariesFromPluscode(plusCodeExample);
console.log(plusCodeBoundaries);
return (
<div className="leaflet-container">
<MapContainer
className="map-container"
whenCreated={setMap}
zoom={15}
scrollWheelZoom={true}
>
<LayersControl>
<TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<LayersControl.Overlay checked name="Pluscode Grid">
<PlusCodeGrid />
</LayersControl.Overlay>
</LayersControl>
</MapContainer>
</div>
);
};
export default App;

Answer 1

难以置信，答案就在我在问题中找到的那一页…我又一次选择快速浏览文档以节省几分钟的时间，结果却在这个过程中浪费了几天的时间。

无论如何，grid.plus.codes为plus代码提供了一个网格服务，它可以很容易地与React传单一起使用，像这样:

import { useEffect } from 'react';
import L from 'leaflet';
import { useLeafletContext } from '@react-leaflet/core';
const PlusCodeGrid = () => {
const { layerContainer, map } = useLeafletContext();
useEffect(() => {
layerContainer.addLayer(
L.tileLayer('https://{s}-grid.plus.codes/grid/tms/{z}/{x}/{y}.png', {
tms: true,
attribution: 'grid by plus codes',
}).addTo(map)
);
}, []);
return null;
};
export default PlusCodeGrid;