如何使用 react-leaflet 从 geojson 数据创建图例

Posted 2023-02-16

【中文标题】如何使用 react-leaflet 从 geojson 数据创建图例

【英文标题】：How to create a legend from geojson data with react-leaflet

【发布时间】：2021-10-18 09:56:37

【问题描述】：

我的地图中显示了一些数据，我想创建一个图例，该图例与我的数据和名称具有相同的图像。 我的数据是 Geojson 文件。

我的地图是这样的：

没有图例的地图

我想发展一个这样的传奇：

带图例的地图

这是我向地图表示数据的代码：

import React from "react";
import L from "leaflet";
import 
   MapContainer,
   TileLayer,
   GeoJSON,
   Marker,
   Popup,
   LayersControl,
 from "react-leaflet";

import noeud from "./../data/Noeud.json";
import section from "./../data/section.json";
import casier from "./../data/casier.json";

function Macarte() 

  const noeud_icon = L.icon(
  iconUrl: noeud_image,
  iconSize: [10, 10],
 );

 function casier_style() 
    return 
      fillColor: "transparent",
      color: "red",
   ;
  

 function section_style() 
   return 
      color: "black",
   ;
 

 return (
    <MapContainer className="map" center=[45.7133, 5.52826] zoom=11>
    <LayersControl position="topright" />
    <TileLayer
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     url="https://s.tile.openstreetmap.org/z/x/y.png"
    />

   noeud.features.map((data_noeud) => (
    <Marker
      icon=noeud_icon
      position=
        lat: data_noeud.geometry.coordinates[1],
        lng: data_noeud.geometry.coordinates[0],
      
    >
      <Popup>
        <div>
          /*<h1> "Nom modèle : " + data_noeud.properties.Nom_modele </h1>*/
          <h1> "Noeud : " + data_noeud.properties.NOM </h1>
        </div>
      </Popup>
    </Marker>
  ))

  <GeoJSON
    style=section_style
    data=section.features
  />

 <GeoJSON
    style=casier_style
    data=casier.features
  />
 </MapContainer>

 );
 


 export default Macarte;

请帮忙:)

【参考方案1】：

here 已经回答了类似的问题。 图例组件

function Legend( map ) 
  console.log(map);
  useEffect(() => 
    if (map) 
      const legend = L.control( position: "bottomright" );
      legend.onAdd = () => 
        const div = L.DomUtil.create("div", "legend");
        div.innerhtml =
          "<h4>Legend</h4>"
        return div;
      ;

      legend.addTo(map);
    
  , [map]); //here add map
  return null;

在 .css 文件中，您可以为图例建立规则，然后将其导入到您的图例组件中。

.legend 
   padding: 6px 8px;
   font: 14px Arial, Helvetica, sans-serif;
   background: rgb(255, 255, 255);
   line-height: 24px;
   color: rgb(0,0,0)


.legend h4 
   text-align: center;
   font-size: 16px;
   margin: 2px 12px 8px;
   color: rgb(0,0,0)

然后您可以简单地将 Legend 组件放在您想要的任何位置。