在下一个js中使用leaflet.js隐藏国家周围地图的其余部分

问题描述 投票：0回答：1

我需要帮助。我想隐藏其他地图，只显示喀麦隆的地图。我正在使用 Leaflet，并且使用 Next.js 来显示地图。我看到了这个页面 React-Leaflet 4 with NextJS 14 |工作设置，所以我从这个地图和页面开始，以便能够隐藏其他地图。这是我的地图和页面代码，用于隐藏其他地图并只保留喀麦隆的地图，但我不知道为什么地图不显示。


**Map.tsx:**

"use client";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
import "leaflet-defaulticon-compatibility";
import L from "leaflet";
import { useEffect, useRef } from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";



export default function Map() {
  const mapRef = useRef<L.Map | null>(null);

  useEffect(() => {
    if (!mapRef.current) {
      mapRef.current = L.map("map").setView([7.369722, 12.354722], 6);

      
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© OpenStreetMap contributors",
      }).addTo(mapRef.current);

      
      var cameroon: GeoJSON.Feature<GeoJSON.Polygon> = {
        type: "Feature",
        properties: {
          name: "Cameroon",
          code: "CMR",
          group: "Countries",
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [13.075822, 2.267097],
              [12.951334, 2.321616],
              [12.35938, 2.192812],
              [11.751665, 2.326758],
              [11.276449, 2.261051],
              [9.649158, 2.283866],
              [9.795196, 3.073404],
              [9.404367, 3.734527],
              [8.948116, 3.904129],
              [8.744924, 4.352215],
              [8.488816, 4.495617],
              [8.500288, 4.771983],
              [8.757533, 5.479666],
              [9.233163, 6.444491],
              [9.522706, 6.453482],
              [10.118277, 7.038775],
              [10.497375, 7.055358],
              [11.058788, 6.644427],
              [11.745774, 6.981383],
              [11.839309, 7.397042],
              [12.063946, 7.799808],
              [12.218872, 8.305824],
              [12.753672, 8.717763],
              [12.955468, 9.417772],
              [13.1676, 9.640626],
              [13.308676, 10.160362],
              [13.57295, 10.798566],
              [14.415379, 11.572369],
              [14.468192, 11.904752],
              [14.577178, 12.085361],
              [14.181336, 12.483657],
              [14.213531, 12.802035],
              [14.495787, 12.859396],
              [14.893386, 12.219048],
              [14.960152, 11.555574],
              [14.923565, 10.891325],
              [15.467873, 9.982337],
              [14.909354, 9.992129],
              [14.627201, 9.920919],
              [14.171466, 10.021378],
              [13.954218, 9.549495],
              [14.544467, 8.965861],
              [14.979996, 8.796104],
              [15.120866, 8.38215],
              [15.436092, 7.692812],
              [15.27946, 7.421925],
              [14.776545, 6.408498],
              [14.53656, 6.226959],
              [14.459407, 5.451761],
              [14.558936, 5.030598],
              [14.478372, 4.732605],
              [14.950953, 4.210389],
              [15.03622, 3.851367],
              [15.405396, 3.335301],
              [15.862732, 3.013537],
              [15.907381, 2.557389],
              [16.012852, 2.26764],
              [15.940919, 1.727673],
              [15.146342, 1.964015],
              [14.337813, 2.227875],
              [13.075822, 2.267097],
            ],
          ],
        },
      };

     
      L.geoJSON(cameroon).addTo(mapRef.current);


      var outerRing = [
        [-180, -90],
        [-180, 90],
        [180, 90],
        [180, -90],
        [-180, -90],
      ];
      var cameroonCoordinates = cameroon.geometry.coordinates[0];
      var mask: GeoJSON.Feature<GeoJSON.Polygon> = {
        type: "Feature",
        properties: {},
        geometry: {
          type: "Polygon",
          coordinates: [outerRing.concat(cameroonCoordinates.reverse())],
        },
      };

      L.geoJSON(mask).addTo(mapRef.current).setStyle({
        interactive: false,
        color: "#000",
        fillColor: "#000",
        fillOpacity: 0.6,
      });
    }
  }, []);

  return <div id="map" style={{ height: "100vh", width: "100%" }}></div>;
}



**page.tsx**:

"use client";
import dynamic from "next/dynamic";


const LazyMap = dynamic(() => import("../../../app/dashboard/Cartographie/Map"), {
  ssr: false,
  loading: () => <p>Chargement...</p>,
});


export default function Home() {
  return (
    <main>
      <LazyMap />
    </main>
  );
}

正如我所说，我已经编写了这段代码，但我的前端没有地图，也没有错误消息。

javascript reactjs typescript next.js leaflet
1个回答
0
投票

我也不太清楚，但解决此类问题的一个很好的起点是在隔离环境中使用它。这是独立运行的代码，它确实进行渲染，但渲染看起来很奇怪。它可能会生成此内容，但视图会被周围的任何内容切断 - 首先使用此版本并将其到达您想要的位置，然后重新集成到您的反应应用程序中

const L = leaflet,
  TheMap = L.map("map").setView([7.369722, 12.354722], 6);


L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors",
}).addTo(TheMap);


var cameroon = {
    type: "Feature",
    properties: {
        name: "Cameroon",
        code: "CMR",
        group: "Countries",
    },
    geometry: {
        type: "Polygon",
        coordinates: [
        [
            [13.075822, 2.267097],
            [12.951334, 2.321616],
            [12.35938, 2.192812],
            [11.751665, 2.326758],
            [11.276449, 2.261051],
            [9.649158, 2.283866],
            [9.795196, 3.073404],
            [9.404367, 3.734527],
            [8.948116, 3.904129],
            [8.744924, 4.352215],
            [8.488816, 4.495617],
            [8.500288, 4.771983],
            [8.757533, 5.479666],
            [9.233163, 6.444491],
            [9.522706, 6.453482],
            [10.118277, 7.038775],
            [10.497375, 7.055358],
            [11.058788, 6.644427],
            [11.745774, 6.981383],
            [11.839309, 7.397042],
            [12.063946, 7.799808],
            [12.218872, 8.305824],
            [12.753672, 8.717763],
            [12.955468, 9.417772],
            [13.1676, 9.640626],
            [13.308676, 10.160362],
            [13.57295, 10.798566],
            [14.415379, 11.572369],
            [14.468192, 11.904752],
            [14.577178, 12.085361],
            [14.181336, 12.483657],
            [14.213531, 12.802035],
            [14.495787, 12.859396],
            [14.893386, 12.219048],
            [14.960152, 11.555574],
            [14.923565, 10.891325],
            [15.467873, 9.982337],
            [14.909354, 9.992129],
            [14.627201, 9.920919],
            [14.171466, 10.021378],
            [13.954218, 9.549495],
            [14.544467, 8.965861],
            [14.979996, 8.796104],
            [15.120866, 8.38215],
            [15.436092, 7.692812],
            [15.27946, 7.421925],
            [14.776545, 6.408498],
            [14.53656, 6.226959],
            [14.459407, 5.451761],
            [14.558936, 5.030598],
            [14.478372, 4.732605],
            [14.950953, 4.210389],
            [15.03622, 3.851367],
            [15.405396, 3.335301],
            [15.862732, 3.013537],
            [15.907381, 2.557389],
            [16.012852, 2.26764],
            [15.940919, 1.727673],
            [15.146342, 1.964015],
            [14.337813, 2.227875],
            [13.075822, 2.267097],
        ]
        ]
    }
};


L.geoJSON(cameroon).addTo(TheMap);


var outerRing = [
    [-180, -90],
    [-180, 90],
    [180, 90],
    [180, -90],
    [-180, -90]
];

var cameroonCoordinates = cameroon.geometry.coordinates[0];
var mask = {
    type: "Feature",
    properties: {},
    geometry: {
        type: "Polygon",
        coordinates: [outerRing.concat(cameroonCoordinates.reverse())]
    }
};

L.geoJSON(mask).addTo(TheMap).setStyle({
    interactive: false,
    color: "#000",
    fillColor: "#000",
    fillOpacity: 0.6,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>

<div id="map" style={{ height: "100vh", width: "100%" }}></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.