标签: leaflet

所以我去了传单文档并复制粘贴的示例，我在那里找到了看看是否可以重现地图，但是，地图不仅损坏了，而且还与它所在的容器重叠。我试图给出宽度和.leaflet-container高度的固定值，但是他们甚至没有被认可。

所以我的问题是我有什么遗漏的吗？

传单组件示例

import 'leaflet/dist/leaflet.css';
export default class LeafletMap extends Component {
    constructor() {
        super()
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
  }
    render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

它正在被导入，就像

<div className="hotel_description_card_right">
   <div className="hotel_description_card_right_container">

       <LeafletMap /> // here

   </div>
</div>

现在看起来怎么样

我遇到传单及其活动的问题mouseout。

在下面的代码中，有时（特别是快速移动鼠标时），不会触发 mouseout 事件。不会Mouse out !出现在控制台中。

我发现这个行为与图标替换有关。layer.setStyle每次都很简单。（这里我使用leaflet-gpx插件，但它的工作方式与leaflet 的 IconUrl 或 ShadowUrl相同）

// This works every time
gpxPath.on('mouseover', function (e) {
    var layer = e.target;
    layer.options.marker_options.startIconUrl = 'myHoverIconStartUrl';
    layer.options.marker_options.endIconUrl = 'myHoverIconEndUrl';
    layer.reload();
});

gpxPath.on('mouseout', function (e) {
    console.log('Mouse out !')
    var layer = e.target;
    /* those two lines below cause the issue */
    layer.options.marker_options.startIconUrl = '';
    layer.options.marker_options.endIconUrl = '';
    layer.reload();
});

我知道 mouseout 事件有时会导致这样的问题，但在这种特殊情况下，我被迫使用传单事件，而且我有点没有想法。

我开始使用可以生成地图的代码。我现在认为 OSM (OpenStreetMaps) 是一个很好的解决方案。LeafletJS还使得基于OSM绘制地图变得非常容易。到目前为止，一切都很好。

我希望能够画出一个县的轮廓（边界），并试图了解这个过程会是什么样子。我是先打电话寻找坐标，然后将它们传递到传单中还是有更好的方法？

我可以使用 Nominatim API 获取边界，但调用如下：

https://nominatim.openstreetmap.org/ui/search.html?state=tx&county=Lee

我可以在传单中绘制区域，如下所示：

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

那么，是我想多了，还是事情就是这样？

我已经连续三天碰壁了，现在决定寻求帮助\xe2\x80\xa6

我有一个包含 \xe2\x80\x98id\xe2\x80\x99 的数据集，我想在标记或标记的替换旁边显示 \xe2\x80\x98id\xe2\x80\x99，这可以是标签或弹出窗口或任何其他我愿意接受建议的东西。

我查看了很多在线示例，但无法正常工作，并发现这大部分是由于我有较新版本的react-leaflet，旧版本导出 \xe2\x80\x98Map\xe2\x80\ x99 和最新版本导出 \xe2\x80\x98MapContainer\xe2\x80\x99 所以我尝试转换一些在线示例，但仍然没有乐趣。

像这样的图像会很棒！

import React from \'react\'\nimport { MapContainer, TileLayer, Marker, Polyline } from \'react-leaflet\'\nimport L from "leaflet";\nimport "./App.css";\n\n\nconst customMarker = new L.icon({\n    iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",\n    iconSize: [25, 41],\n    iconAnchor: [10, 41],\n    popupAnchor: [2, -40]\n});\n\nconst myData = JSON.parse(\'[{"id":3,"stopId":"STOPID-TA21 9AD~1536","coordinates":[[50.98115822630729,-3.2093097241813626]]},{"id":4,"stopId":"STOPID-EX4 8HH~1537","coordinates":[[50.73658088928259,-3.481135132172668]]},{"id":5,"stopId":"STOPID-EX3 0QH~1538","coordinates":[[50.68477425437021,-3.448725268717586]]},{"id":6,"stopId":"STOPID-TQ6 9LA~1539","coordinates":[[50.3528669555381,-3.600095665457003]]},{"id":7,"stopId":"STOPID-DE65 6BG~1542","coordinates":[[52.87354650871699,-1.5581688412757033]]},{"id":8,"stopId":"STOPID-NG20 9QU~1545","coordinates":[[53.217696,-1.1362328]]},{"id":9,"stopId":"STOPID-NG20 9QU~1548","coordinates":[[53.217696,-1.1362328]]},{"id":10,"stopId":"STOPID-NG20 9QU~1546","coordinates":[[53.21800641457751,-1.1354169130791034]]},{"id":11,"stopId":"STOPID-NP11 4ER~1554","coordinates":[[51.666329754845755,-3.1443305326604944]]},{"id":12,"stopId":"STOPID-NP23 7WJ~1555","coordinates":[[51.734530948192244,-3.178078655551782]]},{"id":13,"stopId":"STOPID-GL18 2AN~1532","coordinates":[[51.98455968622588,-2.445541072124886]]},{"id":14,"stopId":"STOPID-GL18 1BY~1531","coordinates":[[51.93142465831891,-2.407781870252181]]},{"id":15,"stopId":"STOPID-HR2 9AS~1533","coordinates":[[52.000714453292005,-2.7953236019870005]]},{"id":16,"stopId":"STOPID-HR4 7NH~1534","coordinates":[[52.092459099571236,-2.9051723608040594]]},{"id":17,"stopId":"STOPID-LD3 8NA~1535","coordinates":[[51.93748683342681,-3.4157228488264124]]},{"id":18,"stopId":"STOPID-HR8 2DH~1525","coordinates":[[52.0346525,-2.4365534]]},{"id":19,"stopId":"STOPID-HR8 2DH~1528","coordinates":[[52.0346525,-2.4365534]]},{"id":20,"stopId":"STOPID-HR8 2DH~1524","coordinates":[[52.034652760327226,-2.4365536678734805]]},{"id":21,"stopId":"STOPID-HR8 2XW~1523","coordinates":[[52.02880753462352,-2.429552550694105]]},{"id":22,"stopId":"STOPID-CF39 9DU~1556","coordinates":[[51.5983434,-3.4249801]]},{"id":23,"stopId":"STOPID-CF39 9DU~1557","coordinates":[[51.59803073699841,-3.423115687588953]]},{"id":24,"stopId":"STOPID-BN17 5QZ~1551","coordinates":[[50.81120291892175,-0.5873687372834572]]},{"id":25,"stopId":"STOPID-BN2 6AF~1552","coordinates":[[50.84513347167287,-0.08241743108671877]]},{"id":26,"stopId":"STOPID-WV1 1PN~1540","coordinates":[[52.59340809839608,-2.1244413046916635]]},{"id":27,"stopId":"STOPID-HR8 2DH~1527","coordinates":[[52.0346525,-2.4365534]]},{"id":28,"stopId":"STOPID-HR8 2DH~1529","coordinates":[[52.0346525,-2.4365534]]},{"id":29,"stopId":"STOPID-HR8 2DH~1526","coordinates":[[52.034652760327226,-2.4365536678734805]]},{"id":30,"stopId":"STOPID-CV3 4LH~1541","coordinates":[[52.39288327159674,-1.477401293729262]]},{"id":31,"stopId":"STOPID-LE18 2FT~1543","coordinates":[[52.588473356251626,-1.1238469402885252]]},{"id":32,"stopId":"STOPID-NG2 …

我需要在多边形要素中实现多色填充。填充将根据要素属性有条件地格式化。

假设我需要一个具有三色图案的多边形，如下所示：

let fillPalette = ['orange', 'green', 'blue'];

这在传单中怎么可能呢？

简而言之div，这可以通过以下 CSS 函数轻松实现：

background: repeating-linear-gradient(
  -45deg,
  orange,
  orange 10px,
  green 10px,
  green 20px,
  blue 20px,
  blue 30px
);

然而，Leaflet 使用 SVG/Canvas。

我知道以下插件：

• https://github.com/teastman/Leaflet.pattern

• https://github.com/cloudybay/leaflet-polygon-fillPattern

不幸的是，第一个似乎不支持多色图案，第二个仅支持图像。

有任何想法吗？

我想使用react-leaflet并在其顶部添加一个地理编码器字段。我发现leaflet-control-geocoder这看起来很棒，但没有反应包装器可以将其与反应传单一起使用。有人做过这个并且可以分享一个沙箱吗？或者也许它存在于 GitHub 上，但我没有使用正确的关键字？

感谢您的帮助，最诚挚的问候

我有使用 ngx-leaflet 和路由的 Angular 10 应用程序。我有一个地图组件，它根据用户选择在地图上动态显示自定义标记。我从地图组件视图导航到另一个组件。然后我导航回地图组件。用户可以更改日期，并基于此，旧的标记层将被删除，新的标记层将被加载并显示。一切正常，但我总是收到此错误：

ERROR TypeError: Cannot read property '_leaflet_pos' of undefined
at getPosition (leaflet-src.js:2450)
at NewClass._getMapPanePos (leaflet-src.js:4439)
at NewClass._moved (leaflet-src.js:4443)
at NewClass.getCenter (leaflet-src.js:3798)
at NewClass.setZoom (leaflet-src.js:3181)
at SafeSubscriber._next (map.component.ts:960)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)

只有当我返回到地图组件时，我才能重现此错误。如果我只停留在地图组件上，则不会显示错误。我已经寻找修复方法，但从我发现的情况来看，似乎没有人真正知道为什么会发生这种情况以及如何修复此错误。我在 GitHub 上发现这两个问题在 Vue.js 中处理相同的问题，所以我猜这是传单本身的问题，而不是 ngx-leaflet 的问题。

https://github.com/vue-leaflet/Vue2Leaflet/issues/613

https://github.com/stefanocudini/leaflet-search/issues/129

我试图改变这一点：

  function getPosition(el) {
// this method is only used for elements previously positioned using setPosition,
// so it's safe to cache the position for performance

return …

我正在使用与图书馆传单的反应，但我想在我的地图上添加以公里为单位的比例尺。

我该怎么做才能做到这一点？

这是我的代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import './styles.css';

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13,
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

这是链接： …

所以我对反应和传单真的很陌生，但我想做的基本上就是让用户输入一些输入，然后在他们按回车键后，触发一个事件，然后该事件飞到从该输入生成的坐标。我正在使用地理编码，经纬度坐标已成功生成。但是我不知道如何使地图飞到那个位置。这是我到目前为止所拥有的：

import './App.css';
import * as React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import Geocode from "react-geocode";
import SearchBar from './SearchBar';

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      position: [43.653225, -79.383186]
    }
  }
  mapRef = React.createRef();

  changePos (pos) {
    this.setState({position: pos});
    this.mapRef.current.flyTo(pos);
  }

  render () {
    return (
      <ChakraProvider resetCSS = {false}>
        <div className = "App">
          <div id="title">
            <h1>
              CovidStopSpots
            </h1>
              <p>A responsive …

我不确定这是否是react-leaflet-markercluster、react-leaflet、leaflet、react或我的代码的问题。

我有一张包含数千个标记的地图，我正在使用react-leaflet-markercluster 进行标记聚类。如果我需要更新 的全局状态MapComponent，则反映此更改时会有 1-3 秒的延迟。

我创建了一个包含 5000 个标记的codeandox，您可以看到有 2 个存在性能问题的用例：

1.)MapComponent位于react-reflex元素内部，允许调整面板大小并将新尺寸（宽度、高度）传播到MapComponent. 如果宽度和高度发生变化，mapRef.invalidateSize()则调用该函数来更新地图尺寸。调整大小非常慢。

2.) 如果用户单击Marker，则更新所选的全局状态。它是单击的标记 ID 的列表。地图调用fitBounds方法以关注单击的标记，并且标记图标也发生更改。大约有 1 秒的延迟。

在我的项目中，如果我需要更改MapComponent状态，则在开发模式下需要 2-3 秒才能反映更改，并且它只是MapComponent及其元素（标记）的一次重新渲染。

我查看了 Chrome 性能概况，似乎大部分时间都花在内部 React 方法上。

可以通过使用 防止重新渲染来解决此问题memo，这与 类似shouldComponentUpdate，但它使整个代码库过于复杂。preferCanvas选项不会改变任何东西。我想知道解决这些问题的好方法是什么。