添加关于突出显示状态的图例和信息
添加关于突出显示状态的图例和信息
提问于 2020-03-30 18:50:27
我一直试图在右上角添加图例和/或信息部分，以显示关于我突出显示的状态的描述，但我无法这样做，因此我不得不发布一些指导。
我在typescript中使用React 16.13，所以在这个阶段使用钩子，而不是类组件(它仍然可以使用，但尽量避免)。我使用的库是React-Leaflet。我已经在网上读了一整天，我不知道如何将这两个东西添加到我的项目中，我想一旦我弄清楚如何做其中一个，另一个将很容易实现。
下面是我的代码：
const App: React.FC = () => {
const [mapCenter, setMapCenter] = useState<L.LatLngTuple>([
36.778259,
-119.417931
]);
const [geoJson, setGeoJson] = useState<TopoJSON[]>([]);
const geoJsonRef = useRef<GeoJSON>(null);
useEffect(() => {
if (data.type === "Topology") {
for (let key in data.objects) {
if (data.objects.hasOwnProperty(key)) {
setGeoJson(topojson.feature(data, data.objects[key]));
}
}
}
}, []);
const highlightFeature = (e: L.LeafletMouseEvent) => {
let layer = e.target;
layer.setStyle({
weight: 5,
color: "#666",
dashArray: "",
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
};
const resetHighlight = (e: L.LeafletMouseEvent) => {
geoJsonRef.current!.leafletElement.resetStyle(e.target);
};
const onEachFeature = (feature: GeoJSON.Feature, layer: L.Layer) => {
layer.bindPopup(feature.properties!.NAME10);
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight
});
};
return (
<div className="App">
<Map center={mapCenter} zoom={4} maxZoom={5} minZoom={4}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<GeoJSON
data={geoJson}
style={GetStyle}
onEachFeature={onEachFeature}
ref={geoJsonRef}
/>
</Map>
</div>
);
};
export default App;对于这段代码，我提前表示抱歉。只是不确定如何实现Legend或像文档显示的那样大的信息。任何建议或例子都将不胜感激，感谢您的阅读！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-31 19:29:26
React-leaflet只是一个包装器。您只需使用原生leaflet代码片段来保持代码块更有组织和可重用性。
您可以使用本地leaflet的代码。要实现图例和突出显示的信息框，您需要做的唯一一件事就是拥有一个地图引用，您可以使用useLeaflet钩子获取它，因为您使用的是钩子。
我已经为您创建了两个包装器，一个用于Legend，另一个用于可视化geojson并显示信息框。下面是后者：
const HighlightedGeoJson = () => {
const { map } = useLeaflet();
useEffect(() => {
// control that shows state info on hover
const info = L.control();
info.onAdd = () => {
info._div = L.DomUtil.create("div", "info");
info.update();
return info._div;
};
info.update = props => {
info._div.innerHTML =
"<h4>US Population Density</h4>" +
(props
? "<b>" +
props.name +
"</b><br />" +
props.density +
" people / mi<sup>2</sup>"
: "Hover over a state");
};
info.addTo(map);
const highlightFeature = e => {
const layer = e.target;
layer.setStyle({
weight: 5,
color: "#666",
dashArray: "",
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
};
let geojson;
const resetHighlight = e => {
geojson.resetStyle(e.target);
info.update();
};
const zoomToFeature = e => {
map.fitBounds(e.target.getBounds());
};
const onEachFeature = (feature, layer) => {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
};
geojson = L.geoJson(statesData, {
style,
onEachFeature: onEachFeature
}).addTo(map);
}, []);
return null;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60937459
复制相关文章
相似问题
腾讯云开发者
