将GeoJSON文件导入React-Leaflet

文章/答案/技术大牛

发布

1回答

无法在React中加载.geojson文件

json、reactjs、geojson、react-leaflet

我正在尝试使用以下命令在React中导入.geojson文件： import data from 'filename.geojson'; 但是，当我打印以下代码console.log(data)以检查它是否已加载时，我得到了以下结果： /static/media/filename.e789b00e.geojson 然后，如果我将文件扩展名改为.json而不是.geojson，它将正确加载geoJ

浏览 39提问于2020-04-23得票数 0

回答已采纳

1回答

json、reactjs、leaflet、geojson、react-leaflet

我正在尝试导入一个GeoJSON文件到react-leaflet，如下所示： /> </Map>} 我得到“错误:无效的GeoJSON对象”。调

浏览 16提问于2020-03-01得票数 2

1回答

具有react-leaflet的geojson-vt

reactjs、leaflet、geojson、react-leaflet

有谁有使用geojson-vt的react-leaflet项目的barebone存储库的示例吗？我有一个有13MB geoJSON文件的react-leaflet项目。我不知道如何用react-leaflet的geojson标签让它渲染得更快。我希望geojson-vt是答案。

浏览 25提问于2021-01-13得票数 0

1回答

创建自定义GeoJSON组件的好方法是什么

javascript、reactjs、leaflet、geojson、react-leaflet

我需要帮助从React-Leaflet创建GeoJSON自定义组件import { withLeaflet, GeoJSON } from 'react-leaflet' c

浏览 0提问于2019-06-25得票数 0

1回答

未明错误:元素类型无效:预期字符串反应-传单

reactjs、leaflet、react-leaflet

我将react-leaflet与create-react-app脚本集成在我的项目创建中。我跟着这个。所有操作都正常，但是当我尝试使用导入的GeoJson组件时：我有以下警告。您可能忘记从定义在其中的文件中导出组件。检查您在index.js:47的代码。未定义错误:元素类型无效:期望字符串(用于内置组件)或

浏览 1提问于2017-09-28得票数 0

回答已采纳

1回答

反应:如何通过使用传单获取状态调用来映射geojson？

javascript、reactjs、leaflet、react-leaflet

我试图在react中绘制一个geojson，并使用react-leaflet。当我在本地导入geojson时，我能够映射它。现在，我通过https获取原始数据，然后设置状态，尝试将该状态作为支持传递。return geojson this.setState({ geojson: data&& <Leaf

浏览 1提问于2020-12-20得票数 1

回答已采纳

1回答

react-leaflet GeoJSON与typescript不渲染geojson点

reactjs、typescript、webpack、webpack-dev-server、react-leaflet

我正在尝试使用geojson点将点渲染到地图上。我有一个react应用程序，我正在使用react-leaflet。由于未知原因，不会在地图上渲染任何点。我曾尝试导入一个json文件，但随后收到错误消息： TS2322: Type '{ type: string; features: { type: string; properties: {我的json文件如下所示： { &quo

浏览 119提问于2021-11-03得票数 0

回答已采纳

1回答

react-leaflet :尝试向GeoJSON添加onEachFeature道具，但不起作用

reactjs、geojson、react-leaflet

我正在使用react-leaflet和GeoJSON在地图上指示一个区域。我想在GeoJSON的道具中添加onEachFeature，这样当它在地图上单击或悬停时，一些信息就会弹出(例如：feature.geometry.type)。下面我将举一个我想要实现的目标的例子： import React from 'react'; import { MapContainer, TileLayer, LayersControl, GeoJSON} from 'react-le

浏览 34提问于2021-06-24得票数 0

回答已采纳

1回答

无法从react-leaflet-draw导入EditControl

leaflet、react-leaflet、react-leaflet-draw

版本: leaftlet - 1.3.4 react-leaflet 2.0.1 宣传单-绘图- 1.0.4 react-leaflet-draw -0.19.8 代码： import { Map,TileLayer, Marker, Popup } from "react-leaflet"; );} 错误：找不到与'/node_m

浏览 21提问于2021-08-11得票数 0

1回答

在我自己的代码库中为TypeScript模块定义缺少的类

typescript

我通过npm和@types/react-leaflet一起安装了。如果我导入在@types/react-leaflet中定义的东西，它工作得很好，如下所示但是，如果我试图导入@types/react-leaflet作者在声明文件中遗漏的内容，比如MapLayer。/@types

浏览 8提问于2017-02-26得票数 0

回答已采纳

1回答

如何在geojson组件的点击上创建标记？

reactjs、react-leaflet、react-leaflet-v3

我导入数据，为标记创建状态变量和setter，并将这些项传递给组件<MyData/>和<MyMarkers/>。import React, { useState } from 'react' import {MapContainer, TileLayer} from 'react-leaflet它接收geojson数据、一个对象数组和一个设置标记状态的函数。import React from

浏览 2提问于2021-08-26得票数 0

回答已采纳

1回答

用react传单绘制TopoJSON

javascript、reactjs、leaflet、topojson、react-leaflet

我一直在使用一个GeoJson文件作为反作用传单地图，但是这个文件太大了，我收到了一个TopoJson文件。关于如何与反应传单一起使用这一点，没有多少信息。这是我的密码-const topoJson = require(".attribution='© <a href="http:/

浏览 2提问于2020-03-26得票数 1

回答已采纳

1回答

React-leaflet GeoJSON `onClick`

javascript、reactjs、re、react-leaflet

GeoJSON组件似乎没有onClick处理程序，它是组件的全局处理程序。如果您添加onClick，它将工作，但TypeScript将触发一个错误。示例代码：const MyComponent = () => ( key={id如何为GeoJSON组件设置全局onClick处理程序？版本：react-leaflet@2.7.0

浏览 0提问于2021-03-04得票数 0

1回答

如何处理数据集中的react传单v3中的事件？

javascript、reactjs、react-native、react-hooks、react-leaflet

我有一个从端点检索该信息的组件，即Hospitals组件，代码如下：import { MapContainer, TileLayer } from "react-leaflet编辑：添加医院的组件代码import { GeoJSON } from "react-leaflet"; const overpass = require<GeoJSON</

浏览 1提问于2021-04-04得票数 1

回答已采纳

1回答

ReactJS ans的反应-传单:如果加载，如何使组件等待API的数据。

reactjs、components、react-leaflet

当我将.json文件与GeoJSON格式的数据一起使用时，映射工作得很好。} 地图代码：import { MapContainer, TileLayer, GeoJSON} from 'react-leafle

浏览 3提问于2022-11-28得票数 0

1回答

我的应用程序不想重新渲染，但是上下文中的列表想要

javascript、reactjs、leaflet

小故事:我正在制作自己的GIS (地理信息系统)，希望能够上传带有地理数据的JSON文件。但是，我不想将文件保存在数据库中，而只是保存在列表中。此外，我使用上下文将数据发送到(leaflet)组件。当我将新的JSON上传到layerList时，它会更新，但组件不会重新呈现。我让控制台在上传文件后记录了这个列表，所有的文件都被添加了。export default FileUpload; 映射： import React, { useContext } from 'react&#x

浏览 17提问于2020-09-08得票数 1

回答已采纳

2回答

未安装react传单库

reactjs、react-leaflet

当我试图导入一个库时，我会收到以下错误：@ ./node_modules/react-leaflet/lib/propTypes/map.js 5:15-33@ .&#

浏览 0提问于2018-02-23得票数 2

回答已采纳

2回答

使用react宣传单注册事件

javascript、reactjs、leaflet、react-leaflet

我正在尝试将React-Leaflet合并到我的Create React应用程序中。我可以在底图上覆盖GeoJSON数据，但不能在此图层上注册点击。我唯一更改的不是window.React/window.LeafletReact我使用的是es6导入。我不认为这会导致这个问题，但我认为这是可能的。 import React from 'react'; import { Map, TileLayer, Marker, P

浏览 2提问于2017-01-31得票数 3

2回答

如何在React宣传单中使用onEachCountry刷新GeoJSON动画？

javascript、reactjs、leaflet、react-leaflet

import React, { useState, useEffect } from "react";import "leaflet/dist/leaflet.css"; zoom={2.5}

浏览 2提问于2021-05-26得票数 0

2回答

'LeafletProvider‘不是从'react-leaflet’导出的

reactjs、leaflet、react-leaflet、react-leaflet-v3

我有一个错误，import { withLeaflet, MapControl, LeafletProvider } from "react-leaflet"; 我相信我已经安装了最新版本的react-l

浏览 7提问于2021-10-20得票数 0

点击加载更多

无法在React中加载.geojson文件