标签: react-leaflet
React-Leaflet-Draw：在保存时访问多边形的坐标数组
我有一个在地图上放置可编辑多边形的组件。当用户点击“保存”按钮时，我想访问多边形的新顶点数组，以便可以保存它们。我该怎么做呢？
我的组件：
<FeatureGroup>
<EditControl
position="topright"
onEdited={e => console.log(e)}
edit={{ remove: false }}
draw={{
marker: false,
circle: false,
rectangle: false,
polygon: false,
polyline: false
}}
/>
<Polygon positions={polygonCoords} />;
</FeatureGroup>
我得到的几篇参考资料：
https://github.com/alex3165/react-leaflet-draw
https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event-draw:editstop
我知道我必须实现某种处理 onEdited 挂钩及其生成的事件的函数，但是有人知道如何从该事件中获取新的顶点数组吗？
推荐指数
解决办法
查看次数
如何在反应传单中制作椭圆？
我试图在使用的地图上绘制一个椭圆react-leaflet,它内置了对圆形和矩形的支持.
为了达到这个目的,我使用代码leaflet从这里生成一个椭圆(非反应),我在下面修改并粘贴:
import * as L from 'leaflet';
L.SVG.include ({
_updateEllipse: function (layer) {
var // c = layer._point,
rx = layer._radiusX,
ry = layer._radiusY,
phi = layer._tiltDeg,
endPoint = layer._endPointParams;
var d = 'M' + endPoint.x0 + ',' + endPoint.y0 +
'A' + rx + ',' + ry + ',' + phi + ',' +
endPoint.largeArc + ',' + endPoint.sweep + ',' +
endPoint.x1 + ',' + endPoint.y1 + ' z';
this._setPath(layer, d); …推荐指数
解决办法
查看次数
在服务器端渲染中反应传单地图错误
已解决 --- 请阅读更新 2
你好，我在使用 React-leaflet 地图的 React 入门套件中遇到此错误
它就像 github 模块示例，但我不知道问题是什么！我认为SSR有问题
React 版本：16.x 和 React 入门套件
更新1
ReferenceError: window is not defined
at D:\project\react-starterkit\node_modules\leaflet\src\core\Util.js:217:24
at version (D:\project\react-starterkit\node_modules\leaflet\dist\leaflet-src.js:7:65)
at Object.<anonymous> (D:\project\react-starterkit\node_modules\leaflet\dist\leaflet-src.js:10:2)
at Module._compile (module.js:635:30)
at Module._extensions..js (module.js:646:10)
at Object.require.extensions.(anonymous function) [as .js] (D:\project\react-starterkit\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
通过更新反应解决最新版本 16.x
TypeError: (0 , _react.createContext) is not a function
at Object.<anonymous> (D:\project\react-starterkit\node_modules\react-leaflet\lib\context.js:18:47)
at Module._compile (module.js:635:30)
at Module._extensions..js (module.js:646:10)
at Object.require.extensions.(anonymous function) [as .js] (D:\project\react-starterkit\node_modules\babel-register\lib\node.js:152:7) …reactjs server-side-rendering react-starter-kit react-leaflet
推荐指数
解决办法
查看次数
Leaflet-React 地图渲染图块未到位和空图块
我正在尝试将一个简单的 Leaflet-React 地图渲染到屏幕上。
但是瓷砖都弄乱了，或者没有渲染。看一下截图：
我尝试使用默认的 OpenStreetMaps URL 以及 MapBox URL，但都给出了相同的结果，所以我认为这不是磁贴服务器问题。虽然我可能是错的。
这是我的代码：
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Map, TileLayer, Marker, Popup} from 'react-leaflet'
class FieldMap extends Component {
state = {
lat: 51.505,
lng: -0.09,
zoom: 1,
zoomOffset: 1
}
render() {
const position = [this.state.lat, this.state.lng]
return (
<div style={{
paddingBottom: "5%",
height: "200px",
width: "200px"
}}>
<Map style={{
paddingBottom: "5%",
height: "200px",
width: "200px"}} center={position} zoom={this.state.zoom} zoomOffset={this.zoomOffset}>
<TileLayer
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://api.mapbox.com/styles/v1/rustyraptor/cjkbednp4buod2rnwog2xrdtb/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicnVzdHlyYXB0b3IiLCJhIjoiY2prOXdtZ2E5MjN3ODNxbWVsM3NyNWlsZCJ9.AVHo6o9Z68w1c2lsBXuGDg"/>
<Marker …推荐指数
解决办法
查看次数
用户单击弹出窗口中的按钮后关闭弹出反应传单
所以基本上想要为react-leaflet Popup组件定制关闭，接缝对于本机API传单来说不是一个大问题，但是对于react-leaflet中的react组件我找不到解决方案。
推荐指数
解决办法
查看次数
如何防止 React-Leaflet Map 子节点上的事件冒泡
我有一个React-Leaflet地图，我正在渲染div里面。
出于某种原因，与 div 的内容交互会导致下面的地图做出响应（例如：双击将缩放地图，拖动将平移地图） - 即使我正在调用e.stopPropagation()附加到 div 的处理程序。
据我了解，调用stopPropagation()应该阻止 DOM 事件到达地图本身。
为什么看起来stopPropagation()被忽略了？
我怎样才能在地图内渲染一个 div而不让它的事件冒泡到地图本身？
import { Map, TileLayer } from 'react-leaflet';
const MyMap = props => (
<Map zoom={13} center={[51.505, -0.09]}>
<TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} />
{/*
HOW do I get this div to NOT pass it's events down to the map?!?!
Why does e.stopPropagation() appear to not work?
*/}
<div
id="zone"
onClick={e => e.stopPropagation()}
onMouseDown={e …推荐指数
解决办法
查看次数
使用“react-leaflet”新 useLeaflet() 钩子的示例？
我正在尝试使用钩子获取对传单对象的引用，因此我可以查询不同事件（如 Map.getBoundaries()）上的新地图边界。我很新reac-leaflet，这种方法可能完全错误，但这是我现在所拥有的......
我想要做的是获取每个moveend事件的地图边界，如果这有帮助的话......
推荐指数
解决办法
查看次数
React Leaflet V3 自定义控件
有一个新的 react-leaflet 版本，可以在这里找到：npm install react-leaflet/next docs：https ://react-leaflet-v3.now.sh/docs/start-introduction
这是使用钩子的完全重写。
基于这些新的钩子，我正在尝试编写一个自定义图层控件，我主要只是想将其分成多个组并从 material-ui 渲染我的反应组件，以使地图样式与我的应用程序的其余部分保持一致。根据我的理解，钩子的使用方式如下：
基本控制示例
const MyControl = Control.extend({
onAdd: map => {
let container = DomUtil.create('div');
container.innerHTML += 'My Control';
return container;
},
// this one is optional
onRemove: map => {},
});
const useControlElement = createElementHook(
function createControl(_ref, ctx) {
const context = useLeafletContext();
var instance = new MyControl(position);
return {
instance: instance,
context: Object.assign({}, ctx, {
control: instance,
}),
};
},
function updateControl(control, props, prevProps) {},
);
const useControl …推荐指数
解决办法
查看次数
为什么我得到的“地图”不是从“反应传单”中导出的？
为什么我得到：
./src/components/mapComponent/MapView.jsx
Attempted import error: 'Map' is not exported from 'react-leaflet'.
我在组件中导入它：
import React, { Component } from "react";
import { Map, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
这让我感到困惑，因为代码中的所有内容看起来都是正确的....
推荐指数
解决办法
查看次数
React Leaflet - 标记图像无法加载
问题
我在我的 React 项目中使用leaflet v1.7.1和react-leaflet v3.0.5 。
当我尝试React Router 的“Setup”文档页面中的设置示例时，标记图标变成了损坏的图像，如下图红色圆圈所示：
从 React Router 的文档来看，标记应该是这样的：
经检查，保存标记图像的标签src的属性应为。然而，经过检查， my的属性看起来是乱码：<img>https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png<img>src
复制
我创建了一个新的沙箱，其中包含我的代码：
或者，按照以下步骤复制问题：
npx create-react-app leaflet-testcd leaflet-test/npm i leaflet react-leaflet在代码编辑器中打开项目。转到
App.js并使用以下代码：
Run Code Online (Sandbox Code Playgroud)import React from "react"; import "./App.css"; import "leaflet/dist/leaflet.css"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; const styles = { mapRoot: { height: 400, }, }; export default function App() { return ( <MapContainer style={styles.mapRoot} center={[51.505, -0.09]} …
推荐指数
解决办法
查看次数