标签: react-leaflet

我正在尝试扩展“react-leaflet”v3 中的 TileLayer 组件。有必要重写此函数以提供自定义磁贴 URL 命名方案。我需要的一个例子，写在基本传单中：

function initMap() {
    L.TileLayer.WebGis = L.TileLayer.extend({

        initialize: function (url, options) {
            options = L.setOptions(this, options);
            if (options.detectRetina && L.Browser.retina && options.maxZoom > 0) {
                options.tileSize = Math.floor(options.tileSize / 2);
                options.zoomOffset++;
                if (options.minZoom > 0) {
                    options.minZoom--;
                }
                this.options.maxZoom--;
            }
            if (options.bounds) {
                options.bounds = L.latLngBounds(options.bounds);
            }
            this._url = url + "/gis_render/{x}_{y}_{z}/" + options.userId + "/tile.png";
            var subdomains = this.options.subdomains;
            if (typeof subdomains === 'string') {
                this.options.subdomains = subdomains.split('');
            }
        },

        getTileUrl: function (tilePoint) { …

您好，有什么方法可以将 jsx 组件传递给 bindPopup 函数，以便我可以在单击按钮时推送 redux 命令吗？

 pointToLayer={(
      geoJsonPoint: Feature<Point, DeviceProperties>,
      latlng,
    ) => {
      const marker = L.marker(latlng);
      marker.setIcon(
        markerIcon({ variant: geoJsonPoint.properties.relation }),
      );

      const sddds = (
        <div className="font-quicksand">
          <h2>{geoJsonPoint.properties.id}</h2>
          <h2>{geoJsonPoint.properties.name}</h2>
          <p>{geoJsonPoint.properties.description}</p>
          <p>{geoJsonPoint.properties.ownerId}</p>
          <a
            onClick={() => {
              dispatch(setDevice(geoJsonPoint.properties));
            }}
          >
            Open device details
          </a>
        </div>
      );

      marker.bindPopup(renderToString(sddds));
      return marker;
    }}

我知道我可以使用反应传单组件，但这样我就无法将道具传递到每个标记选项中（我的意思是标记作为层）。

传单上的 Circle 和 CircleMaker 有什么区别吗？ 在示例中，唯一的区别看起来像是一个人可能有孩子，但在文档上，两者都允许孩子。那么有什么区别呢？

<Circle center={center} pathOptions={fillBlueOptions} radius={200} />
<CircleMarker center={[51.51, -0.12]} pathOptions={redOptions} radius={20}>
  <Popup>Popup in CircleMarker</Popup>
</CircleMarker>

谢谢。

嘿嘿！

我希望通过悬停/鼠标悬停打开弹出窗口。

我尝试了推荐的但它仍然只能在单击时打开。有人知道缺少什么吗？

任何帮助表示赞赏！

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from 'leaflet';

const Map = () => {
    const renderIcons = () => {
    return(
        <Marker
         position = {[latitude, longitude]}
         icon     = {getIcon(markerType)}
         onMouseOver = {event => event.target.openPopup()}
        >
            <Popup>
             Hello 
            </Popup>
        </Marker>
     );
});
return(
    <MapContainer ...>
       <TileLayer .../>
       {renderIcons()}
    </MapContainer>
 );
}

我正在使用 React JS 制作网页。我的目标是在前端显示地图。我正在使用react-leaflet npm 包来实现同样的目的。但是，我收到以下错误：

错误...

"Uncaught Error: Map container is already initialized.
at NewClass._initContainer (Map.js:1105:1)
at NewClass.initialize (Map.js:136:1)
at new NewClass (Class.js:22:1)
at MapContainer.js:10:1
at commitHookEffectListMount (react-dom.development.js:22969:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:24948:1)
at invokeEffectsInDev (react-dom.development.js:27142:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27121:1)
at flushPassiveEffectsImpl (react-dom.development.js:26865:1)
at flushPassiveEffects (react-dom.development.js:26801:1)"

以下是我的代码：

import React from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';


const Map = () => {
return (
    <MapContainer center={[51.505, -0.09]} zoom={13}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}> …

我正在使用 React leaflet 我的 next.js 应用程序。React Leaflet 标记已损坏（参见图像）。我正在使用自定义市场，但不起作用。我已经整理了一个非常简单的 React / Leaflet 演示，但标记图标根本没有显示

import { useState, useEffect, useRef } from "react";
import "leaflet/dist/leaflet.css";
import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMap,
  useMapEvents,
} from "react-leaflet";
import { useSelector } from "react-redux";
import { useCallback } from "react";
import { useMemo } from "react";


function LocationMarker({ lat, lng }) {
  const [position, setPosition] = useState(null);
  const [bbox, setBbox] = useState([]);
  const map = useMap();

  useEffect(() => {
    map.flyTo([lat, lng], map.getZoom());
  }, [lat]);

  return …

我正在尝试根据本文并使用 Chakra Modal 组件，在 React Leaflet Circle Marker Popup 组件中的图像上创建自定义灯箱效果。该实现有效，但我遇到了 Chakra UI 的 z-index 和放置问题。我的目标是将灯箱放置在所有其余内容的顶部，目前，由于相对定位，模态框放置在地图容器部分的下方。

据我了解，Chakra Modal 组件应该放置在所有内容上，但该组件的默认 z 索引是相对于 Leaflet 图层放置的，因此会渲染在地图容器的一部分下方。将文章中的代码与模态结合使用会产生接近我想要的结果，除了模态灯箱放置在 Leaflet 地图 div 的一部分下方，显得不美观并且关闭按钮被遮挡。

我希望将灯箱 div 放置在整个文档的顶部，但我不确定如何覆盖模态组件的默认值 1400 到 2400，以便将其放置在整个地图上。覆盖多部分组件有点棘手，而且看起来 Modal z-index 值没有在Modal 主题定义中指定。我使用模态组件的灯箱如下：

import React, {useState} from 'react'
import { Modal, ModalContent, ModalBody, ModalCloseButton, Flex, ModalOverlay, ModalHeader, useDisclosure } from '@chakra-ui/react'

const LightBox = ({children, src, alt, Wrapper = 'div'}, zIndex=800) => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    //const [ …

我正在尝试Leaflet使用 Typescript 在 Next.js 中渲染地图。我读到需要禁用 ssr 以避免“窗口未定义”问题，但在尝试生成地图时：

import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";

export const Leaflet: React.FC = () => {
  return (
    <MapContainer center={{ lat: 48.71291, lng: 44.52693 }} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright%22%3EOpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
};

这是渲染它的：

const Home: NextPage = () => {
  const MapWithNoSSR = dynamic(() => import("../components/Leaflet"), {
    ssr: false,
  });

  return (
    <>
      <MapWithNoSSR/>
    </>
    );
  };

export default Home

TypesSript 给我这个错误：

'() => …

我对 React 和 Leaflet 还很陌生。我已经让 Leaflet 在一个简单的 HTML 页面中工作得很好。所以现在我正在尝试使用 React 来制作一个更加动态的网站。

我遇到的问题是我可以让它进行渲染。地图以块的形式出现在整个页面上。我在地图开发下方放置了一个 h1 和一个带有文本的简单 div，您可以看到它随机渲染到下方的文本后面。它也不是一张连续的地图。

我正在使用 React v18.2.0 和 React Leaflet 4.2.1 和 Leaflet 1.9.3。

这是我的应用程序代码：

import React from 'react';
import './App.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function App() {
  return (
    <div>
      <h1>See my map</h1>
      <MapContainer center={[45.4, -75.7]} zoom={12}scrollWheelZoom={false}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
      <div>After map report</div>
    </div>
  );
}

export default App;

我很乐意就正在发生的事情以及我可以采取哪些措施来解决它提供任何建议。

谢谢！

我在项目中使用React-Leaflet和（callemall）Material-UI。我正在尝试在<Popup></Popup>React-Leaflet的组件内渲染Material-UI Card组件。我尝试将其作为组件拉入Popup，但是弹出窗口不允许组件正常工作。具体来说，卡组件具有一个按钮元素，可以将其展开，但是不幸的是，弹出窗口不允许我单击它。我确定有一些我需要重写的CSS-y东西，但是我想一个简单的选择就是用我自己的组件替换popup组件，但是我不确定该怎么做。任何见解都非常感激:)

我的代码如下所示：

<Marker position={position}>
    <Popup>
        <MapPopup />
    </Popup>
</Marker>

导入的组件看起来像：（我已经删除了样式和不重要的细节，以使其易于阅读）

<Card>
    <CardHeader />
        <CardMedia
            expandable={true}
            overlay={
                <CardText expandable={true}>
                    <div>
                        <p>Text</p>
                        <Chip>text</Chip>
                    </div>
                    <div>
                        <p>Text</p>
                        <Chip>Text</Chip>
                    </div>
                </CardText>
            }>
        <img src="cardMediaImageURL" />
    </CardMedia>
</Card>