标签: react-leaflet

我正在尝试在由react-leaflet-draw.

这是我的尝试：

_onCreate(e) {
        var layer = e.layer
        layer.bindPopup(
            <Content>
                <Label>Flower Name</Label>
                <Input type="text" placeholder="Flower Name"/>
                <Label>Flower Index</Label>
                <Input type="number" placeholder="Flower Index"/>
                <Label>Flower Radius</Label>
                <Input type="number" placeholder="Flower Radius"/>
                <Button color="isSuccess" >Add Flower</Button>
            </Content>
        )
    }

组件由react-bulma 提供。

但我试试这个方法，我得到以下错误： Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'。

如果我将内容设为一个简单的字符串，我将获得纯 HTML 字段和一个按钮，但无法访问外部功能或实际的 Bulma 组件。

基本上我希望能够将新形状保存在数据库中。

从简短的在线搜索来看，这似乎是 的限制react-leaflet，但我想先在这里检查一下。

另外，这是为新创建的形状设置弹出窗口的最佳方式吗？我很难将常规leaflet-draw方法翻译为react-leaflet-draw.

我使用以下代码在地图中创建一个矩形leaflet。

const rectangles = [[51.49, -0.08], [51.5, -0.06]]   

<Rectangle key={key} bounds={rectangle} color="green">

</Rectangle>

我想在矩形内添加文本，就像矩形的标签一样，有办法做到这一点吗？

我为此使用了react-leaflet库。

我正在尝试将一些 GeoJSON 导入到事件处理程序FeatureGroup中_onFeatureGroupReady，但它似乎没有渲染到地图中。该代码主要基于react-leaflet-draw 此处库中的示例。奇怪的是，编辑菜单变得可用，表明数据可能存在，但只是没有被渲染。

我不确定发生了什么，因为我总体来说是地图的初学者。相关代码在else if(this.props.data) {块中。这些console.log()报表均显示数据存在且格式正确。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              37.79,
              -122.45
            ],
            [
              37.79,
              -122.42999999999999
            ],
            [
              37.77,
              -122.42999999999999
            ],
            [
              37.77,
              -122.45
            ],
            [
              37.79,
              -122.45
            ]
          ]
        ]
      }
    }
  ]
}

这是我尝试将此数据导入到的代码FeatureGroup：

_onFeatureGroupReady = (ref) => {
    console.log('_onFeatureGroupReady');
    console.log(ref);
    if(ref===null) {
        return;//bug???
    }
    this._editableFG = ref; 
    // populate the …

我正在尝试使用react-leaflet.js获取基本地图。这是我的代码：

import React from 'react';
import { Map } from 'leaflet';

const mapStyle = {
  height: '400px'
};

const mapCenter = [0, -0];
const zoomLevel = 3;

export default class MapT extends React.PureComponent {
  render() {
    return (
      <div>
        <Map
          style={mapStyle}
          center={mapCenter}
          zoom={zoomLevel}
        >
        </Map>
      </div>
    );
  }
}

但是我遇到一个错误：

Uncaught TypeError: Cannot read property 'initialize' of undefined
    at NewClass (leaflet-src.js:300)
    at mountIndeterminateComponent (react-dom.development.js:14003)
    at beginWork (react-dom.development.js:14470)
    at performUnitOfWork (react-dom.development.js:17014)
    at workLoop (react-dom.development.js:17054)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev …

我在准系统应用程序中使用leaflet-react的简单示例。create-react-app

问题：地图图块确实会渲染，但始终有 1-2 行地图图块未渲染（呈灰色）。当地图移动时，不同的行将开始消失。

但是，如果我要调整浏览器窗口的大小，地图就会正确渲染！

问题是什么？我们该如何解决？

使用react-leafletv2.2.1、1.4.0 leaflet。Chrome 浏览器和 Brave 浏览器上也存在同样的问题。

地图.js

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

class Maps extends Component {
    constructor() {
        super();
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
    }

    render() {
        const position = [this.state.lat, this.state.lng];

        return (
            <div>
                <Map center={position} zoom={this.state.zoom}>
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                    />
                    <Marker position={position}>
                        <Popup>
                            <span>A …

我有一个列表，通过单击列表元素，我想打开标记上的弹出窗口。目前，只有在单击标记时才会打开弹出窗口。

这就是我创建标记和弹出窗口的方式

import React from 'react';
import {
  CircleMarker,
  Popup,
} from 'react-leaflet';

class PointsLayer extends React.Component {
  render() {
    const { data } = this.props;
    return (
      data.map(point => {
        return (
          <CircleMarker
            key={point.id}
            center={point.coordinates}>
            <Popup>
              Fancy Pop Up
            </Popup>
          </CircleMarker>
        )
      })
    )
  }

和

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Map,
} from 'react-leaflet';
import L from 'leaflet';
import PointsList from './PointsList;
import PointsLayer from './PointsLayer;

class Map extends React.Component …

react-leaflet-context-menu 是leaflet.contextmenu 的react 版本。然而它使用原始的传单映射来实现反应中的插件而不是使用反应传单。

我在我的应用程序中采用了 react-leaflet，使用组件。我浏览了互联网，但没有多少示例来展示如何正确扩展 Map。

这是我的应用程序中的地图代码：

<LeafletMap
        ref={m => {this.leafletMap = m;}}
        center={this.state.center}
        zoom={this.state.zoom}
        maxZoom={this.state.maxZoom}
        preferCanvas={this.state.preferCanvas}
        contextmenu={this.state.contextmenu}
        contextmenuWidth={this.state.contextmenuWidth}
        contextmenuItems={this.state.contextmenuItems}>
        <TileLayer
          url={mapsource}
          />
        <MarkerClusterGroup showCoverageOnHover={false} zoomToBoundsOnClick={false} maxClusterRadius={30}>
          {CamMarkers}
        </MarkerClusterGroup>
        <ScaleControl imperial={false} metric={true}/>
</LeafletMap>

我期望通过扩展 react-leaflet 的组件，它可以直接支持leaflet.contextmenu。道具 contextmenu、contextmenuWidth、contextmenuItems 将被输入到扩展组件，并在地图上右键单击时显示一些控件。

我正在为 react-leaflet 编写一个自定义组件。它是一个可编辑的弹出窗口，还有一些其他功能。 这里是一个例子的代码和框。组件的源代码在这里。这个例子只是做了一个import EditablePopup from 'my-react-leaflet-popup-plugin'，它是我项目中的一个 .js 文件。效果很好。

我正在尝试使用 webpack 将其打包为一个节点模块，以便其他人可以使用它。它编译没有问题。你可以在这里看到我的 webpack.config.js 。然后我使用npm link将这个模块链接到我本地机器上的一个测试项目。当我这样做时，我收到错误消息：

TypeError: Cannot read property 'leafletElement' of null

  460 |   value: function value() {
  461 |     var e = this;
  462 |     this.props.open && setTimeout(function () {
> 463 |       e.thePopup.leafletElement._source.openPopup();
      | ^  464 |     }, .001);
  465 |   }
  466 | }, {

即使我摆脱了那个条款，我也会得到这个：

TypeError: Cannot read property 'openPopup' of undefined


  9226 | // …

我正在尝试实时获取地图的缩放级别，以制作一个将缩放锁定为当前值的按钮。我曾尝试使用 getMapZoom 和 getZoom 但两者都给我一个未定义的值。我想我没有使用正确的参考，但我找不到太多关于它的文档。这是代码：

<Map className="map-layer" 
          center={center} 
          onoverlayadd={this.overlayadd} 
          onoverlayremove={this.overlayremove}
          ondragend={this.zoomChange}
          onzoomend={console.log('Zoom: ' + this.mapRef.leafletElement.getMapZoom())}
          zoom={this.state.zoom}
          ref={this.mapRef}
          preferCanvas={false}
          animate={true}
          scrollWheelZoom={this.state.zoomLock ? false : true}
          doubleClickZoom={this.state.zoomLock ? false : true}
          touchZoom={this.state.zoomLock ? false : true}
          maxZoom={7}
          minZoom={7}

                    >

我正在使用 react-leaflet 与磁贴供应商 Stadia OSM Bright。当我在本地运行它时显示图块但是当我构建并上传到服务器时它停止加载图块并开始发出请求 403 禁止错误。我有一个 API 密钥，但没有找到将它放入组件的任何解决方案。这是一个代码示例

render() {
const headeris = {"Authorization": "Stadia-Auth "+this.state.authkey}
return (
  <LeafletMaps
    center={[this.state.lat, this.state.lng]}
    zoom={12}
    maxZoom={17}
    attributionControl={true}
    zoomControl={true}
    doubleClickZoom={true}
    scrollWheelZoom={true}
    dragging={true}
    animate={true}
    easeLinearity={0.5}
  >
    <TileLayer 
    url="https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png"
    attribution= '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    />
    {this.state.markers.map((position, index) => (
      <Marker
        key={`marker-${index}`}
        position={[position[0][4], position[0][5]]}
      >
        <Popup>
          <p>{position[0][0]}</p>
          <a href={`/admin/calender/${position[0][2]}`}>Book now</a>
        </Popup>
      </Marker>
    ))}
  </LeafletMaps>
);