标签: react-leaflet

我刚刚开始使用 React-leaflet 库并获得了一个要加载 geoJSON 层的地图，但是我想使用 TopoJSON 层。

我知道这样的纯传单是可能的： https: //gist.github.com/rclark/5779673/。

但是我该如何使用 React-Leaflet 来做到这一点呢？

编辑

class MapViz extends React.Component {

    getStyle() {...};

    render() {
        const position = [x,y];
        var geoData = topojson.feature(test_topo,test_topo.objects).geometries;
        return (
            <Map id="my-map" center={position} zoom={10.2}>
                <TileLayer ... />
                <GeoJSON data={geoData} style={this.getStyle} />
            </Map>
        )
    }
}

我正在使用 React 和 React-Leaflet 生成给定数据点及其纬度/经度坐标的circleMarkers 地图。我在渲染数据地图时没有任何问题，甚至可以在用户按侧边栏上的过滤器类型进行过滤时更改渲染的数据。

<Map center={[this.props.data[0].Latitude, this.props.data[0].Longitude]} zoom={12}>
    <TileLayer
      attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />

    /* code for rendering circleMarkers goes here */

</Map>

当用户单击标记时，我会得到它，因此地图上会出现一个弹出窗口，其中包含有关相应点的一些数据简介。

<CircleMarker center={[entry.Latitude, entry.Longitude]} color={this.determineMarkerColor(entry)} radius={this.computeMarkerSize(entry)}>
          <Popup>
              <span>Radius is for: {this.props.filterType} </span>
          </Popup>
</CircleMarker>

有没有办法配置地图，以便它可以弄清楚用户何时尝试，例如，按住 Shift 单击以选择多个点，然后将所选点作为数组传递？或者，更好的是，如何使地图具有交互性，以便用户可以拖放自定义区域（例如绘制正方形或圆形）并选择该区域内的所有渲染点？

我计划将这组选定数据传递给另一个将其绘制成图表的组件。

任何关于在哪里寻找这个的建议将不胜感激。

我是 Leaflet/React-Leaflet 的新手，我正在尝试在地图上绘制圆形标记，但遇到了麻烦。React-Leaflet 的文档不是很好。我已经弄清楚如何添加点击时显示的弹出窗口。

这是我的代码：

    import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer, Tooltip, Circle } from 'react-leaflet';
import DivIcon from 'react-leaflet-div-icon';
import axios from 'axios';


export default class MapView extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      nasaLocations: [],
      spacexLocations: []
    };
  }

  componentDidMount() {
    axios.get(`https://data.nasa.gov/resource/gvk9-iz74.json`)
      .then(res => {
        const nasaData = res.data;
        this.setState({nasaLocations: nasaData})
        console.log(this.state.nasaLocations);
      })

    axios.get(`https://api.spacexdata.com/v2/launchpads`)
      .then(res => {
        const spacexData = res.data;
        this.setState({spacexLocations: spacexData})
        console.log(this.state.spacexLocations);
      })
  } …

我正在使用 React-leaflet 渲染包含点和线串的 geojson 要素集合：

我能够让实际功能本身的单击和悬停事件正常工作。但我希望能够将鼠标悬停在列表项（与地图上的项目相关）上并打开弹出窗口。我一直在整理文档、github，并尝试不同的东西。但似乎没有办法做到这一点。或者我必须手动渲染我的线串和点，而不是使用<GeoJSON data=

我的地图与点击事件配合得很好：

return (
        <Map
            style={{
                height: '100%',
                width: '100%',
                margin: '0 auto'
            }}
            ref={(el) => {
                this.leafletMap = el;
            }}
            center={position}
            zoom={10}>
            <TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYWJlbnMwefwefEiOiJjajJ1bDRtMzcwMDssmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>' />
            <GeoJSON data={locations} onEachFeature={this.onEachFeature} />{' '}
        </Map>
    );

onEachFeature 正常工作

onEachFeature = (feature, layer) => {
        console.log('onEachFeature fired: ');
        layer.on({
            mouseover: (e) => this.MouseOverFeature(e, feature),
            mouseout: (e) => this.MouseOutFeature(e, feature)

        });
    };

但我不知道如何在不使用的情况下调用layer.bindPopup onEachFeature。一项更改如何使用 prop 值调用这些方法？我想让人们将鼠标悬停在列表项上并让它切换弹出窗口。

我正在尝试从 firestore 数据库获取数据并将其显示在组件中。我已经与数据库建立了连接。我可以在控制台日志中查看数据库中的数据。但我似乎无法在组件初始构建后更新反应组件状态。我是个新手，无法做出反应，不知道发生了什么。下面是我的组件代码。

我尝试将数据库调用移至子组件。并且有同样的问题。我尝试构建具有初始状态的组件，该状态看起来像数据库中的数据。我尝试删除对标记数据的检查以验证它是否未定义。而且我仍然不明白问题出在哪里。

import React, { Component } from 'react'
import { Map, TileLayer } from 'react-leaflet'
import MarkerList from './MarkerList'
import './Basemap.css'
import firebase from '../../config/fbConfig'

class Turmap extends Component {
constructor(){
super();
this.state={
  mapdata:[]
}
};

componentDidMount(){
 const db = firebase.firestore();
 var turmarkers =[];

db.collection("Markets").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {        
    turmarkers.push(doc.data())

  })
}
);    
  this.setState({
    mapdata:turmarkers
   }) 
}

render() {

var markers  = this.state.mapdata;    
return (
  <div>
    {this.state.mapdata.length}
      <Map className='map' center={[21,79]} zoom={4.3}>
      <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' …

是否可以阻止用户使用反应传单库放大或缩小？

我可以在文档中看到以下选项，但这只是控制您是否看到加号和减号控制框 - 您仍然可以双击/点击以放大并拖动地图

<Map zoomControl={false} .. />

缩放文档

https://leafletjs.com/reference-1.4.0.html#control-zoom-option

是否可以配置地图使其像图像一样工作，即您不能移动它，不能拖动它，不能改变缩放等？

谢谢，

我对 React 和传单非常陌生。我正在尝试使用传单绘制 React 地图上的对象中可用的一组纬度和经度。任何有关如何完成此操作的指示都会有所帮助。

我已经浏览了https://react-leaflet.js.org上的 React leaflet 教程。但我无法继续。任何帮助是极大的赞赏。提前致谢。

我拥有的对象数据数组的示例：

data=[
  {
    from_lat: "12.92415",
    from_long: "77.67229",
    id: "132512",
    to_lat: "12.92732",
    to_long: "77.63575",
  },
  {
    from_lat: "12.96691",
    from_long: "77.74935",
    id: "132513",
    to_lat: "12.92768",
    to_long: "77.62664",
  }
]

当我在本地运行时，我的传单地图中的自定义图标工作得很好gatsby develop，但是当我尝试构建时，我收到与自定义标记图标相关的错误：

 WebpackError: TypeError: leaflet_src_layer_marker__WEBPACK_IMPORTED_MODULE_4__.Icon is not a constructor

相关进口：

import { Map, Marker, Popup, TileLayer, Tooltip, ZoomControl } from 'react-leaflet'
import { Icon } from 'leaflet/src/layer/marker' 

创建自定义图标：

// Init custom map icon
  const mapIcon = MapIcon();
  const markerIcon = new Icon({
    iconUrl: mapIcon,
    iconSize: [36, 36],
    iconAnchor: [18, 18],
    shadowSize: [36, 36],
    shadowUrl: 'https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png',
    shadowAnchor: [10, 18],
    popupAnchor: [0, -16],
    tooltipAnchor: [13, -4]
  });

JSX：

{ markerData.length > 0 ? markerData.map((node, index) => (
            <Marker position={[node.coords.lat, node.coords.lng]} …

我已经连续三天碰壁了，现在决定寻求帮助\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 …

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

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